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

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

設定後端以進行驗證

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

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

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

您需要布建服務時所提供的 Azure Mobile Apps 服務的後端 URL。

建立應用程式註冊

1. 登入 Azure 入口網站。
2. [新增註冊]選取 [Microsoft [項目標識符][應用程式註冊]。
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 Service 驗證和授權

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

2. 選擇[設定]>[驗證]。

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 Connect 相容提供者中，允許具有組織帳戶的使用者。 請遵循 Azure App Service 檔中的指示，。

測試要求驗證

• 使用 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