新增驗證至您的 Apache Cordova 應用程式

發行項
06/25/2019

總結

在本教學課程中，您可以使用支援的身分識別提供者，將驗證加入 Apache Cordova 上的 TodoList 快速入門專案。本教學課程以開始使用 Mobile Apps 為基礎，您必須先完成該教學課程。

註冊應用程式進行驗證，並設定應用程式服務

首先，您必須在身分識別提供者網站中註冊您的應用程式，然後在 Mobile Apps 後端中設定提供者產生的認證。

依照提供者特定的指示設定您偏好的身分識別提供者：
針對您要在應用程式中支援的每個提供者重複上述步驟。

觀看示範類似步驟的影片

限制只有通過驗證的使用者具有權限

根據預設，可以匿名方式叫用 Mobile Apps 後端中的 API。接下來，您必須限制只有經過驗證的用戶端才有存取權。

Node.js 後端 (透過 Azure 入口網站)：

在您的 Mobile Apps 設定中，按一下 [ 簡單資料表] ，然後選取您的資料表。按一下 [變更權限]，選取所有權限的 [僅驗證存取]，然後按一下 [儲存]。
.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 中：

開啟您完成開始使用 Mobile Apps 教學課程時所建立的專案。
在 Google Android 模擬器中執行應用程式。
應用程式啟動後，確認有顯示「非預期的連接失敗」。

接下來，將應用程式更新為在使用者從行動應用程式後端要求資源之前，先驗證使用者。

將驗證新增至應用程式

在 Visual Studio 中開啟您的專案，然後開啟 www/index.html 檔案進行編輯。

找出 head 區段中的 Content-Security-Policy 中繼標籤。將 OAuth 主機新增至允許的來源清單。

提供者	SDK 提供者名稱	OAuth 主機
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

content-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 文件。

在適當的行動裝置上使用時，某些驗證提供者不需要變更 Content-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 App Service 驗證相關資訊。
將推播通知新增至 Apache Cordova 應用程式，以繼續本教學課程。

了解如何使用 SDK。

共用方式為

新增驗證至您的 Apache Cordova 應用程式

總結

註冊應用程式進行驗證，並設定應用程式服務

限制只有通過驗證的使用者具有權限

將驗證新增至應用程式

後續步驟

其他資源