通过

将身份验证添加到 Apache Cordova 应用

  • 项目

摘要

本教程介绍如何使用支持的标识提供者将身份验证添加到 Apache Cordova 上的待办事项列表快速入门项目。 本教程基于移动应用入门教程，必须先完成该教程。

注册应用以进行身份验证并配置应用服务

首先，需要在标识提供者站点上注册应用，然后在移动应用后端设置提供者生成的凭据。

  1. 请按照以下提供者特定的说明来配置首选标识提供者：

  2. 为要在应用中支持的各提供者重复上述步骤。

观看显示类似步骤的视频

将权限限制给已经过身份验证的用户

默认情况下，可匿名调用移动应用后端中的 API。 接下来，需限制为仅可访问已验证的客户端。

  • Node.js 后端（通过 Azure 门户）：

    在移动应用设置中，单击“简易表”并选择相应的表。 单击“更改权限”，为所有权限选择“仅限已验证的访问”，并单击“保存”。

  • .NET 后端 (C#):

    在服务器项目中，导航到“控制器”>“TodoItemController.cs”。 将 [Authorize] 属性添加到“TodoItemController”类，如下所示。 若要限制为仅可访问特定方法，还可只向这些方法应用此属性（而非类）。 重新发布服务器项目。

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js 后端（通过 Node.js 代码）：

    若要访问表时需验证身份，请向 Node.js 服务器脚本添加以下行：

      table.access = 'authenticated';

    有关更多详细信息，请参阅如何：要求在访问表时进行身份验证。 若要了解如何从网站下载快速入门代码项目，请参阅如何：使用 Git 下载 Node.js 后端快速入门代码项目。

现在，可以验证是否已禁用对后端的匿名访问。 在 Visual Studio 中：

  • 打开完成移动应用入门教程后创建的项目。
  • 在“Google Android 模拟器”中运行应用程序。
  • 验证在应用启动后，是否显示“意外的连接失败”。

接下来，需要更新应用程序，以便在从移动应用后端请求资源之前对用户进行身份验证。

向应用程序添加身份验证

  1. 在 Visual Studio 中打开项目，并打开 www/index.html 文件进行编辑。

  2. 找到 head 节中的 Content-Security-Policy 元标记。 将 OAuth 主机添加到允许的源列表。

    提供程序 SDK 提供程序名称 OAuth 主机
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook facebook https://www.facebook.com
    Google google https://accounts.google.com
    Microsoft microsoftaccount https://login.live.com
    Twitter twitter https://api.twitter.com

    下面显示了 Content-Security-Policy（针对 Azure Active Directory 实现）的示例：

     <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

    将 https://login.microsoftonline.com 替换为上表中的 OAuth 主机。 有关 content-security-policy 元标记的详细信息，请参阅 Content-Security-Policy 文档。

    在相应的移动设备上使用时，某些身份验证提供程序不需要 Content-Security-Policy 更改。 例如，在 Android 设备上使用 Google 身份验证时便不需要 Content-Security-Policy 更改。

  3. 打开 www/js/index.js 文件进行编辑，找到 onDeviceReady() 方法，然后在客户端创建代码下添加以下代码：

     // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);

    此代码将替换用于创建表引用和刷新 UI 的现有代码。

    login() 方法开始对提供程序进行身份验证。 login() 方法是返回 JavaScript Promise 的异步函数。 初始化的剩余部分放置在 promise 响应中，因此在 login() 方法完成之前不会执行。

  4. 在刚刚添加的代码中，将 SDK_Provider_Name 替换为登录提供程序的名称。 例如，对于 Azure Active Directory，请使用 client.login('aad')。

  5. 运行您的项目。 当项目已完成初始化后，应用程序将针对所选的身份验证提供程序显示 OAuth 登录页。

后续步骤

了解如何使用 SDK。