教學課程：準備外部租使用者以在 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 之間的信任關係。 當您註冊應用程式時，外部標識符會產生稱為應用程式的唯一 標識碼（用戶端）標識碼，這個值可用來在建立驗證要求時識別您的應用程式。
下列步驟示範如何在 Microsoft Entra 系統管理中心註冊您的應用程式：
以至少應用程式開發人員身分登入 Microsoft Entra 系統管理中心。
如果您有多個租使用者的存取權，請使用頂端功能表中的 [設定] 圖示
，從 [目錄 + 訂用帳戶] 功能表切換至外部租使用者。流覽至 [身分>識別應用程式> 應用程式註冊]。
選取 + 新增註冊。
在出現的 [ 註冊應用程式 ] 頁面中;
- 輸入向應用程式用戶顯示的有意義應用程式名稱，例如 ciam-client-app。
- 在 [支援的帳戶類型] 底下，選取 [僅在此組織目錄中的帳戶]。
選取註冊。
應用程式 [ 概觀 ] 窗格會在成功註冊時顯示。 記錄應用程式 （用戶端） 識別碼，以用於您的應用程式原始程式碼。
新增平臺重新導向 URL
若要將您的應用程式類型指定至您的應用程式註冊，請遵循下列步驟：
- 在 [管理] 底下，選取 [驗證]。
- 在 [ 平台組態 ] 頁面上，選取 [新增平臺]，然後選取 [單頁應用程式]。
- 針對 [ 重新導向 URI ] 輸入
http://localhost:3000。 - 選取 [ 設定 ] 以儲存變更。
授與登入許可權
從 [應用程式註冊] 頁面中，選取您建立的應用程式（例如 ciam-client-app），以開啟其 [概觀] 頁面。
在 [管理] 之下選取 [API 權限]。
在 [已設定的權限] 底下，選取 [新增權限]。
選取 [Microsoft API] 索引 標籤。
在 [常用 Microsoft API] 區段底下，選取 [Microsoft Graph]。
選取 [委派的許可權] 選項。
在 [選取許可權] 區段下，搜尋並選取 openid 和 offline_access 許可權。
選取 [ 新增許可權] 按鈕。
此時，您已正確指派許可權。 不過，由於租用戶是客戶的租使用者，因此取用者使用者本身無法同意這些許可權。 身為系統管理員必須代表租使用者中的所有使用者同意這些許可權：
- 選取 [授與租用戶名稱>的<管理員同意]，然後選取 [是]。
- 選取 [重新整理]，然後確認 [為租用戶名稱>授與] <出現在這兩個範圍的 [狀態] 底下。
建立登入和註冊用戶流程
請遵循下列步驟來建立客戶可用來登入或註冊應用程式的使用者流程。
至少以外部標識碼使用者流程 管理員 istrator 身分登入 Microsoft Entra 系統管理中心。
如果您有多個租使用者的存取權，請使用頂端功能表中的 [設定] 圖示
，從 [目錄 + 訂用帳戶] 功能表切換至外部租使用者。流覽至 [身分>識別外部身分>識別使用者流程]。
選取 [+ 新增使用者流程]。
在 [ 建立] 頁面上：
輸入使用者流程的名稱，例如 SignInSignUpSample。
在 [ 識別提供者 ] 清單中，選取 [ 電子郵件帳戶]。 此識別提供者可讓使用者使用其電子郵件位址登入或註冊。
在 [電子郵件帳戶] 底下，您可以選取兩個選項之一。 在本教學課程中，選取 [ 使用密碼傳送電子郵件]。
- 具有密碼的電子郵件：可讓新使用者使用電子郵件地址作為登入名稱和密碼作為其第一個因素認證來註冊和登入。
- 電子郵件一次性密碼：可讓新使用者使用電子郵件地址作為登入名稱和電子郵件一次性密碼作為其第一個因素認證來註冊和登入。 必須在租用戶層級啟用電子郵件一次性密碼（所有識別提供者>電子郵件一次性密碼），此選項才能在使用者流程層級取得。
在 [ 用戶屬性] 下，選擇您想要在註冊時從使用者收集的屬性。 選取 [顯示更多]，您可以選擇國家/地區、顯示名稱和郵遞區編碼的屬性和宣告。 選取 [確定]。 （只有在使用者第一次註冊時，才會提示使用者輸入屬性。
選取 建立。 新的使用者流程會出現在 [使用者流程 ] 清單中。 如有需要，請重新整理頁面。
若要啟用自助式密碼重設，請使用啟用自助式密碼重設一文中的步驟。
將應用程式與使用者流程產生關聯
雖然許多應用程式可以與您的使用者流程相關聯，但單一應用程式只能與一個使用者流程相關聯。 使用者流程允許針對特定應用程式設定用戶體驗。 例如，您可以設定使用者流程，要求使用者登入或註冊電子郵件位址。
在提要欄功能表上，選取 [ 身分識別]。
選取 [外部身分識別]，然後選取 [使用者流程]。
在 [ 使用者流程 ] 頁面中，選取您稍早建立的使用者 流程名稱 ，例如 SignInSignUpSample。
在 [使用] 底下，選取 [應用程式]。
選取新增應用程式。
從清單中選取應用程式，例如 ciam-client-app ，或使用搜尋方塊來尋找應用程式，然後加以選取。
選擇選取。