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

在本教學課程中，您會使用 Microsoft Entra ID 將 Microsoft 驗證新增至快速入門專案。 完成本教學課程之前，請確定您已 建立專案 並 啟用離線同步處理。

設定後端以進行驗證

若要設定後端以進行驗證，您必須：

• 建立應用程式註冊。
• 設定 Azure App 服務 驗證和授權。
• 將您的應用程式新增至允許的外部重新導向URL。

在本教學課程中，我們將設定您的應用程式以使用 Microsoft 驗證。 您的 Azure 訂用帳戶中已自動設定 Microsoft Entra 租使用者。 您可以使用 Microsoft Entra ID 來設定 Microsoft 驗證。

您需要布建服務時所提供的 Azure Mobile Apps 服務的後端 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. 複製應用程式 (用戶端) 識別碼。
8. 從左窗格中，選取 [憑證與秘密>] [新增客戶端密碼]。
9. 輸入適當的描述，選取有效期間，然後選取 [ 新增]。
10. 複製 [憑證與秘密] 頁面上的秘密。 值不會再次顯示。
11. 選取驗證。
12. 在 [隱含授與和混合式流程] 底下，啟用標識符令牌。
13. 按頁面頂端的 [ 儲存 ]。

設定 Azure App 服務 驗證和授權

1. 在 Azure 入口網站 中，選取 [所有資源]，然後選取您的 App Service。

2. 選取 [設定> Authentication]。

3. 按 [新增識別提供者]。

4. 選取 [Microsoft ] 作為識別提供者。

   • 針對 [ 應用程式註冊類型]，選取 [提供現有應用程式註冊的詳細數據]。
   • 將您稍早複製的值貼到 [應用程式] [用戶端] 識別碼 和 [客戶端密碼 ] 方塊中。
   • 針對 [ 簽發者 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 App 服務 檔中的指示。

測試要求驗證

• 使用執行應用程式 cordova run android
• 確認應用程式啟動時，會引發狀態代碼為 401（未經授權）的未處理例外狀況。

將驗證新增至應用程式

若要透過內建提供者新增驗證，您必須：

• 將驗證提供者新增至已知良好來源的清單。
• 存取數據之前，請先呼叫驗證提供者。

更新內容安全策略

每個 Apache Cordova 應用程式都會透過 Content-Security-Policy 標頭宣告其已知的良好來源。 每個支援的提供者都有需要新增的 OAuth 主機：

編輯 www/index.html;新增 Microsoft Entra 標識符的 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。 您也可以透過入口網站刪除用於驗證的全域應用程式註冊。

下一步

看看 HOW TO 區段：

• 伺服器 （Node.js）
• 伺服器 （ASP.NET Framework）
• Apache Cordova 用戶端

您也可以使用相同的服務為另一個平台執行快速入門：

• Windows （UWP）
• Windows （WPF）
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS