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

项目
05/05/2021

注意

此产品已停用。有关使用 .NET 8 或更高版本的项目的替换，请参阅 Community Toolkit Datasync 库。

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

配置后端以进行身份验证

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

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

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

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

创建应用注册

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

重要

客户端机密值（密码）是重要的安全凭据。不要与任何人共享密码，也不会在客户端应用程序中分发密码。

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

在 Azure 门户中，选择 所有资源，然后选择应用服务。
选择设置>身份验证。
按 添加标识提供者。
选择 Microsoft 作为标识提供者。
- 对于 应用注册类型，请选择 提供现有应用注册的详细信息。
- 将之前复制的值粘贴到 应用程序（客户端）ID 和 客户端机密 框中。
- 对于 颁发者 URL，请输入 https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0。此 URL 是Microsoft登录名的“magic 租户 URL”。
- 对于 限制访问，请选择 要求身份验证。
- 对于 未经身份验证的请求，请选择 HTTP 401 未授权。
按添加。
身份验证屏幕返回后，按身份验证设置旁边的编辑。
在 允许的外部重定向 URL 框中，输入 zumoquickstart://easyauth.callback。
按保存。

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

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

测试正在请求身份验证

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

将身份验证添加到应用

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

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

更新内容安全策略

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

供应商	SDK 提供程序名称	OAuth 主机
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
谷歌	谷歌	`https://accounts.google.com`
唽	唽	`https://api.twitter.com`

编辑 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凭据登录。完成后，可以从列表中添加和删除项。

提示

如果模拟器未自动启动，请打开 Android Studio，然后选择配置>AVD 管理器。这将允许你手动启动设备。如果运行 adb devices -l，应会看到所选的模拟设备。

删除资源

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

后续步骤

查看“操作方法”部分：

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

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

通过