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

2019-06-25

摘要

在本教程中，将使用支持的标识提供者向 Apache Cordova 上的 todolist 快速入门项目添加身份验证。本教程基于移动应用入门教程，必须先完成本教程。

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

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

请根据提供商的具体说明配置您的首选身份提供商。
对要在应用中支持的每个提供商重复上述步骤。

观看显示类似步骤的视频

限制对经过身份验证的用户的权限

默认情况下，移动应用后端中的 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 Emulator 中运行应用程序。
验证应用启动后是否显示意外连接失败。

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

将身份验证添加到应用

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

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

提供者	SDK 提供程序名称	OAuth 主机
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
谷歌	谷歌	https://accounts.google.com
Microsoft	Microsoft 账户	https://login.live.com
推特	推特	https://api.twitter.com

内容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'">

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

某些身份验证提供程序在合适的移动设备上使用时不需要内容Security-Policy更改。例如，在 Android 设备上使用 Google 身份验证时，不需要进行任何 Content-Security-Policy 内容的更改。

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 的现有代码。

在您刚刚添加的代码中，将 SDK_Provider_Name 替换为您登录提供程序的名称。例如，对于 Azure Active Directory，请使用 client.login('aad')。
运行你的项目。项目完成初始化后，应用程序会显示所选身份验证提供程序的 OAuth 登录页。

后续步骤

详细了解如何使用 Azure 应用服务进行身份验证。
通过向 Apache Cordova 应用添加推送通知，继续学习本教程。

了解如何使用 SDK。

通过

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

摘要

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

限制对经过身份验证的用户的权限

将身份验证添加到应用

后续步骤

其他资源