共用方式為

教學課程：準備外部租用戶向 Vanilla JavaScript SPA 進行驗證

  • 發行項

本教學課程系列示範如何建置 Vanilla JavaScript 單頁應用程式 (SPA)，並使用 Microsoft Entra 系統管理中心準備進行驗證。 您將使用 適用於 JavaScript 的 Microsoft 驗證程式庫，向外部租用戶驗證您的應用程式。 最後，您將執行應用程式並測試登入和登出體驗。

在本教學課程中;

  • 在 Microsoft Entra 系統管理中心註冊 SPA，並記錄其識別碼
  • 定義平台和 URL
  • 將權限授與 SPA 以存取 Microsoft Graph API
  • 在 Microsoft Entra 系統管理中心建立登入和登出使用者流程
  • 將您的 SPA 與使用者流程相關聯

必要條件

  • 外部租用戶。 如果您沒有訂用帳戶，開始前請 建立試用租用戶 或 具有訂用帳戶的租用戶。
  • 此 Azure 帳戶必須具有管理應用程式的權限。 下列任何 Microsoft Entra 角色都包含必要的權限:
    • 應用程式系統管理員
    • 應用程式開發人員
    • 雲端應用程式系統管理員

註冊 SPA 並記錄識別碼

若要讓應用程式能夠使用 Microsoft Entra 登入使用者，Microsoft Entra 外部 ID 必須知道您建立的應用程式。 應用程式註冊會建立應用程式與 Microsoft Entra 之間的信任關係。 當您註冊應用程式時，外部識別碼會產生稱為 [應用程式 (用戶端) 識別碼] 的唯一識別碼，這個值可用來在建立驗證要求時識別您的應用程式。

下列步驟示範如何在 Microsoft Entra 系統管理中心註冊您的應用程式：

  1. 以至少 應用程式開發人員 的身分登入 Microsoft Entra 系統管理中心。

  2. 如果您有多個租用戶的存取權，請使用頂端功能表中的 [設定] 圖示 ，從 [目錄 + 訂用帳戶] 功能表切換至外部租用戶。

  3. 瀏覽至 [身分識別]>[應用程式]>[應用程式註冊]。

  4. 選取 + 新增註冊。

  5. 在 [註冊應用程式] 頁面中出現;

    1. 輸入會向用程式使用者顯示，而且有意義的應用程式 [名稱]，例如 ciam-client-app。
    2. 在 [支援的帳戶類型] 底下，選取 [僅在此組織目錄中的帳戶]。

  6. 選取註冊。

  7. 應用程式的 [概觀] 窗格會在註冊成功時顯示。 記錄 應用程式 (用戶端) 識別碼，以用於您的應用程式原始碼。

新增平台重新導向 URL

若要將您的應用程式類型指定至您的應用程式註冊，請遵循下列步驟：

  1. 在 [管理] 底下，選取 [驗證]。
  2. 在 [平台組態] 頁面上，選取 [新增平台]，然後選取 [單頁應用程式]。
  3. 針對 [重新導向 URI] 輸入 http://localhost:3000。
  4. 選取 [設定] 以儲存變更。

  1. 從 [應用程式註冊] 頁面中，選取您建立的應用程式 (例如 ciam-client-app)，以開啟其 [概觀] 頁面。

  2. 在「管理」下方選取 [API 權限]。 您的應用程式已從 設定的權限 清單中獲指派 User.Read 權限。 不過，由於租用戶是外部租用戶，因此取用的使用者本身無法同意此權限。 您身為系統管理員，必須代表租用戶中的所有使用者同意此權限：

    1. 選取 [授與系統管理員同意] (為 <您的租用戶名稱>)，然後選取 [確定]。
    2. 選取 [重新整理]，然後確認 選取授與 您的租用戶名稱> 的 < 出現在這兩個範圍的 [狀態] 下方。

建立使用者流程

請遵循下列步驟來建立可讓客戶用來登入或註冊應用程式的使用者流程。

  1. 以至少 外部識別碼使用者流程管理員 的身分登入 Microsoft Entra 系統管理中心。

  2. 如果您有多個租用戶的存取權，請使用頂端功能表中的 [設定] 圖示 ，從 [目錄 + 訂用帳戶] 功能表切換至外部租用戶。

  3. 瀏覽至 [身分識別]>[外部身分識別]>[使用者流程]。

  4. 選取 [+ 新增使用者流程]。

  5. 在 [建立] 頁面上：

    1. 輸入使用者流程的 [名稱]，例如 SignInSignUpSample。

    2. 在 [識別提供者] 清單中，選取 [電子郵件帳戶]。 此識別提供者可讓使用者使用其電子郵件位址登入或註冊。

      注意

      其他的識別提供者只有在您將其設定為同盟之後，才會在這裡列出。 例如，如果您設定與 Google 或 Facebook同盟，您將能夠在這裡選取這些額外的識別提供者。

    3. 在 [電子郵件帳戶] 下方，您可以選取兩個選項其中之一。 在本教學課程中，選取 [電子郵件與密碼]。

      • 具有密碼的電子郵件：允許新使用者使用電子郵件地址作為登入名稱，並使用密碼作為其第一個因素認證來註冊和登入。
      • 電子郵件一次性密碼：允許新使用者使用電子郵件地址作為登入名稱，並使用以電子郵件傳送一次性密碼作為其第一個因素認證來註冊和登入。 電子郵件一次性密碼必須在租用戶層級 (所有識別提供者>電子郵件一次性密碼) 啟用，才能在使用者流程層級取得此選項。

    4. 在 [使用者屬性] 下方，選擇您想要在使用者註冊時從其收集的屬性。 選取 [顯示更多]，您可以選擇 [國家/地區]、[顯示名稱] 和 [郵遞區號] 的屬性和宣告。 選取 [確定]。 (只有在使用者第一次註冊時，才會提示使用者輸入屬性。)

  6. 選取 建立。 新的使用者流程會出現在 [使用者流程] 清單中。 如有需要，請重新整理頁面。

若要啟用自助式密碼重設，請使用 啟用自助式密碼重設 一文中的步驟。

將 SPA 與使用者流程關聯

雖然您的使用者流程可以和多個應用程式關聯，但單一應用程式只能與一個使用者流程關聯。 使用者流程允許針對特定應用程式設定使用者體驗。 例如，您可以設定使用者流程，要求使用者使用電子郵件位址登入或註冊。

  1. 在側邊欄選單上，選取 [身分識別]。

  2. 選取 [外部身分識別]，然後選取 [使用者流程]。

  3. 在 [使用者流程] 頁面中，選取您稍早建立的 [使用者流程名稱]，例如，SignInSignUpSample。

  4. 在 [使用] 下方，選取 [應用程式]。

  5. 選取新增應用程式。

  6. 從清單中選取應用程式，例如 ciam-client-app，或使用搜尋方塊尋找應用程式，然後加以選取。

  7. 選擇選取。

後續步驟

第 2 部分：在外部租用戶中建立 VanillaJS SPA 專案以進行驗證