หน้านี้ได้รับการแปลโดย Cloud Translation API

OAuth 2.0: ตรวจสอบสิทธิ์ผู้ใช้ด้วย Google

OAuth2 เป็นโปรโตคอลมาตรฐานอุตสาหกรรมสำหรับการให้สิทธิ์ เครื่องมือนี้มีกลไกให้ผู้ใช้ให้สิทธิ์แอปพลิเคชันบนเว็บและเดสก์ท็อปในการเข้าถึงข้อมูลส่วนตัวโดยไม่ต้องแชร์ชื่อผู้ใช้ รหัสผ่าน และข้อมูลเข้าสู่ระบบส่วนตัวอื่นๆ

บทแนะนำนี้จะสร้างส่วนขยายที่เข้าถึงรายชื่อติดต่อ Google ของผู้ใช้โดยใช้ Google People API และ Chrome Identity API เนื่องจากส่วนขยายไม่ได้โหลดผ่าน HTTPS จึงไม่สามารถทำการเปลี่ยนเส้นทางหรือตั้งค่าคุกกี้ ส่วนขยายจึงอาศัย Chrome Identity API เพื่อใช้ OAuth2

เริ่มต้นใช้งาน

เริ่มต้นด้วยการสร้างไดเรกทอรีและไฟล์เริ่มต้นต่อไปนี้

manifest.json

เพิ่มไฟล์ Manifest ด้วยการสร้างไฟล์ที่ชื่อ manifest.json และใส่โค้ดต่อไปนี้

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

เพิ่มโปรแกรมทำงานของบริการส่วนขยายโดยการสร้างไฟล์ชื่อ service-worker.js และใส่รหัสต่อไปนี้

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

เพิ่มไฟล์ HTML ชื่อ index.html และรวมโค้ดต่อไปนี้

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

ใช้รหัสส่วนขยายที่สอดคล้องกัน

การเก็บรักษารหัสเดียวเป็นสิ่งสำคัญในระหว่างการพัฒนา ในการรักษารหัสที่สอดคล้องกัน ให้ทำตามขั้นตอนต่อไปนี้

อัปโหลดส่วนขยายไปยังหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์

สร้างแพ็กเกจไดเรกทอรีส่วนขยายลงในไฟล์ .zip และอัปโหลดไปยังหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ Chrome โดยไม่ต้องเผยแพร่ ดังนี้

ในหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ ให้คลิกเพิ่มรายการใหม่
คลิกเรียกดูไฟล์ เลือกไฟล์ ZIP ของส่วนขยาย แล้วอัปโหลด
ไปที่แท็บแพ็กเกจ แล้วคลิกดูคีย์สาธารณะ

แท็บแพ็กเกจหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์

เมื่อป๊อปอัปเปิดขึ้น ให้ทำตามขั้นตอนต่อไปนี้

คัดลอกโค้ดระหว่าง -----BEGIN PUBLIC KEY----- ถึง -----END PUBLIC KEY-----
ลบบรรทัดใหม่เพื่อทำให้บรรทัดข้อความเดียว

ป๊อปอัปคีย์สาธารณะ

เพิ่มโค้ดลงใน manifest.json ใต้ช่อง "key" วิธีนี้จะทำให้ส่วนขยายใช้รหัสเดียวกัน

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

เปรียบเทียบรหัส

เปิดหน้าการจัดการส่วนขยายที่ chrome://extensions ตรวจสอบว่าเปิดใช้โหมดนักพัฒนาซอฟต์แวร์อยู่ แล้วอัปโหลดไดเรกทอรีส่วนขยายที่ไม่ได้แพ็กเกจ เปรียบเทียบรหัสส่วนขยายในหน้าการจัดการส่วนขยายกับรหัสรายการในหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ ข้อความต้องตรงกัน

รหัสของส่วนขยายตรงกัน

สร้างรหัสไคลเอ็นต์ OAuth

ไปที่คอนโซล Google API แล้วสร้างโปรเจ็กต์ใหม่ เมื่อพร้อมแล้ว ให้เลือกข้อมูลเข้าสู่ระบบในแถบด้านข้าง คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth

สร้างข้อมูลเข้าสู่ระบบสำหรับส่วนขยาย

ในหน้าสร้างรหัสไคลเอ็นต์ ให้เลือกส่วนขยาย Chrome กรอกชื่อของส่วนขยายและใส่รหัสส่วนขยายไว้ท้าย URL ในช่องรหัสแอปพลิเคชัน

กรอกข้อมูลส่วนขยาย

คลิกสร้างให้เสร็จ คอนโซลจะให้รหัสไคลเอ็นต์ OAuth

ลงทะเบียน OAuth ในไฟล์ Manifest

ใส่ช่อง "oauth2" ในไฟล์ Manifest ของส่วนขยาย วางรหัสไคลเอ็นต์ OAuth ที่สร้างขึ้นในส่วน "client_id" ใส่สตริงว่างใน "scopes" ในตอนนี้

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":[""]
  },
  ...
}

เริ่มขั้นตอน OAuth แรก

ลงทะเบียนสิทธิ์ identity ในไฟล์ Manifest

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

สร้างไฟล์เพื่อจัดการขั้นตอน OAuth ที่มีชื่อว่า oauth.js และรวมรหัสต่อไปนี้

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

วางแท็กสคริปต์สำหรับ oauth.js ในส่วนหัวของ index.html

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

โหลดส่วนขยายซ้ำแล้วคลิกไอคอนเบราว์เซอร์เพื่อเปิด index.html เปิดคอนโซลและคลิกปุ่ม "รายชื่อติดต่อของ FriendBlock" โทเค็น OAuth จะปรากฏในคอนโซล

ดูโทเค็นในคอนโซล

เปิดใช้ Google People API

กลับไปที่คอนโซล Google API แล้วเลือกไลบรารีจากแถบด้านข้าง ค้นหา "Google People API" คลิกผลการค้นหาที่ถูกต้องและเปิดใช้

เปิดใช้ People API

เพิ่มไลบรารีของไคลเอ็นต์ Google People API ไปยัง "scopes" ในไฟล์ Manifest ของส่วนขยาย

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

กลับไปที่คอนโซล Google API และย้อนกลับไปยังข้อมูลเข้าสู่ระบบ คลิก "สร้างข้อมูลเข้าสู่ระบบ" แล้วเลือก "คีย์ API" จากเมนูแบบเลื่อนลง

สร้างข้อมูลเข้าสู่ระบบ People API

เก็บคีย์ API ที่สร้างขึ้นเพื่อใช้ในภายหลัง

สร้างคำขอ API รายการแรก

เมื่อส่วนขยายมีสิทธิ์ที่เหมาะสม ข้อมูลเข้าสู่ระบบ และสามารถให้สิทธิ์ผู้ใช้ Google ได้แล้ว ส่วนขยายก็จะขอข้อมูลผ่าน People API ได้ อัปเดตรหัสใน oauth.js ให้ตรงกับด้านล่าง

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

แทนที่ API_KEY ด้วยคีย์ API ที่สร้างขึ้นจากคอนโซล Google API ส่วนขยายควรบันทึกออบเจ็กต์ JSON ที่มีอาร์เรย์ people/account_ids ในช่อง memberResourceNames

บล็อกใบหน้า

เมื่อส่วนขยายแสดงรายการรายชื่อติดต่อของผู้ใช้แล้ว ส่วนขยายก็สามารถส่งคำขอเพิ่มเติมเพื่อเรียกดูโปรไฟล์และข้อมูลของรายชื่อติดต่อเหล่านั้นได้ ส่วนขยายจะใช้ memberResourceNames เพื่อดึงข้อมูลรูปภาพของรายชื่อติดต่อของผู้ใช้ อัปเดต oauth.js ให้รวมโค้ดต่อไปนี้

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

โหลดซ้ำและกลับไปที่ส่วนขยาย คลิกที่ปุ่ม FriendBlock เพื่อเป็นแนวทาง เห็นหน้าของผู้ติดต่อได้ ในบล็อกเดียว

รายชื่อติดต่อในบล็อก