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

發行項
05/05/2021

注意

此產品已淘汰。如需使用 .NET 8 或更新版本的專案取代專案，請參閱 Community Toolkit Datasync 連結庫。

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

設定後端以進行驗證

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

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

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

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

建立應用程式註冊

登入 Azure 入口網站。
[新增註冊]選取 [Microsoft [項目標識符][應用程式註冊]。
在 [註冊應用程式] 頁面中，於 [名稱] 字段中輸入 zumoquickstart。
在 [支援的帳戶類型下，選取任何組織目錄中的 [帳戶] （任何 Microsoft Entra 目錄 - 多租使用者）和個人Microsoft帳戶（例如 Skype、Xbox）。
在 [[重新導向 URI] 中，選取 [Web]，然後輸入 <backend-url>/.auth/login/aad/callback。例如，如果您的後端 URL https://zumo-abcd1234.azurewebsites.net，您會輸入 https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback。
按下窗體底部的 [註冊] 按鈕。
複製應用程式（用戶端）識別碼。
從左窗格中，選取 [憑證 & 秘密]，>[新增客戶端密碼]。
輸入適當的描述、選取有效期間，然後選取 [[新增]。
複製 [憑證 & 秘密] 頁面上的秘密 頁面。值不會再次顯示。
選擇 [驗證]。
在隱含授與和混合式流程下，啟用標識符令牌。
按 頁面頂端的 [儲存]。

重要

客戶端密碼值（password）是重要的安全性認證。請勿與任何人共用密碼，或在用戶端應用程式內散發密碼。

設定 Azure App Service 驗證和授權

在 azure 入口網站的 []中，選取 [[所有資源]，然後選取 [App Service]。
選擇[設定]>[驗證]。
按 [新增識別提供者]。
選取 [Microsoft 身分識別提供者]。
- 針對 應用程式註冊類型，請選取 [提供現有應用程式註冊的詳細資料。
- 將您稍早複製的值貼到 [應用程式][用戶端] 識別符，[客戶端密碼] 方塊中。
- 針對 簽發者 URL，輸入 https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0。此 URL 是Microsoft登入的「魔術租使用者 URL」。
- 針對 [[限制存取]，請選取 [需要驗證]。
- 針對 未經驗證的要求，選取 [HTTP 401 未經授權]。
按 [新增]。
驗證畫面傳回后，請按 [驗證設定] 旁的 [編輯] 。
在 [[允許的外部重新導向 URL] 方塊中，輸入 zumoquickstart://easyauth.callback。
按 [儲存]。

步驟 10 要求所有使用者在存取後端之前經過驗證。您可以將程式代碼新增至後端，以提供更細緻的控件。

你知道嗎？ 您也可以在 Microsoft entra ID、Facebook、Google、Twitter 或任何 OpenID Connect 相容提供者中，允許具有組織帳戶的使用者。請遵循 Azure App Service 檔中的指示，。

測試要求驗證

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

將驗證新增至應用程式

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

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

更新內容安全策略

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

供應商	SDK 提供者名稱	OAuth 主機
Microsoft項目標識碼	Microsoft項目標識碼	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
谷歌	谷歌	`https://accounts.google.com`
唽	唽	`https://api.twitter.com`

編輯 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認證登入。完成後，您可以從清單中新增和刪除專案。

提示

如果模擬器未自動啟動，請開啟 Android Studio，然後選取 [設定>AVD Manager。這可讓您手動啟動裝置。如果您執行 adb devices -l，您應該會看到選取的模擬裝置。

刪除資源

現在您已完成快速入門教學課程，您可以使用 az group delete -n zumo-quickstart來刪除資源。您也可以透過入口網站刪除用於驗證的全域應用程式註冊。

後續步驟

看看 HOW TO 區段：

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

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

共用方式為