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

摘要

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

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

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

  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.chinacloudapi.cn
    Microsoft microsoftaccount https://login.live.com

    下面显示了 Content-Security-Policy(针对 Azure Active Directory 实现)的示例:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'
        data: gap: https://login.chinacloudapi.cn https://yourapp.chinacloudsites.cn; style-src 'self'">
    

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

    请注意,在相应的移动设备上使用时,某些身份验证提供程序不需要 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。