使用 Azure Active Directory B2C 在示例 Node.js Web API 中配置身份驗證

這很重要

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

在本文中，您將瞭解如何配置示例 Node.js Web 應用程式以調用範例 Node.js Web API。 Web API 需要由 Azure AD B2C 本身保護。在此設置中，Web 應用程式（如 App ID： 1 ）調用 Web API（如 App ID： 2）。使用者在 Web 應用程式中進行身份驗證以獲取訪問令牌，然後使用該令牌調用受保護的 Web API。

概觀

基於令牌的身份驗證可確保對 Web API 的請求附帶有效的訪問令牌。

Web 應用程式完成以下事件：

它會使用 Azure AD B2C 進行使用者驗證。
它會取得具有 Web API 端點所需許可權（範圍）的存取令牌。
它將訪問令牌作為 HTTP 請求的身份驗證標頭中的不記名令牌傳遞。它使用以下格式：

Authorization: Bearer <token>

Web API 完成以下事件：

它會從 HTTP 要求中的授權標頭讀取持有人令牌。
它會驗證令牌。
它會驗證令牌中的許可權（範圍）。
它會回應 HTTP 要求。如果令牌無效，Web API 終端節點將回應 401 Unauthorized HTTP 錯誤。

應用程式註冊概觀

若要讓您的應用程式使用 Azure AD B2C 登入並呼叫 Web API，您必須在 Azure AD B2C 目錄中註冊兩個應用程式。

Web 應用程式註冊讓您的應用程式能夠使用 Azure AD B2C 來登入。在註冊期間，您可以指定 重定向 URI。重定向 URI 是 Azure AD B2C 在使用者完成身份驗證後將使用者重定向到的終結點。應用程式註冊流程會產生可唯一識別您應用程式的「應用程式識別碼」 (也稱為「用戶端識別碼」)。您還將為您的應用程式產生 用戶端金鑰 。您的應用程式使用用戶端金鑰將授權代碼交換為訪問令牌。
Web API 註冊讓您的應用程式能夠呼叫安全的 Web API。註冊包含 Web API「範圍」。範圍提供一種方式，讓您可以管理受保護資源的權限，例如您的 Web API。您將 Web API 範圍的權限授與 Web 應用程式。要求存取權杖時，您的應用程式會在要求的範圍參數中指定所需的權限。

下圖說明應用程式註冊和應用程式架構：

具有 Web A P I 應用程式的應用程式註冊和應用程式體系結構的關係圖。

先決條件

Node.js。
Visual Studio Code 或其他程式碼編輯器。

步驟 1：設定您的使用者流程

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

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

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

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

第 2 步：註冊您的 Web 應用程式和 API

在此步驟中，您會建立 Web 和 Web API 應用程式註冊，並指定 Web API 的範圍。

步驟 2.1：註冊 Web API 應用程式

若要建立 Web API 應用程式註冊 (「應用程式識別碼：2」)，請遵循下列步驟：

登入 Azure 入口網站。
確定您使用的目錄包含您的 Azure AD B2C 租用戶。選取入口網站工具列中的 [目錄 + 訂用帳戶] 圖示。
在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找 Azure AD B2C 目錄，然後選取 [切換]。
在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
選取 [應用程式註冊]，然後選取 [[新增註冊]。
針對 [名稱]，輸入應用程式的名稱 (例如 my-api1)。保留 [重新導向 URI] 和 [支援的帳戶類型] 的預設值。
選取註冊。
當應用程式註冊完成之後，選取 [概觀]。
當您設定 Web 應用程式時，請記錄 [應用程式 (用戶端) 識別碼] 值，以供稍後使用。

步驟 2.2：設定範圍

選取您建立的 my-api1 應用程式 (「應用程式識別碼：2」)，以開啟其 [概觀] 頁面。
在 [管理] 底下，選取 [ 公開 API]。
選取 [應用程式識別碼 URI] 旁邊的 [設定] 連結。以唯一的名稱 (例如 tasks-api) 取代預設值 (GUID)，然後選取 [儲存]。

當您的 Web 應用程式要求 Web API 的存取權杖時，應該新增此 URI 作為您針對 API 所定義之每個範圍的前置詞。
在 此 API 定義的範圍 下，選取 新增範圍。
若要建立定義 API 讀取存取權的範圍：
1. 針對 [範圍名稱]，輸入 tasks.read。
2. 針對 [管理員同意顯示名稱]，輸入工作 API 的讀取存取權。
3. 針對 [管理員同意描述]，輸入允許工作 API 的讀取存取權。
選取新增範圍。
選取 [新增範圍]，然後新增定義 API 寫入存取權的範圍：
1. 針對 [範圍名稱]，輸入 tasks.write。
2. 針對 [管理員同意顯示名稱]，輸入工作 API 的寫入存取權。
3. 針對 [管理員同意描述]，輸入允許工作 API 的寫入存取權。
選取新增範圍。

步驟 2.3：註冊 Web 應用程式

要建立 SPA 註冊，請執行以下作：

登入 Azure 入口網站。
如果您有多個租用戶的存取權，請使用頂端功能表中的 [設定] 圖示，從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租用戶。
搜尋並選取 Azure AD B2C。
選取 [應用程式註冊]，然後選取 [[新增註冊]。
輸入應用程式的名稱（例如， App ID： 1）。
在 支援的帳戶類型下，選取 任何身分提供者或組織目錄中的帳戶（用於驗證具有使用者流程的使用者）。
在 Redirect URI （重定向 URI） 下，選擇 Web，然後在 URL 文字框中輸入http://localhost:3000/redirect
在 [權限] 底下，選取 [對 openid 與 offline_access 權限授與管理員同意] 核取方塊。
選取註冊。

步驟 2.4：創建用戶端金鑰

在“ Azure AD B2C - 應用註冊” 頁中，選擇創建的應用程式，例如 “應用 ID：1”。
在左側功能表中，於 [管理] 下，選取 [憑證 & 秘密]。
選取 [新用戶端密碼]。
在 [描述] 方塊中輸入客戶端密碼的描述。例如，clientsecret1。
在 [到期] 下，選取祕密的有效持續時間，然後選取 [新增]。
記錄密碼的值，以便在用戶端應用程式的程式碼中使用。離開此頁面後，就「不會再次顯示」此祕密值。您可以使用此值，作為應用程式程式碼中的應用程式密碼。

步驟 2.5：向 Web 應用程式授予 API 許可權

若要為應用程式 (應用程式識別碼：1) 授與權限，請遵循下列步驟：

選取 [應用程式註冊]，然後選取您建立的應用程式 (「應用程式識別碼：1」)。
在「管理」下方選取 [API 權限]。
在 [已設定的權限] 底下，選取 [新增權限]。
請選取「我的 API」索引標籤。
選取 Web 應用程式應獲授存取權的 API (「應用程式識別碼：2」)。例如，輸入 my-api1。
在 [權限] 下，展開 [工作]，然後選取您稍早定義的範圍 (例如 tasks.read 和 tasks.write)。
選取新增權限。
選取 [代表 <您的租用戶名稱> 授與管理員同意]。
選擇是。
選取 [重新整理]，然後驗證 [授與...] 會出現在這兩個範圍的 [狀態] 下方。
從 [設定的權限] 清單中，選取您的範圍，然後複製範圍的完整名稱。

第 3 步：獲取 Web 應用程式範例代碼

此示例演示了 Web 應用程式如何使用 Azure AD B2C 進行使用者註冊和登錄。然後，應用程式會取得存取權杖，並呼叫受保護的 Web API。

要取得 Web 應用程式範例代碼，您可以執行以下任一作：

下載 zip 檔。您將提取 zip 檔以取得範例 Web 應用程式。

執行下列命令，從 GitHub 複製範例：

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

步驟 3.1：安裝應用程式依賴項

打開主控台視窗，然後切換到包含 Node.js 範例應用程式的目錄。例如：
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
```
執行下列命令來安裝應用程式相依性：
```
    npm install && npm update
```

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

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

鑰匙	價值觀
`APP_CLIENT_ID`	您在步驟 2.3 中註冊的 Web 應用程式的應用程式（用戶端）ID。
`APP_CLIENT_SECRET`	您在步驟 2.4 中建立的 Web 應用程式的用戶端金鑰值
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	您在步驟 1 中建立的使用者流的登入和註冊使用者流許可權，例如 `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`。瞭解如何取得您的租戶名稱。
`AUTHORITY_DOMAIN`	Azure AD B2C 授權域，例如 `https://<your-tenant-name>.b2clogin.com`。以您的租使用者名稱取代 `<your-tenant-name>` 。
`APP_REDIRECT_URI`	應用程式重新導向 URI，其中 Azure AD B2C 會傳回驗證回應（令牌）。它與在 Azure 門戶中註冊應用時設置的重定向 URI 匹配。此 URL 需要可公開訪問。將值保留為。
`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`。

更新后，您的最終配置檔應類似於以下範例：

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

步驟 4：取得 Web API 範例程式碼

現在 Web API 已註冊且您已定義其範圍，請設定 Web API 程式碼以使用您的 Azure AD B2C 租用戶。

若要取得 Web API 範例程式碼，請執行下列其中一項：

下載 *.zip 封存檔。

執行下列命令，從 GitHub 複製範例 Web API 專案：

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

您也可以直接移至 GitHub 上的 Azure-Samples/active-directory-b2c-javascript-nodejs-webapi 專案。

步驟 4.1：更新 Web API

在代碼編輯器中，打開 config.json 該檔。

使用之前建立的使用者流和應用程式註冊修改變量值：

對於 tenantName，請使用租戶名稱的名稱，例如 fabrikamb2c.
對於 clientID，請使用您在步驟 2.1 中創建的 Web API 的應用程式（用戶端）ID。
對於 policyName，請使用您在步驟 1 中創建的 Sing in and sign up 使用者流的名稱，例如 B2C_1_susi.

更新後，您的代碼應類似於以下範例：

config.json：

{
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "Enter_the_Application_Id_Here"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

步驟 4.2：安裝應用程式依賴項

開啟主控台視窗，並變更至包含 Node.js Web API 範例的目錄。例如：
```
cd active-directory-b2c-javascript-nodejs-webapi
```
執行以下命令：
```
npm install && npm update
```

第 5 步：執行 Web 應用程式和 API

現在，您可以測試 Web 應用程式對 Web API 的作用域訪問。在本地電腦上運行 Node.js Web API 和示例 Web 應用程式。

在終端中，導航到範例 Web API 並運行 start the Node.js Web API 伺服器。例如： '
```
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```
主控台視窗會顯示裝載應用程式的連接埠號碼。
```
Listening on port 5000...
```
在另一個終端實例中，導航到示例 Web 應用程式並運行 start the Node.js Web 應用程式伺服器。例如：
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js
```
主控台視窗會顯示裝載應用程式的連接埠號碼。
```
Msal Node Auth Code Sample app listening on port !3000
```
在瀏覽器中，前往 http://localhost:3000。您應該會看到帶有兩個按鈕的頁面： 登錄以調用 PROTECTED API 和 Or call the ANONYMOUS API。
要調用匿名 API，請選擇 Or call the ANONYMOUS API。 API 使用具有 key 的 date JSON 物件進行回應，例如：
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
匿名 API 是 Web API 中不受保護的終結點。您不需要訪問權杖即可存取它。
要調用受保護的 API 終端節點，請選擇 Sign in to call PROTECTED API （登錄以調用 PROTECTED API ）按鈕。系統會提示您登入。
輸入您的登入認證，例如電子郵件地址和密碼。如果您沒有帳戶，請選取 [ 立即註冊 ] 以建立帳戶。成功登錄或註冊后，您應該會看到以下頁面，其中包含 Call the PROTECTED API 按鈕。
要調用受保護的 API，請選擇 Call the PROTECTED API （呼叫性保護的 API ）按鈕。 API 使用 JSON 物件進行回應， name 其鍵的值是您帳戶的姓氏，例如：
```
    {"name": "User 1"} 
```

後續步驟

瞭解如何使用 Azure AD B2C 在自己的 Web API 中啟用身份驗證

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-06-23