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 的檔案，並加入下列程式碼，即可新增擴充功能服務 worker。
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 檔案並上傳。
- 前往「Package」分頁，然後點選「View public key」。
對話方塊開啟後，請按照下列步驟操作：
- 複製
-----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 中的「Extensions Management」頁面，確認已啟用「Developer mode」，然後上傳未封裝的擴充功能目錄。將擴充功能管理頁面中的擴充功能 ID 與開發人員資訊主頁中的商品 ID 進行比較。兩者應相符。
建立 OAuth 用戶端 ID
前往 Google API 控制台，然後建立新專案。準備就緒後，請選取側欄中的「憑證」，然後按一下「建立憑證」，並選擇「OAuth 用戶端 ID」。
在「Create client ID」(建立用戶端 ID) 頁面中選取「Chrome 擴充功能」。填入擴充功能名稱，並在「應用程式 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 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); }); }); }; 將 oauth.js 的程式碼標記放在 index.html 的標頭中。
... <head> <title>FriendBlock</title> ... <script type="text/javascript" src="oauth.js"></script> </head> ... 重新載入擴充功能，然後按一下瀏覽器圖示，開啟 index.html。開啟控制台，然後按一下「FriendBlock Contacts」(封鎖聯絡人) 按鈕。控制台會顯示 OAuth 權杖。
啟用 Google People API
返回 Google API 控制台，然後從側欄選取「Library」。搜尋「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」按鈕，在區塊中顯示聯絡人的臉孔。
