共用方式為

將驗證新增至 Apache Cordova 應用程式

總結

在本教學課程中，您會使用支持的識別提供者，將驗證新增至 Apache Cordova 上的 todolist 快速入門專案。 本教學課程是以 開始使用Mobile Apps 教學課程為基礎，您必須先完成此教學課程。

註冊您的應用程式以進行驗證並設定App Service

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

  1. 按照提供商的特定指示來設定您的首選身分驗證提供者：

  2. 針對您想要在應用程式中支援的每個提供者重複上述步驟。

觀看顯示類似步驟的影片

限制已驗證用戶的許可權

根據預設，Mobile Apps 後端中的 API 可以匿名叫用。 接下來，您必須限制僅對已驗證用戶端的存取。

  • Node.js 後端 （透過 Azure 入口網站）：

    在Mobile Apps 設定中，按兩下 [[簡易數據表]，然後選取您的數據表。 按一下 [變更許可權]，針對所有許可權選取 [僅限已驗證存取 ]，然後按一下 [儲存]。

  • .NET 後端 （C#）：

    在伺服器專案中，流覽至 Controllers>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 模擬器中執行您的應用程式。
  • 確認應用程式啟動時會顯示非預期的連線失敗。

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

將驗證新增至應用程式

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

  2. 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'">

    將 https://login.microsoftonline.com 替換為上表的 OAuth 主機。 如需 content-security-policy 中繼標記的詳細資訊，請參閱 Content-Security-Policy 檔。

    某些驗證提供者在適當的行動裝置上使用時，不需要內容Security-Policy 變更。 例如，在 Android 裝置上使用 Google 驗證時，Content-Security-Policy 不需要變更。

  3. 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 的現有程式代碼。

    login（） 方法會開始向提供者進行驗證。 login（） 方法是會傳回 JavaScript Promise 的異步函式。 其餘的初始化會放在 promise 回應內，以便在 login（） 方法完成之前不會執行。

  4. 在您剛才新增的程式代碼中，將 SDK_Provider_Name 替換為您的登入提供者名稱。 例如，針對 Azure Active Directory，請使用 client.login('aad')。

  5. 執行您的專案。 當專案完成初始化時，您的應用程式會顯示所選驗證提供者的 OAuth 登入頁面。

後續步驟

  • 進一步瞭解有關使用 Azure App Service 進行驗證的資訊。
  • 若要繼續進行教學課程，請將 推播通知 新增至您的 Apache Cordova 應用程式。

瞭解如何使用 SDK。

  • Last updated on