OAuth2：使用 Google 对用户进行身份验证

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": 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. 点击选择文件，然后选择 .zip 扩展程序目录并上传。
  3. 选择保存草稿并返回信息中心，而不填写其他字段。

在 Your Listings 下找到该扩展程序，然后点击 more info。在弹出式窗口中，复制公钥，并将其添加到解压缩的目录中的清单中的 "key" 字段下。

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

比较 ID

打开位于 chrome://extensions 的“扩展程序管理”页面，确保已启用开发者模式，并上传未打包的扩展程序目录。将扩展程序管理页面上的扩展程序 ID 与开发者信息中心内的项 ID 进行比较。二者应该一致。

附加信息的 ID 在所有位置都一致

此扩展程序将通过在清单中添加 "key" 字段来保持相同的 ID。保留单个 ID 对于 API 注册至关重要。

创建 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 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 Contacts”按钮。OAuth 令牌将显示在控制台中。

在控制台中查看令牌

启用 Google People API

返回 Google API 控制台，然后从边栏中选择库。搜索“Google People 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 密钥。该扩展程序应记录一个 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 按钮在区块中欣赏联系人的面孔。

街区中的联系人面孔