OAuth2 是業界標準的授權通訊協定。使用者可透過這項機制，授權網頁和桌面應用程式存取私人資訊，而不必分享使用者名稱、密碼和其他私人憑證。
本教學課程會建構擴充功能，透過 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": 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
新增名為 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> 使用一致的擴充功能 ID
開發期間請務必保留單一 ID。如要維持一致的 ID，請按照下列步驟操作：
將擴充功能上傳至開發人員資訊主頁
將擴充功能目錄封裝為 .zip 檔案，然後上傳至 Chrome 開發人員資訊主頁，但不要發布：
- 在開發人員資訊主頁上，按一下「新增項目」。
- 按一下「瀏覽檔案」，選取擴充功能的 ZIP 檔案並上傳。
- 前往「套件」分頁，然後按一下「查看公開金鑰」。
開啟對話方塊後，請按照下列步驟操作：
- 複製
-----BEGIN PUBLIC KEY-----和-----END PUBLIC KEY-----之間的程式碼。 - 移除換行符，讓文字顯示在同一行。
將程式碼新增至 "key" 欄位下方的 manifest.json。 這樣擴充功能就會使用相同的 ID。
{ // manifest.json "manifest_version": 3, ... "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB", } 比較 ID
前往 chrome://extensions 開啟「擴充功能管理」頁面，確認已啟用「開發人員模式」，然後上傳未封裝的擴充功能目錄。比較擴充功能管理頁面上的擴充功能 ID 與開發人員資訊主頁中的項目 ID。兩者應相符。
建立 OAuth 用戶端 ID
凡是使用 OAuth 2.0 存取 Google API 的應用程式，都必須具備授權憑證，向 Google 的 OAuth 2.0 伺服器識別應用程式。下列步驟說明如何為專案建立憑證。應用程式隨後就能使用這些憑證，存取您為該專案啟用的 API。
首先，請前往 Google API 控制台，建立新專案 (如果還沒有的話)。按照這些操作說明建立 OAuth 用戶端，並取得用戶端 ID。
- Go to the Clients page.
- 按一下「建立用戶端」。
- 選取「Chrome 擴充功能」應用程式類型。
- 輸入 OAuth 用戶端的名稱。這個名稱會顯示在專案的「客戶」頁面，用於識別客戶。
- 在「項目 ID」欄位中輸入擴充功能 ID。
- 按一下 [Create] (建立)。
在資訊清單中註冊 OAuth
在擴充功能資訊清單中加入 "oauth2" 欄位。將產生的 OAuth 用戶端 ID 放在 "client_id" 下方。目前請在 "scopes" 中加入空字串。
{ "name": "OAuth Tutorial FriendBlock", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes":[""] }, ... } 啟動第一個 OAuth 流程
在資訊清單中註冊 identity 權限。
{ "name": "OAuth Tutorial FriendBlock", ... "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 Contacts」按鈕。控制台會顯示 OAuth 權杖。
啟用 Google People API
返回 Google API 控制台，然後從側欄選取「程式庫」。搜尋「Google People API」，點選正確結果並啟用。
在擴充功能資訊清單中，將 Google People API 用戶端程式庫新增至 "scopes"。
{ "name": "OAuth Tutorial FriendBlock", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes": [ "https://www.googleapis.com/auth/contacts.readonly" ] }, ... } 返回 Google API 控制台，然後返回憑證。按一下「建立憑證」，然後從下拉式選單中選取「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 金鑰。擴充功能應記錄 JSON 物件，其中包含 memberResourceNames 欄位下的 people/account_id 陣列。
停止顯示臉孔
現在，擴充功能會傳回使用者聯絡人清單，因此可以發出額外要求，擷取這些聯絡人的個人資料和資訊。這項擴充功能會使用 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 按鈕，大功告成！在方塊中欣賞聯絡人的臉部。
