与 Google 认证
与第三方服务整合
您还应该阅读
接下来做什么？

访问用户数据

大部分现代应用程序都为了同步数据而依赖网络。同步数据时，您需要确定用户是谁。Chrome 应用内建认证 API，使您更方便地与 Google 账户或任何其他支持 OAuth 的服务集成。

内建 Google 认证
第三方认证（Twitter、Foursquare 等等）

警告： 使用认证的应用需要在 manifest.json 中指定 experimental 权限，而且在它们仍然处于实验性状态时不能上传到 Chrome 网上应用店。如果您愿意的话，您可以选择跳过这一实验。

与 Google 认证

我们正在开发一种很简单的整合流程，用于和 Google 账户认证的应用。然而，该流程还不能用于一般用途。在此同时，您仍然可以使用如下所述的第三方流程，即使是用在 Google 服务上。

与第三方服务整合

Chrome 应用有一个专门的 API，可以对任何第三方 OAuth2 服务进行认证流程，称为 identity.launchWebAuthFlow。为了演示该流程的工作方式，我们将更新我们的示例，将 Google 工作表引入到待办事项列表中。

与提供商注册

要使用第三方 OAuth2 提供商，您首先需要在提供商注册您的应用程序。每一个提供商都有自己的方式来注册应用程序，但是大体上应该在提供商网站上一个称为开发者或 API 的部分。

这里我们将 Google 视为第三方服务，只需要遵循 Google 自己过程，为需要 API 访问的应用注册。

在 Google API 控制台创建一个新项目。
在 Services（服务）部分激活 Tasks（工作表） API。
在 API Access 部分创建一个新的 OAuth2.0 客户端标识符，选择 Web application，其他字段不用修改。
在新创建的客户端标识符上单击 Edit settings。
在 Authorized Redirect URLs 中添加 https://<YOURAPP_ID>.chromiumapp.org/，将 <YOURAPP_ID> 替换为您的应用标识符（也就是由字母和数字组成的应用的长标识符，您可以在 chrome://extensions 中找到）。

添加权限

更新 AngularJS manifest.json 或 JavaScript manifest.json 使用实验性的特性。注意我们也请求了向工作表服务 URL 发出 XHR 请求的权限，出于安全原因，您需要在清单文件中为您需要通过 XHR 调用的每一个 URL 明确请求权限。

{
     ... ,
     "permissions": ["storage", "experimental", "https://www.googleapis.com/tasks/*"]
}

将 Google 工作表添加到待办事项列表

现在我们已经准备好请求用户认证，以便连接到工作表服务，并将工作表导入我们的待办事项列表。首先，我们需要请求访问令牌，第一次运行时会自动向用户弹出认证和授权窗口。一旦我们拥有了这一令牌，我们就能直接调用 Google 工作表 API 了。

由于这一部分很费时间，而且容易出错，您可以直接从这里复制我们用来处理 Google 工作表 API 认证的 JavaScript：Angular gapi_tasks.js 和 JavaScript gapi_tasks.js 是一样的。该脚本调用 launchWebFlow 并为指定的客户端标识符获取有效的访问令牌。它还有一些简单的 JavaScript 方法，可以在认证后进入工作表 API，并获取用户的任务列表以及对应的任务。

注意：该脚本并非用于产品中的，它只是一段很简单、很有限而且肯定不健壮的代码，仅仅是为了突出基本认证过程和 API 调用。

向现有的 AngularJS controller.js 或 JavaScript controller.js 添加一个新方法，使用前一步脚本中的方法认证用户并将他的 Google 任务导入待办事项列表：

Angular

JavaScript

$scope.importFromGTasks = function() {
  var api = new TasksAPI();
  var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>";
  api.authenticate(clientId, function() {
    api.getLists(function(result) {
      console.log(result);
      if (!result || !result.items || result.items.length==0) {
        throw "No task lists available";
      }
      var listId=result.items[0].id;
      api.getTasks(listId, function(tasks) {
        console.log(tasks);
        for (var j=0; j<tasks.items.length; j++) {
          $scope.$apply(function() {
            $scope.todos.push({text:tasks.items[j].title, done:tasks.items[j].status!="needsAction"});
          });
        }
      });
    });
  });
}

document.getElementById('importGTasks').addEventListener('click',
    function() {
  var api = new TasksAPI();
  var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>";
  api.authenticate(clientId, function() {
    api.getLists(function(result) {
      console.log(result);
      if (!result || !result.items || result.items.length==0) {
        throw "No task lists available";
      }
      var listId=result.items[0].id;
      api.getTasks(listId, function(tasks) {
        console.log(tasks);
        for (var j=0; j<tasks.items.length; j++) {
          model.addTodo(tasks.items[j].title, tasks.items[j].status!='needsAction');
        }
      });
    });
  });
});

将以上代码的下面几行：

  var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>";

替换为您自己的项目在 Google API 客户端获得的客户端标识符，应该如下所示：

  var clientId = "xxxxxxxxxxxxxx.apps.googleusercontent.com";

现在我们只需要一个按钮，开始导入过程。更新 index.html 包含 gapi_tasks.js，并添加一个新的按钮，调用 importFromGTasks：

Angular

JavaScript

<script src="gapi_tasks.js"></script>
...
<button ng-click="importFromGTasks()">import tasks from GTasks</button>

<button id="importGTasks">import tasks from GTasks</button>
...
<script src="gapi_tasks.js"></script>

检查结果

如果您遇到了困难，希望立刻看到修改后的应用，请进入 chrome://extensions，加载未打包的 AngularJS 应用或 JavaScript 应用，并从新标签页中运行应用。

您还应该阅读

认证用户教程

接下来做什么？

在 7 - 访问网络资源中，您将会学习如何加载并显示来自远程 URL 的图片。

注意：直到现在，每一个实验中的代码都基于前一个实验的代码示例建立。我们决定不将用户认证代码的更改包含在剩下的实验中，因为认证 API 还是实验性的，这样会阻止您将您的最终代码发布到 Chrome 网上应用店。