OAuth2：透過 Google 驗證使用者

OAuth2 是業界標準的授權通訊協定。這個 API 提供的機制可讓使用者在不分享使用者名稱、密碼和其他私人憑證的情況下，將私人資訊的存取權授予網頁和桌面應用程式。

本教學課程建構一項擴充功能，以便使用 Google People API 和 Chrome Identity API 存取使用者的 Google 聯絡人。由於擴充功能不會透過 HTTPS 載入，因此無法執行重新導向或設定 Cookie，因此必須仰賴 Chrome Identity API 來使用 OAuth2。

立即開始

首先，請建立目錄和下列範例程式碼。

你可以在這裡下載完整的擴充功能。

manifest.json

建立名稱為 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": 2,
  "browser_action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  }
}

background.js

建立名稱為 background.js 的檔案並加入以下程式碼，以新增背景指令碼。或在這裡下載檔案。

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

index.html

新增名為 index.html 的 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. 按一下「Choose file」，然後選取 .zip 擴充功能目錄並上傳。
  3. 如果不想填寫其他欄位，請選取「儲存草稿並返回資訊主頁」。

在「Your Listings」下方找到擴充功能，然後按一下「More info」。接著從彈出式視窗中，複製公開金鑰，然後新增至 "key" 欄位下方的已解壓縮目錄內的資訊清單。

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

比較 ID

在 chrome://extensions 開啟「Extension Management」(擴充功能管理) 頁面，確認開發人員模式已啟用，然後上傳未封裝的擴充功能目錄。比較擴充功能管理頁面上的擴充功能 ID 與開發人員資訊主頁中的項目 ID。兩者應一致。

在所有位置的擴充功能 ID 相符

擴充功能會在資訊清單中加入 "key" 欄位，將維持相同的 ID。保留單一 ID 是註冊 API 的重要關鍵。

建立 OAuth 用戶端 ID

前往 Google API 控制台，然後建立新專案。準備就緒後，選取側欄中的「Credentials」，按一下「Create credentials」並選擇「OAuth client ID」。

為擴充功能建立憑證

在「Create client ID」(建立用戶端 ID) 頁面上選取「Chrome App」(Chrome 應用程式)，然後填入擴充功能名稱，並在「Application ID」(應用程式 ID) 欄位中，將擴充功能 ID 放在網址結尾。

填寫擴充功能資訊

按一下「建立」即可完成。控制台會提供 OAuth 用戶端 ID。

在資訊清單中註冊 OAuth

在擴充功能資訊清單中加入 "oauth2" 欄位。將產生的 OAuth 用戶端 ID 放在 "client_id" 下方。暫時在 "scopes" 中加入空字串。

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

啟動第一個 OAuth 流程

在資訊清單中註冊 identity 權限。

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

建立檔案以管理名為 oauth.js 的 OAuth 流程，並加入以下程式碼。或在這裡下載。

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

在 index.html 的標頭中加入 oauth.js 的指令碼標記。

...
  <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」，然後按一下正確的結果並啟用該 API。

啟用 People API

將 Google People API 用戶端程式庫新增至擴充功能資訊清單中的 "scopes"。

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "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 替換成透過 Google API 控制台產生的 API 金鑰。擴充功能應記錄 memberResourceNames 欄位下方含有 people/account_id 陣列的 JSON 物件。

封鎖臉孔

擴充功能現在會傳回使用者聯絡人清單，因此可以提出其他要求來擷取這些聯絡人的設定檔與資訊。擴充功能會使用 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] 按鈕，立刻一探究竟！在某個街區

封鎖對象的臉孔