将身份验证添加到 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”并键入 <backend-url>/.auth/login/aad/callback。 例如，如果后端 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 登录的“神奇租户 URL”。
   • 对于“限制访问”，请选择“需要身份验证”。
   • 对于 未经身份验证的请求，请选择“ HTTP 401 未授权”。

5. 按“添加” 。

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

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

8. 按保存。

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

你知道吗？ 还可以允许用户在 Microsoft Entra ID、Facebook、Google、Twitter 或任何 OpenID 连接兼容提供程序中使用组织帐户。 按照 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