此页面由 Cloud Translation API 翻译。

OAuth 2.0：向 Google 验证用户身份

OAuth2 是业界标准的授权协议。它提供了一种机制允许 Web 应用和桌面应用访问私密信息，而无需分享其用户名；密码和其他私有凭据

本教程将构建一个扩展程序，以便使用 Google 通讯录应用访问用户的 Google 通讯录。 API 和 Chrome Identity API。由于扩展程序不会超过 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 的文件来添加扩展程序 Service 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 的“扩展程序管理”页面，确保已启用开发者模式。然后上传未打包的扩展程序目录。比较扩展程序管理中的扩展程序 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。打开控制台，然后点击“好友阻止联系人”按钮。控制台中会显示一个 OAuth 令牌。

在控制台中查看令牌

启用 Google People API

返回 Google API 控制台，然后从边栏中选择库。搜索“Google 用户” API”消息，请点击正确的结果并启用它。

启用 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 密钥”下拉列表

创建 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 密钥。扩展程序应记录一个包含 people/account_id 数组的 JSON 对象， 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 按钮和 ta-da!轻松欣赏联系人的面孔。

屏蔽中的联系人面孔