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 แดชบอร์ดโดยไม่เผยแพร่

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

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

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

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

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

เพิ่มโค้ดลงใน 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 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 แล้วนี่เอง! เพลิดเพลินกับใบหน้าของผู้ที่คุณติดต่อใน บล็อก

แสดงใบหน้าในบล็อก