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

在本教程中，将使用 Microsoft Entra ID 将Microsoft身份验证添加到快速入门项目。 在完成本教程之前，请确保已 创建项目 并 启用脱机同步。

配置后端以进行身份验证

若要配置后端进行身份验证，必须：

• 创建应用注册。
• 配置 Azure 应用服务身份验证和授权。
• 将应用添加到允许的外部重定向 URL。

在本教程中，我们将应用配置为使用Microsoft身份验证。 已在 Azure 订阅中自动配置Microsoft Entra 租户。 可以使用 Microsoft Entra ID 配置Microsoft身份验证。

需要预配服务时提供的 Azure 移动应用服务的后端 URL。

创建应用注册

1. 登录 Azure 门户。
2. 选择“Microsoft Entra ID”“应用注册”>“新建注册”>。
3. 在 注册应用程序 页中，在 zumoquickstart 字段中输入 。
4. 在 支持的帐户类型下，选择任何组织目录中的 帐户（任何Microsoft Entra 目录 - 多租户）和个人Microsoft帐户（例如 Skype、Xbox）。
5. 在“重定向 URI”中，选择“Web”并键入 。 例如，如果后端 URL https://zumo-abcd1234.azurewebsites.net，则输入 https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback。
6. 按窗体底部的“注册”按钮。
7. 复制应用程序（客户端）ID。
8. 在左侧窗格中，选择“证书和机密”>“新建客户端机密”。
9. 输入合适的说明，选择有效期，然后选择 添加。
10. 复制 证书 & 机密 页上的机密。 该值不会再次显示。
11. 选择身份验证。
12. 在 隐式授予和混合流下，启用ID 令牌。
13. 按页面顶部 保存。

配置 Azure 应用服务身份验证和授权

1. 在 Azure 门户中，选择 所有资源，然后选择应用服务。

2. 选择“设置”“身份验证”。>

3. 按 添加标识提供者。

4. 选择“Microsoft”作为标识提供者。

   • 对于 应用注册类型，请选择 提供现有应用注册的详细信息。
   • 将之前复制的值粘贴到 应用程序（客户端）ID 和 客户端机密 框中。
   • 对于 颁发者 URL，请输入 https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0。 此 URL 是Microsoft登录名的“magic 租户 URL”。
   • 对于“限制访问”，请选择“需要身份验证”。
   • 对于 未经身份验证的请求，请选择 HTTP 401 未授权。

5. 按“添加” 。

6. 身份验证屏幕返回后，按身份验证设置旁边的 编辑。

7. 在 允许的外部重定向 URL 框中，输入 zumoquickstart://easyauth.callback。

8. 按“保存”。

步骤 10 要求在访问后端之前对所有用户进行身份验证。 可以通过向后端添加代码来提供精细控件。

你知道吗？ 还可以允许Microsoft Entra ID、Facebook、Google、Twitter 或任何 OpenID Connect 兼容提供程序中的组织帐户的用户。 按照 Azure 应用服务文档中的说明进行作。

测试正在请求身份验证

• 使用 cordova run android 运行应用
• 验证应用启动时是否引发了状态代码为 401（未授权）的未经处理的异常。

将身份验证添加到应用

若要通过内置提供程序添加身份验证，必须：

• 将身份验证提供程序添加到已知良好源的列表。
• 在访问数据之前调用身份验证提供程序。

更新内容安全策略

每个 Apache Cordova 应用都通过 Content-Security-Policy 标头声明其已知的良好源。 每个受支持的提供程序都有一个需要添加的 OAuth 主机：

编辑 www/index.html;为 Microsoft Entra ID 添加 OAuth 主机，如下所示：

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

内容是多行可读性。 将所有代码放在同一行上。

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

已将 ZUMOAPPNAME 替换为应用的名称。

调用身份验证提供程序

编辑 www/js/index.js。 将 setup() 方法替换为以下代码：

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

测试应用

运行以下命令：

cordova run android

初始启动完成后，系统会提示你使用Microsoft凭据登录。 完成后，可以从列表中添加和删除项。

删除资源

现在已完成快速入门教程，可以使用 az group delete -n zumo-quickstart删除资源。 还可以删除用于通过门户进行身份验证的全局应用注册。

后续步骤

查看“操作方法”部分：

• 服务器（Node.js）
• 服务器 （ASP.NET Framework）
• Apache Cordova 客户端

也可以使用同一服务为另一个平台执行快速入门：

• Windows （UWP）
• Windows （WPF）
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS