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

發行項
01/11/2024

本文使用範例 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. 交換標識元令牌、存取令牌和重新整理令牌的授權碼。
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）。

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

Diagram that describes a single-page application with web A P I, registrations, and tokens.

呼叫 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] 和 [支持的帳戶類型] 的預設值。
選取註冊。
完成應用程式註冊之後，請選取 [ 概觀]。
記錄應用程式（client）識別碼值，以供稍後在設定 Web 應用程式時使用。

2.2 設定範圍

選取您建立的 my-api1 應用程式（應用程式識別碼：2）以開啟其 [概觀 ] 頁面。
在 [管理] 底下，選取 [公開 API]。
在 [ 應用程式識別碼 URI] 旁，選取 [ 設定 ] 連結。以唯一名稱取代預設值（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 。
在 [許可權] 底下，選取 [ 授與系統管理員同意以開啟標識符和離線訪問許可權] 複選框。
選取註冊。
當您設定 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 檔案。使用對應的值更新索引鍵：

區段	機碼	值
b2cPolicies	名稱	您在步驟 1 中建立的使用者流程或自定義原則。
b2cPolicies	當局	將取代 `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>` 。
b2cPolicies	authorityDomain	您的 Azure AD B2C 租用戶名稱。例如： `contoso.onmicrosoft.com` 。
組態	clientId	步驟 2.3 中的 Angular 應用程式識別碼。
protectedResources	endpoint	Web API 的 URL： `http://localhost:5000/api/todolist`。
protectedResources	scopes	您在步驟 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 應用程式作為持有人令牌傳遞的存取令牌。更新應用程式設定的下列屬性：

區段	機碼	值
credentials	tenantName	Azure AD B2C 租用戶名稱的第一個部分。例如： `contoso` 。
credentials	clientID	步驟 2.1 中的 Web API 應用程式識別碼。在先前的圖表中，它是應用程式標識碼為 2 的應用程式。
credentials	issuer	（選擇性）令牌簽發者 `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 租使用者識別碼。
原則	policyName	您在步驟 1 中建立的使用者流程或自定義原則。如果您的應用程式使用多個使用者流程或自定義原則，請只指定一個。例如，使用註冊或登入使用者流程。
resource	範圍 (scope)	步驟 2.5 中 Web API 應用程式註冊的範圍。

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

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "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 路徑大小寫。

Share via