使用 Azure Active Directory B2C 在 Angular 应用程序中配置身份验证选项

Important

自 2025 年 5 月 1 日起，Azure AD B2C 将不再可供新客户购买。在我们的常见问题解答中了解详细信息。

本文介绍如何为 Angular 单页应用程序（SPA）自定义和增强 Azure Active Directory B2C （Azure AD B2C）身份验证体验。

Prerequisites

熟悉在 Angular SPA 中配置身份验证或在自己的 Angular SPA 中启用身份验证的文章。

可以将单页应用程序配置为通过两种方式使用 MSAL.js 登录用户：

弹出窗口：身份验证发生在弹出窗口中，并保留应用程序的状态。如果不希望用户在身份验证期间离开应用程序页面，请使用此方法。但是，Internet Explorer上的弹出窗口存在已知问题。
- 若要使用弹出窗口登录，在类中 src/app/app.component.ts ，请使用 loginPopup 该方法。
- 在类中 src/app/app.module.ts ，将 interactionType 属性设置为 InteractionType.Popup.
- 若要使用弹出窗口注销，请在 src/app/app.component.ts 类中使用 logoutPopup 方法。还可以配置 logoutPopup，通过在请求中传递 mainWindowRedirectUri，在注销完成后将主窗口重定向到其他页面，例如主页或登录页。
重定向：用户重定向到 Azure AD B2C 以完成身份验证流。如果用户具有禁用弹出窗口的浏览器约束或策略，请使用此方法。
- 若要使用重定向登录，请在 src/app/app.component.ts 类中使用 loginRedirect 方法。
- 在类中 src/app/app.module.ts ，将 interactionType 属性设置为 InteractionType.Redirect.
- 若要通过重定向注销，请在 src/app/app.component.ts 类中使用 logoutRedirect 方法。通过设置 postLogoutRedirectUri，配置注销后应重定向到的 URI。应在应用程序注册中将此 URI 添加为重定向 URI。

以下示例演示如何登录和注销：

弹出窗口
重定向

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
  } else {
    this.authService.loginRedirect();
  }
}

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

MSAL Angular 库有三个登录流：交互式登录（其中用户选择登录按钮）、MSAL Guard 和 MSAL Interceptor。当用户尝试在没有有效访问令牌的情况下访问受保护的资源时，MSAL Guard 和 MSAL 侦听器配置将生效。在这种情况下，MSAL 库会强制用户登录。

以下示例演示如何使用弹出窗口或重定向配置 MSAL Guard 和 MSAL Interceptor 进行登录：

弹出窗口
重定向

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

在登录用户旅程中，你的应用可能面向特定用户。当应用面向用户时，它可以在授权请求 login_hint 中使用用户的登录名称指定查询参数。 Azure AD B2C 会自动填充登录名，用户只需提供密码。

若要预填充登录名称，请执行以下操作：

如果使用自定义策略，请添加所需的输入声明，如 “设置直接登录”中所述。
创建或使用现有 PopupRequest 或 RedirectRequest MSAL 配置对象。
将 loginHint 属性设置为相应的登录提示。

以下代码片段演示如何传递登录提示参数。它们将 bob@contoso.com 用作属性值。

弹出窗口
重定向

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

预选身份提供商

如果将应用程序的登录旅程配置为包含社交帐户，则可以指定 domain_hint 参数。此查询参数向 Azure AD B2C 提供一个提示，说明应使用哪个社交身份提供商进行登录。

若要将用户重定向到外部标识提供者，请执行以下操作：

检查您的外部身份提供商的域名。有关详细信息，请参阅将登录重定向到社交服务提供商。
创建或使用现有 PopupRequest 或 RedirectRequest MSAL 配置对象。
使用对应的域提示设置 domainHint 属性。

以下代码片段演示如何传递域提示参数。

弹出窗口
重定向

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "<YOUR_DOMAIN_HINT>";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "<YOUR_DOMAIN_HINT>"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.domainHint = "<YOUR_DOMAIN_HINT>";

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "<YOUR_DOMAIN_HINT>"
    }
  },

指定 UI 语言

Azure AD B2C 中的语言自定义使用户流能够适应各种语言以满足客户的需求。有关详细信息，请参阅语言自定义。

若要设置首选语言，请执行以下操作：

配置语言自定义。
创建或使用具有 extraQueryParameters 属性的现有 PopupRequest 或 RedirectRequest MSAL 配置对象。
将 ui_locales 具有相应语言代码的参数添加到 extraQueryParameters 属性。

以下代码片段演示如何传递域提示参数。它们将 es-es 用作属性值。

弹出窗口
重定向

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

传递自定义查询字符串参数

使用自定义策略，可以传递自定义查询字符串参数。一个很好的用例示例是想要动态更改页面内容。

若要传递自定义查询字符串参数，请执行以下操作：

配置 ContentDefinitionParameters 元素。
创建新的或使用现有的具有 extraQueryParameters 属性的 PopupRequest 或 RedirectRequest MSAL 配置对象。
添加自定义查询字符串参数，例如 campaignId。设置参数值。

以下代码片段演示如何传递自定义查询字符串参数。它们将 germany-promotion 用作属性值。

弹出窗口
重定向

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

传递 ID 令牌提示

信赖方应用程序可以将入站 JSON Web 令牌（JWT）作为 OAuth2 授权请求的一部分发送。入站令牌是有关用户或授权请求的提示。 Azure AD B2C 验证令牌，然后提取声明。

若要在身份验证请求中包含 ID 令牌提示，请执行以下操作：

在自定义策略中，定义 ID 令牌提示的技术配置文件。
创建或使用现有的 PopupRequest 或 RedirectRequest MSAL 配置对象，并包含 extraQueryParameters 属性。
添加 id_token_hint 参数，并使用存储 ID 令牌的相应变量。

以下代码片段演示如何定义 ID 令牌提示：

弹出窗口
重定向

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

使用自定义域

通过使用自定义域，可以完全打造身份验证 URL 的品牌。从用户的角度来看，在身份验证过程中，用户始终停留在您的域名下，而不是被重定向到 Azure AD B2C 的 b2clogin.cn 域名。

若要移除 URL 中对“b2c”的所有引用，还可以在身份验证请求 URL 中，将 B2C 租户名称 contoso.partner.onmschina.cn 替换为租户 ID（GUID）。例如，您可以将 https://fabrikamb2c.b2clogin.cn/contoso.partner.onmschina.cn/ 更改为 https://account.contosobank.co.uk/<tenant ID GUID>/。

若要在身份验证 URL 中将自定义域用于租户 ID，请按照 “启用自定义域”中的指南进行操作。打开 src/app/auth-config.ts MSAL 配置对象，并将 authorities 和 knownAuthorities 更改为使用你的自定义域名和租户 ID。

以下 JavaScript 显示更改前的 MSAL 配置对象：

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.cn/fabrikamb2c.partner.onmschina.cn/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.cn"],
      ...
    },
  ...
}

以下 JavaScript 显示更改后的 MSAL 配置对象：

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

配置日志

MSAL 库生成有助于诊断问题的日志消息。应用可以配置日志记录。该应用还可以让你对详细信息级别以及是否记录个人和组织数据进行自定义控制。

建议创建 MSAL 日志记录回调，并为用户提供在遇到身份验证问题时提交日志的方法。 MSAL 提供以下级别的日志记录详细信息：

错误：出了问题，并产生了一个错误。此级别用于调试和识别问题。
警告：没有一定出错或失败，但信息用于诊断和查明问题。
信息：MSAL 记录用于信息性目的的事件，不一定用于调试。
详细：这是默认级别。 MSAL 记录库行为的完整详细信息。

默认情况下，MSAL 记录器不会捕获任何个人或组织数据。如果你选择这样做，该库允许你启用对个人和组织数据的日志记录。

若要配置 Angular 日志记录，请在 src/app/auth-config.ts 中配置以下密钥：

loggerCallback 是记录器回调函数。
logLevel 允许指定日志记录级别。可能的值： Error、 Warning、 Info和 Verbose。
piiLoggingEnabled 允许输入个人数据。可能的值：true 或 false。

以下代码片段演示如何配置 MSAL 日志记录：

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

后续步骤

了解详细信息： MSAL.js 配置选项。

Last updated on 2026-07-24