OAuth2 是授权的业界标准协议。它提供了一种机制，让用户在不共享用户名、密码和其他私密凭据的情况下，向 Web 和桌面应用授予对私密信息的访问权限。
本教程将构建一个扩展程序，该扩展程序使用 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
前往 Google API 控制台，然后创建一个新项目。准备就绪后，在边栏中选择凭据，点击创建凭据，然后选择 OAuth 客户端 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); }); }); }; 在 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”按钮，就大功告成了！在一个屏幕上查看联系人的多张照片。
