使用 Azure Active Directory B2C 在範例 Angular 單頁應用程式中設定驗證

2025-05-03

這很重要

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

本文使用範例 Angular 單頁應用程式（SPA）來說明如何將 Azure Active Directory B2C （Azure AD B2C）驗證新增至 Angular 應用程式。

概觀

OpenID Connect (OIDC) 是以 OAuth 2.0 為基礎所建置的驗證通訊協定，可用來讓使用者安全地登入應用程式。這個 Angular 範例使用 MSAL Angular 和 MSAL 瀏覽器。 MSAL 是Microsoft提供的連結庫，可簡化將驗證和授權支援新增至 Angular SPA。

登入流程包含下列步驟：

用戶會開啟應用程式，然後選取 [登入]。
應用程式會啟動驗證要求，並將使用者重新導向至 Azure AD B2C。
用戶註冊或登入並重設密碼，或使用社交帳戶登入。
成功登入時，Azure AD B2C 會將授權碼傳回應用程式。應用程式會採取下列動作：
1. 將授權碼交換為ID令牌、存取令牌和刷新令牌。
2. 讀取身分識別令牌聲明。
3. 將存取令牌和重新整理令牌儲存在記憶體快取中，以供稍後使用。存取令牌可讓使用者呼叫受保護的資源，例如 Web API。更新權杖用於獲取新的存取權杖。

應用程式註冊

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

單頁應用程式 （Angular）註冊可讓您的應用程式使用 Azure AD B2C 登入。在應用程式註冊期間，您可以指定 重新導向 URI。重新導向URI是使用者在向 Azure AD B2C 進行驗證之後重新導向的端點。應用程式註冊程式會產生應用程式識別碼，也稱為用戶端標識符，可唯一識別您的應用程式。本文使用範例 應用程式識別碼：1。
Web API 註冊可讓您的應用程式呼叫受保護的 Web API。註冊會公開 Web API 許可權（範圍）。應用程式註冊程式會產生可唯一識別 Web API 的應用程式識別碼。本文使用 範例應用程式識別碼：2。授與您的應用程式（應用程式識別碼： 1） Web API 範圍的許可權（應用程式識別元：2）。

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

此圖描述具有 Web A P I、註冊和令牌的單頁應用程式。

呼叫 Web API

驗證完成之後，使用者會與應用程式互動，而該應用程式會叫用受保護的 Web API。該 Web API 會使用持有人權杖驗證。持有人權杖是應用程式從 Azure AD B2C 取得的存取權杖。應用程式會在 HTTPS 要求的授權標頭中傳遞權杖。

Authorization: Bearer <access token>

如果存取權杖的範圍與 Web API 的範圍不符，則驗證程式庫會取得具有正確範圍的新存取權杖。

註銷流程

登出流程包含下列步驟：

使用者從應用程式登出。
應用程式會清除其工作階段物件，而驗證程式庫會清除其權杖快取。
應用程式會將使用者帶到 Azure AD B2C 登出端點，以終止該 Azure AD B2C 工作階段。
系統會將使用者重新導向回到應用程式。

先決條件

在您遵循本文中的程式之前，請確定您的電腦正在執行：

Visual Studio Code 或任何其他程式碼編輯器。
Node.js 執行環境和 npm。
Angular CLI。

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

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

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

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

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

步驟 2：註冊 Angular SPA 和 API

在此步驟中，您會建立 Angular SPA 和 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 註冊 Angular 應用程式

請遵循下列步驟來建立 Angular 應用程式註冊：

登入 Azure 入口網站。
如果您有多個租用戶的存取權，請使用頂端功能表中的 [設定] 圖示，從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租用戶。
在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
選取 [應用程式註冊]，然後選取 [[新增註冊]。
針對 [名稱]，輸入應用程式的名稱。例如，輸入 MyApp。
在 支援的帳戶類型下，選取 任何身分提供者或組織目錄中的帳戶（用於驗證具有使用者流程的使用者）。
在 [重新導向 URI] 下，選取 [單頁應用程式 ][SPA]，然後在 [URL] 方塊中輸入 http://localhost:4200 。
在 [權限] 底下，選取 [對 openid 與 offline_access 權限授與管理員同意] 核取方塊。
選取註冊。
當您設定 Web 應用程式時，請記錄 應用程式（client）識別碼 值，以在稍後的步驟中使用。

2.5 授與許可權

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

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

步驟 3：取得 Angular 範例程式代碼

此範例示範 Angular 單頁應用程式如何使用 Azure AD B2C 進行用戶註冊和登入。然後，應用程式會取得存取權杖，並呼叫受保護的 Web API。

下載範例 .zip 檔案，或使用下列命令從 GitHub 存放庫複製範例：

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

3.1 設定 Angular 範例

既然您已取得 SPA 範例，請使用您的 Azure AD B2C 和 Web API 值來更新程式碼。在範例資料夾的 src/app 資料夾下，開啟 auth-config.ts 檔案。使用對應的值更新鍵：

章節	鑰匙	價值觀
b2c政策	名字	您在步驟 1 中建立的使用者流程或自定義原則。
b2c政策	當局	將 `your-tenant-name` 取代為您的 Azure AD B2C 租用戶名稱。例如，使用 `contoso.onmicrosoft.com`。然後，將原則名稱取代為您在步驟 1 中建立的使用者流程或自訂原則。例如： `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>` 。
b2c政策	权威域	您的 Azure AD B2C 租戶名稱。例如： `contoso.onmicrosoft.com` 。
設定	用戶端ID	步驟 2.3 中的 Angular 應用程式識別碼。
受保護資源	端點	Web API 的 URL： `http://localhost:5000/api/todolist`。
受保護資源	範圍	您在步驟 2.2 中建立的 Web API 範圍。例如： `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]` 。

產生的 src/app/auth-config.ts 程式 代碼看起來應該類似下列範例：

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

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

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

下載 *.zip 封存，或從 GitHub 複製範例 Web API 專案。您也可以使用下列命令直接流覽至 GitHub 上的 Azure-Samples/active-directory-b2c-javascript-nodejs-webapi 專案：

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

4.1 設定 Web API

在範例資料夾中，開啟 config.json 檔案。此檔案包含 Azure AD B2C 識別提供者的相關信息。 Web API 應用程式會使用此資訊來驗證由 Web 應用程式傳遞作為持有者代幣的存取令牌。更新應用程式設定的下列屬性：

章節	鑰匙	價值觀
資格證明	租戶名稱	Azure AD B2C 租戶名稱的第一個部分。例如： `contoso` 。
資格證明	用戶識別碼 (clientID)	步驟 2.1 中的 Web API 應用程式識別碼。在先前的圖表中，它是應用程式標識碼為 2 的應用程式。
資格證明	發行者	（選擇性）令牌簽發者 `iss` 宣告值。根據預設，Azure AD B2C 會以下列格式傳回令牌： `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`。將 `<your-tenant-name>` 取代為您 Azure AD B2C 租用戶名稱的第一個部分。將 `<your-tenant-ID>` 替換為您的 Azure AD B2C 租戶識別碼。
政策	政策名稱	您在步驟 1 中建立的使用者流程或自定義原則。如果您的應用程式使用多個使用者流程或自定義原則，請只指定一個。例如，使用註冊或登入使用者流程。
資源	範圍	步驟 2.5 中 Web API 應用程式註冊的範圍。

您的最終組態檔看起來應該像下列 JSON：

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
}

步驟 5：執行 Angular SPA 和 Web API

您現在已準備好測試對 API 的 Angular 範圍存取。在此步驟中，請在本機計算機上執行 Web API 和範例 Angular 應用程式。然後，登入 Angular 應用程式，然後選取 [TodoList ] 按鈕以啟動受保護 API 的要求。

執行 Web API

開啟主控台視窗，並變更為包含 Web API 範例的目錄。例如：
```
cd active-directory-b2c-javascript-nodejs-webapi
```
執行以下命令：
```
npm install && npm update
node index.js
```
主控台視窗會顯示載入應用程式的埠號碼：
```
Listening on port 5000...
```

執行 Angular 應用程式

開啟另一個控制台視窗，並變更為包含 Angular 範例的目錄。例如：
```
cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
```
執行以下命令：
```
npm install && npm update
npm start
```
主控台視窗會顯示載入應用程式的埠號碼：
```
Listening on port 4200...
```
在瀏覽器中移至 http://localhost:4200 以檢視應用程式。
選取 [登入]。
完成註冊或登入程式。
成功登入時，您應該會看到您的個人資料。從選單中選取TodoList。
選取 [新增 ] 以將新專案新增至清單，或使用圖示來刪除或編輯專案。

部署應用程式

在生產應用程式中，應用程式註冊的重新導向 URI 通常是應用程式執行所在的可公開存取端點，例如 https://contoso.com。

您可以隨時在已註冊的應用程式中新增及修改重新導向 URI。下列限制會套用至重新導向 URI：

回復 URL 的開頭必須是配置 https。
回覆 URL 會區分大小寫。其大小寫必須符合您執行中應用程式之 URL 路徑的大小寫。

共用方式為