访问用户数据

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

  1. 内建 Google 认证
  2. 第三方认证(Twitter、Foursquare 等等)

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

与 Google 认证

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

与第三方服务整合

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

与提供商注册

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

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

  1. Google API 控制台创建一个新项目。
  2. 在 Services(服务)部分激活 Tasks(工作表) API。
  3. 在 API Access 部分创建一个新的 OAuth2.0 客户端标识符,选择 Web application,其他字段不用修改。
  4. 在新创建的客户端标识符上单击 Edit settings。
  5. 在 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 了。

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

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

  2. 向现有的 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";
    

  3. 现在我们只需要一个按钮,开始导入过程。更新 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 网上应用店。