分享方式：

教學課程：準備外部租用戶，以便在 React SPA 中驗證使用者

  • 文章

本教學課程系列示範如何建置 React 單頁應用程式 (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 之間建立信任關係。 註冊應用程式時，外部 ID 會產生稱為「應用程式 (用戶端) 識別碼」的唯一識別碼，這個值可在建立驗證要求時用來識別您的應用程式。

下列步驟顯示如何在 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. 至少以外部 ID 使用者流程管理員的身分登入 Microsoft Entra 系統管理中心。

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

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

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

  5. 在 [建立] 頁面上：

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

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

      注意

      其他識別提供者只會在您設定與其的同盟之後，才會在這裡列出。 例如，若設定與 Google 或 Facebook 的同盟，則可在此處選取這些其他識別提供者。

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

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

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

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

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

將應用程式與您的使用者流程建立關聯

若要讓客戶使用者在使用您的應用程式時看到註冊或登入體驗，您必須將您的應用程式與使用者流程關聯起來。 雖然許多應用程式可以與您的使用者流程產生關聯，但單一應用程式只能與一個使用者流程產生關聯。

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

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

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

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

  5. 選取新增應用程式。

  6. 從清單中選取應用程式 (例如 ciam-client-app)，或使用搜尋方塊來尋找應用程式並選取。

  7. 選擇選取。

將應用程式與使用者流程關聯後，您即可從 Microsoft Entra 系統管理中心使用您的應用程式模擬使用者的註冊或登入體驗，以測試您的使用者流程。 若要這麼做，請使用測試註冊和登入使用者流程中的步驟。

後續步驟

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