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

2025-05-06

重要

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

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

先决条件

熟悉在 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"
    }
  },

预先选择标识提供者

如果将应用程序的登录旅程配置为包含社交帐户（如 Facebook、LinkedIn 或 Google），则可以指定 domain_hint 参数。此查询参数向 Azure AD B2C 提供有关应该用于登录的社交标识提供者的提示。例如，如果应用程序指定 domain_hint=facebook.com，登录流将直接转到 Facebook 登录页。

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

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

以下代码片段演示如何传递域提示参数。它们使用facebook.com作为属性值。

弹出窗口
重定向

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

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

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

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

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

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

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

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

指定 UI 语言

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

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

配置语言自定义。
创建或使用现有的 PopupRequest 或 RedirectRequest MSAL 配置对象，并包含 extraQueryParameters 属性。
将 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 令牌的相应变量添加 id_token_hint 参数。

以下代码片段演示如何定义 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.com 域名。

若要删除 URL 中提到“b2c”的所有内容，还可以将身份验证请求 URL 中的 B2C 租户名称 contoso.onmicrosoft.com 替换成租户 ID GUID。例如，可以更改为 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/https://account.contosobank.co.uk/<tenant ID GUID>/.

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

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

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

以下 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 配置选项。

通过