共用方式為


教學課程:準備您的客戶租使用者以驗證 Vanilla JavaScript 單頁應用程式

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

在本教學課程中;

  • 在Microsoft Entra系統管理中心註冊 SPA,並記錄其識別碼
  • 定義平臺和 URL
  • 將許可權授與 SPA 以存取 Microsoft 圖形 API
  • 在Microsoft Entra系統管理中心建立登入和登出使用者流程
  • 將您的 SPA 與使用者流程產生關聯

必要條件

  • Azure 訂用帳戶。 如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶

  • 此 Azure 帳戶必須具有管理應用程式的許可權。 下列任一Microsoft Entra角色都包含必要的許可權:

    • 應用程式管理員
    • 應用程式開發人員
    • 雲端應用程式系統管理員
  • 客戶租使用者的Microsoft Entra識別碼。 如果您尚未 建立,請立即建立一個。 如果您有現有的客戶租使用者,您可以使用。

註冊 SPA 和記錄識別碼

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

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

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

  2. 如果您有多個租使用者的存取權,請使用頂端功能表中的 [目錄 + 訂 用帳戶] 篩選 來切換至您的客戶租使用者。

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

  4. 選取 [+ 新增註冊]。

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

    1. 輸入對應用程式使用者顯示的有意義應用程式 名稱 ,例如 ciam-client-app
    2. 在 [支援的帳戶類型] 區段下,選取 [僅限此組織目錄中的帳戶]。
  6. 選取 [註冊]。

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

新增平臺重新導向 URL

若要將您的應用程式類型指定為您的應用程式註冊,請遵循下列步驟:

  1. 在 [管理] 底下,選取 [驗證]。
  2. 在 [ 平臺組態 ] 頁面上,選取 [ 新增平臺],然後選取 [SPA ] 選項。
  3. 針對 [ 重新導向 URI ] 輸入 http://localhost:3000/redirect
  4. 選取 [ 設定 ] 以儲存變更。
  5. 回到 [平臺組態 ] 頁面,在出現的新 單頁應用程式中 ,選取 [ 新增 URI],然後輸入 http://localhost:3000/
  6. 選取 [儲存 ] 以儲存變更,並確定已列出這兩個 URI。

授與 API 權限

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

  2. 在 [管理] 之下選取 [API 權限]。

  3. 在 [已設定的權限] 底下,選取 [新增權限]。

  4. 選取 [Microsoft API] 索引標籤

  5. [常用 Microsoft API] 區 段底下,選取 [Microsoft Graph]。

  6. 選取 [委派的許可權 ] 選項。

  7. [選取許可權 ] 區段下,搜尋並選取 openidoffline_access 許可權。

  8. 選取 [新增權限] 按鈕。

  9. 此時,您已正確指派許可權。 不過,由於租使用者是客戶的租使用者,因此取用者使用者本身無法同意這些許可權。 身為系統管理員的您必須代表租使用者中的所有使用者同意這些許可權:

    1. 選取[為您的租使用者名稱 > 授與 < 管理員同意],然後選取 []。
    2. 選取 [重新整理],然後確認 [為租使用者名稱 > 授 <與] 出現在這兩個範圍的 [狀態] 底下。

建立使用者流程

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

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

  2. 如果您有多個租使用者的存取權,請使用頂端功能表中的 [目錄 + 訂 用帳戶] 篩選 來切換至您的客戶租使用者。

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

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

  5. 在 [ 建立] 頁面上:

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

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

      注意

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

    3. [Email帳戶] 底下,您可以選取兩個選項之一。 在本教學課程中,請選取[Email密碼]。

      • 使用密碼Email:可讓新使用者使用電子郵件地址作為登入名稱和密碼作為其第一個因素認證來註冊和登入。

      • Email一次性密碼:可讓新使用者使用電子郵件地址作為登入名稱和電子郵件一次性密碼作為其第一個因素認證來註冊和登入。

        注意

        Email一次性密碼必須在租使用者層級啟用 (所有識別提供者>Email單次密碼) ,才能在使用者流程層級使用此選項。

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

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

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

將 SPA 與使用者流程產生關聯

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

  1. 在提要欄位功能表上,選取 [ 身分識別]。

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

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

  4. [使用] 底下,選取 [ 應用程式]。

  5. 選取 [新增應用程式] 。

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

  7. 選擇 [選取]。

下一步