在範例 Node.js Web 應用程式中登入使用者

本操作指南會使用範例 Node.js Web 應用程式來示範如何將驗證新增至 Web 應用程式。 範例應用程式可讓使用者登入和登出。範例 Web 應用程式會使用 適用于 Node 的 Microsoft Authentication Library (MSAL Node) ，讓 Node 處理驗證。

在本文中，您會執行下列工作：

• 在Microsoft Entra系統管理中心註冊 Web 應用程式。

• 在系統管理中心Microsoft Entra建立登入和登出使用者流程。

• 將 Web 應用程式與使用者流程產生關聯。

• 使用您自己的Microsoft Entra識別碼來更新範例 Node.js Web 應用程式，以取得客戶租使用者詳細資料。

• 執行並測試範例 Web 應用程式。

必要條件

• Node.js.

• Visual Studio Code 或其他程式碼編輯器。

• Microsoft Entra租使用者的識別碼。 如果您還沒有 訂用帳戶，請註冊免費試用。

註冊 Web 應用程式

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

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

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

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

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

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

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

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

6. 選取 [註冊]。

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

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

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

新增應用程式用戶端密碼

為已註冊的應用程式建立用戶端密碼。 應用程式會在要求權杖時使用用戶端密碼來證明其身分識別。

1. 從[應用程式註冊] 頁面中，選取您建立的應用程式 (，例如ciam-client-app) ，以開啟其 [概觀] 頁面。
2. 在 [管理] 下，選取 [憑證 & 密碼]。
3. 選取 [新增用戶端密碼]。
4. 在 [ 描述 ] 方塊中，輸入用戶端密碼 (的描述，例如 ciam 應用程式用戶端密碼) 。
5. 在 [ 到期日] 底下，選取秘密的有效持續時間， (每個組織的安全性規則) ，然後選取 [ 新增]。
6. 記錄密碼的值。 您將會在稍後的步驟中使用此值進行設定。

注意

當您離開 [ 憑證和秘密 ] 頁面之後，密碼值將不會再次顯示，而且無法透過任何方式擷取，因此請確定您記錄它。
若要增強安全性，請考慮使用憑證，而不是用戶端密碼。

授與 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. 選取 [建立]。 新的使用者流程會出現在 [使用者流程] 清單中。 如有需要，請重新整理頁面。

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

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

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

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

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

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

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

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

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

7. 選擇 [選取]。

複製或下載範例 Web 應用程式

若要取得 Web 應用程式範例程式碼，您可以執行下列其中一項工作：

• 執行下列命令，從 GitHub下載 .zip 檔案或複製範例 Web 應用程式：

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

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

安裝專案相依性

1. 開啟主控台視窗，然後變更為包含範例應用程式 Node.js 目錄：

       cd 1-Authentication\5-sign-in-express\App
   

2. 執行下列命令以安裝應用程式相依性：

       npm install && npm update
   

設定範例 Web 應用程式

1. 在您的程式碼編輯器中，開啟 App\authConfig.js 檔案。

2. 尋找預留位置：

   1. Enter_the_Application_Id_Here 並將它取代為您稍早註冊之應用程式的應用程式 (用戶端) 識別碼。

   2. Enter_the_Tenant_Subdomain_Here 並將它取代為目錄 (租使用者) 子域。 例如，如果您的租使用者主域是 contoso.onmicrosoft.com ，請使用 contoso 。 如果您沒有租使用者名稱，請瞭解如何 閱讀您的租使用者詳細資料。

   3. Enter_the_Client_Secret_Here 並將它取代為您稍早複製的應用程式秘密值。

執行及測試範例 Web 應用程式

您現在可以測試範例 Node.js Web 應用程式。 您必須啟動 Node.js 伺服器，並透過瀏覽器在 http://localhost:3000 存取它。

1. 在終端中，執行下列命令：

       npm start 
   

2. 開啟瀏覽器，然後移至 http://localhost:3000. 您應該會看到類似下列螢幕擷取畫面的頁面：

   

3. 頁面完成載入之後，選取 [ 登入 ] 連結。 系統會提示您登入。

4. 在登入頁面上，輸入您的Email位址，選取 [下一步]，輸入您的密碼，然後選取 [登入]。 如果您沒有帳戶，請選取 [沒有帳戶？建立一個 連結，以啟動註冊流程。

5. 如果您選擇註冊選項，請在填寫電子郵件、單次密碼、新密碼和更多帳戶詳細資料之後，完成整個註冊流程。 您會看到類似下列螢幕擷取畫面的頁面。 如果您選擇登入選項，您會看到類似的頁面。

   

6. 選取[登出] 將使用者登出 Web 應用程式，或選取 [檢視識別碼權杖宣告] 來檢視Microsoft Entra傳回的識別碼權杖宣告。

運作方式

當使用者選取[登入] 連結時，應用程式會起始驗證要求，並將使用者重新導向至客戶的Microsoft Entra識別碼。 在出現的登入或註冊頁面上，使用者成功登入或建立帳戶後，Microsoft Entra客戶識別碼將識別碼權杖傳回給應用程式。 應用程式會驗證識別碼權杖、讀取宣告，並將安全頁面傳回給使用者。

當使用者選取 [登出] 連結時，應用程式會清除其會話，將使用者重新導向至客戶登出端點的Microsoft Entra識別碼，以通知使用者已登出。

如果您想要建置類似您所執行範例的應用程式，請完成 在您自己的 Node.js Web 應用程式中登入使用者 一文中的步驟。

下一步

您可能想要：

• 啟用密碼重設

• 自訂預設商標

• 使用 Google 設定登入

• 在您的 Node.js Web 應用程式中登入使用者