共用方式為

使用 Azure Active Directory B2C 在範例 Node.js Web 應用程式中設定身份驗證

這很重要

自 2025 年 5 月 1 日起，Azure AD B2C 將不再可供新客戶購買。 在我們的常見問題中深入瞭解。

此示例文章使用示例 Node.js 應用程式來演示如何將 Azure Active Directory B2C （Azure AD B2C） 身份驗證添加到 Node.js Web 應用程式。 範例應用程式使用戶能夠使用 Azure AD B2C 使用者流登錄、註銷、更新配置檔和重置密碼。 示例 Web 應用程式使用 適用於 Node 的 Microsoft 身份驗證庫 （MSAL） 來處理身份驗證和授權。

在本文中，您將執行以下任務：

  • 在 Azure 門戶中註冊 Web 應用程式。
  • 在 Azure 門戶中為應用創建組合的 登錄和註冊、 配置檔編輯和 密碼重置 使用者流。
  • 更新範例 Node 應用程式以使用你自己的 Azure AD B2C 應用程式和使用者流。
  • 測試範例應用程式。

先決條件

步驟 1：配置使用者流

當使用者嘗試登入應用程式時，應用程式會透過使用者流程，啟動對授權端點的驗證要求。 使用者流程會定義並控制使用者體驗。 當使用者完成使用者流程之後，Azure AD B2C 會產生權杖，然後將使用者重新導向回到您的應用程式。

如果您尚未這麼做，請建立使用者流程或自訂原則。 重複步驟，以建立下列三個不同的使用者流程：

  • 合併的登入和註冊使用者流程 (例如 susi)。 這個使用者流程也支援忘記密碼體驗。
  • 設定檔編輯使用者流程 (例如 edit_profile)。
  • 密碼重設使用者流程 (例如 reset_password)。

Azure AD B2C 會在使用者流程名稱前面加上 B2C_1_。 例如，susi 會成為 B2C_1_susi。

步驟 2：註冊 Web 應用程式

若要使用 Azure AD B2C 啟用應用程式登錄，請在 Azure AD B2C 目錄中註冊應用。 應用註冊在應用和 Azure AD B2C 之間建立信任關係。

在應用程式註冊期間，您將指定 Redirect URI。 重定向 URI 是 Azure AD B2C 在使用 Azure AD B2C 進行身份驗證後，Azure AD B2C 將使用者重定向到的終結點。 應用程式註冊過程會生成一個 應用程式ID，也稱為 用戶端ID，用於唯一標識您的應用程式。 註冊應用后，Azure AD B2C 會使用應用程式 ID 和重定向 URI 來創建身份驗證請求。

步驟 2.1：註冊應用程式

要註冊 Web 應用程式，請執行以下步驟：

  1. 登入 Azure 入口網站。

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

  3. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。

  4. 選取 [應用程式註冊]，然後選取 [[新增註冊]。

  5. 在 Name （名稱） 下，輸入應用程式的名稱 （例如， webapp1）。

  6. 在 支援的帳戶類型下，選取 任何身分提供者或組織目錄中的帳戶（用於驗證具有使用者流程的使用者）。

  7. 在 [重新導向 URI] 下，選取 [Web]，然後在 [URL] 方塊中輸入 http://localhost:3000/redirect。

  8. 在 Permissions （許可權） 下，選中 授予管理員同意 openid 和 offline_access 權限 的複選框。

  9. 選取 註冊。

  10. 選取 概觀。

  11. 當您設定 Web 應用程式時，請記錄 [應用程式 (用戶端) 識別碼]，以供稍後使用。

    用於錄製 Web 應用程式 I D 的 Web 應用程式概述頁面的螢幕截圖。

步驟 2.2：創建 Web 應用程式用戶端金鑰

為已註冊的 Web 應用程式創建用戶端金鑰。 Web 應用程式在請求令牌時使用用戶端密鑰來證明其身份。

  1. 在 [管理] 下，選取 [ 憑證與秘密]。
  2. 選取 [新用戶端密碼]。
  3. 在 [ 描述 ] 方塊中，輸入客戶端密碼的描述（例如 clientsecret1）。
  4. 在 [到期] 下，選取祕密的有效持續時間，然後選取 [新增]。
  5. 記錄秘密的 值。 您將在稍後的步驟中使用此值進行設定。

步驟 3：獲取範例 Web 應用程式

下載 zip 檔，或從 GitHub 克隆示例 Web 應用程式。

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

將範例檔解壓縮到資料夾中。 您將取得以下目錄結構的 Web 應用程式：

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

該 views 資料夾包含應用程式使用者介面的 Handlebars 檔案。

步驟 4：安裝依賴項

  1. 打開主控台視窗，然後切換到包含 Node.js 範例應用程式的目錄。 例如：

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp

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

    npm install && npm update

步驟 5：配置範例 Web 應用程式

在程式代碼編輯器中開啟 Web 應用程式，例如 Visual Studio Code。 在專案根資料夾下，打開 .env 檔。 此檔案包含 Azure AD B2C 識別提供者的相關信息。 更新以下應用程式設定屬性：

鑰匙 價值觀
APP_CLIENT_ID 您在步驟 2.1 中註冊的 Web 應用程式的應用程式（用戶端）ID。
APP_CLIENT_SECRET 您在步驟 2.2 中建立的 Web 應用程式的用戶端金鑰值
SIGN_UP_SIGN_IN_POLICY_AUTHORITY 登入和註冊使用者流許可權，例如 https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. 請將<your-tenant-name>取代為您的承租者名稱，並將<sign-in-sign-up-user-flow-name>取代為您的登入和註冊使用者流程名稱，例如B2C_1_susi。 瞭解如何 取得您的租戶名稱。
RESET_PASSWORD_POLICY_AUTHORITY Reset password （重置密碼） 使用者流許可權，例如 https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>. 將 <your-tenant-name> 替換為您的租戶名稱，將 <reset-password-user-flow-name> 替換為您重設密碼的使用流程名稱，例如 B2C_1_reset_password_node_app。
EDIT_PROFILE_POLICY_AUTHORITY Profile editing 使用者流程權限（例如 https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>）。 將 <your-tenant-name> 替換為您的租戶名稱，將 <reset-password-user-flow-name> 替換為重置密碼使用流程的名稱，例如 B2C_1_edit_profile_node_app。
AUTHORITY_DOMAIN Azure AD B2C 授權域，例如 https://<your-tenant-name>.b2clogin.com。 以您的租使用者名稱取代 <your-tenant-name> 。
APP_REDIRECT_URI 應用程式重新導向 URI，其中 Azure AD B2C 會傳回驗證回應（令牌）。 它與你在 Azure 門戶中註冊應用時設置的 重定向 URI 匹配，並且必須可公開訪問。 將值保留為 。
LOGOUT_ENDPOINT Azure AD B2C 註銷端點，例如 https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000. 請將<your-tenant-name>取代為您的承租者名稱，並將<sign-in-sign-up-user-flow-name>取代為您的登入和註冊使用者流程名稱，例如B2C_1_susi。

您的最終設定檔應類似於以下範例：

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

執行範例 Web 應用程式

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

  1. 在您的終端中，執行以下代碼以啟動 Node.js Web 伺服器：

    node index.js

  2. 在瀏覽器中，前往 http://localhost:3000。 您應該會看到帶有 Sign in （登錄） 按鈕的頁面。

    顯示 Node Web 應用程式登錄頁面的螢幕截圖。

測試登入

  1. 帶有 Sign in （登錄） 按鈕的頁面完成載入後，選擇 Sign in （登錄）。 系統會提示您登入。

  2. 輸入您的登入認證，例如電子郵件地址和密碼。 如果您沒有帳戶，請選取 [ 立即註冊 ] 以建立帳戶。 成功登錄或註冊后，您應該會看到以下顯示登錄狀態的頁面。

    屏幕截圖顯示了 Web 應用程式登錄狀態。

測試個人檔案編輯

  1. 登錄后，選擇 Edit profile （編輯檔案）。
  2. 根據需要輸入新的更改，然後選擇 Continue （繼續）。 您應該會看到具有新變更的登入狀態頁面，例如Given Name。

測試密碼重置

  1. 登錄后，選擇 Reset password（重置密碼）。
  2. 在出現的下一個對話框中，您可以通過選擇 Cancel （取消） 來取消作。 或者，輸入您的電子郵件地址，然後選擇 Send verification code（發送驗證碼）。 您的電子郵件帳戶將收到驗證碼。 複製電子郵件中的驗證碼，將其輸入到密碼重置對話方塊中，然後選擇 Verify code（驗證代碼）。
  3. 選取繼續。
  4. 輸入您的新密碼，確認，然後選擇 Continue （繼續）。 您應該會看到顯示登錄狀態的頁面。

測試登出

登錄后，選擇 Sign out（註銷）。您應該會看到具有 Sign in （登錄） 按鈕的頁面。

後續步驟