在範例 vanilla JavaScript 單頁應用程式中登入使用者

  • 文章

本操作指南使用範例 vanilla JavaScript 單頁應用程式 (SPA) 示範如何將驗證新增至 SPA。 SPA 可讓使用者使用客戶租使用者自己的Microsoft Entra識別碼來登入和登出。 此範例會使用 適用于 JavaScript 的 Microsoft 驗證程式庫 (MSAL.js) 來處理驗證。

必要條件

  • 雖然可以使用任何支援 vanilla JS 應用程式的 IDE，但建議針對本指南使用Visual Studio Code。 您可以從 [ 下載 ] 頁面下載。
  • Node.js.
  • 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. 應用程式 [概 觀 ] 窗格會在成功註冊時顯示。 記錄 應用程式 (用戶端) 識別碼，以用於應用程式原始程式碼。

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

  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. 在 [ 選取許可權] 區段下，搜尋並選取 openid 和 offline_access 許可權。

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

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

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

建立使用者流程

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

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

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

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

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

  5. 在 [ 建立] 頁面上：

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

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

      注意

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

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

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

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

        注意

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

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

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

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

建立 SPA 與使用者流程的關聯

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

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

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

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

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

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

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

  7. 選擇 [選取]。

複製或下載範例 SPA

若要取得範例 SPA，您可以選擇下列其中一個選項：

  • 使用 Git 複製存放庫：

        git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • 下載範例

如果您選擇下載檔案 .zip ，請將範例應用程式檔案解壓縮至路徑總長度為 260 或更少字元的資料夾。

安裝專案相依性

  1. 在範例專案的根目錄中開啟終端機視窗，然後輸入下列程式碼片段以流覽至專案資料夾：

        cd 1-Authentication\0-sign-in-vanillajs\App

  2. 安裝專案相依性：

        npm install

設定範例 SPA

  1. 開啟 authConfig.js。
  2. 尋找 Enter_the_Tenant_Name_Here 並將它取代為您的租使用者名稱。
  3. 在 [授權單位] 中，尋找 Enter_the_Tenant_Subdomain_Here 並將它取代為租使用者的子域。 例如，如果您的租使用者主要網域是 caseyjensen@onmicrosoft.com ，您應該輸入的值是 casyjensen。
  4. 儲存檔案。

執行您的專案並登入

  1. 開啟新的終端機，然後執行下列命令來啟動您的快速 Web 服務器。

    npm start

  2. 開啟 web 瀏覽器並巡覽至 http://localhost:3000/。

  3. 使用向客戶租使用者註冊的帳戶登入。

  4. 登入顯示名稱之後，會顯示在 [ 登出 ] 按鈕旁，如下列螢幕擷取畫面所示。

  5. SPA 現在會顯示一個按鈕，指出 [要求設定檔資訊]。 選取它以顯示設定檔資料。

    登入 vanilla JS SPA 的螢幕擷取畫面。

登出應用程式

  1. 若要登出應用程式，請選取導覽列中的 [ 登出 ]。
  2. 視窗隨即出現，詢問要登出的帳戶。
  3. 成功登出時，會出現最後一個視窗，建議您關閉所有瀏覽器視窗。

下一步

啟用自助式密碼重設