你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

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

项目
01/11/2024

本文介绍了如何自定义和增强面向 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 侦听器。当用户尝试在没有有效访问令牌的情况下访问受保护的资源时，MSAL Guard 和 MSAL 侦听器配置会生效。在这种情况下，MSAL 库会强制用户登录。

以下示例演示如何配置 MSAL Guard 和 MSAL 侦听器，以使用弹出窗口或重定向登录：

弹出
重定向

// 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 中的语言自定义让用户流适应各种不同的语言，从而满足客户需求。有关详细信息，请参阅语言自定义。

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

配置语言自定义。
创建或使用具有 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 令牌提示

信赖方应用可随附 OAuth2 授权请求发送入站 JSON Web 令牌 (JWT)。入站令牌是有关用户或授权请求的提示。 Azure AD B2C 会验证令牌，然后提取声明。

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

在自定义策略中，定义 ID 令牌提示的技术配置文件。
创建或使用具有 extraQueryParameters 属性的现有 PopupRequest 或 RedirectRequest MSAL 配置对象。
使用可存储 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.ts MSAL 配置对象并将 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 配置选项。

通过

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

先决条件

预先选择标识提供程序

指定 UI 语言

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

传递 ID 令牌提示

使用自定义域

配置日志记录

后续步骤

反馈

其他资源

通过

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

先决条件

登录和注销行为

预填充登录名

预先选择标识提供程序

指定 UI 语言

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

传递 ID 令牌提示

使用自定义域

配置日志记录

后续步骤

反馈

其他资源