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

Important

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

本文介绍可自定义和增强 React 单页应用程序（SPA）Azure Active Directory B2C（Azure AD B2C）身份验证体验的方法。 在开始之前，请熟悉 在 React SPA 中配置身份验证 或在 你自己的 React SPA 中启用身份验证的文章。

登录和注销行为

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

  • 弹出窗口：身份验证发生在弹出窗口中，并保留应用程序的状态。 如果不希望用户在身份验证期间离开应用程序页面，请使用此方法。 Internet Explorer上的弹出窗口存在已知问题。
    • 若要使用弹出窗口登录，请使用 loginPopup 该方法。
    • 若要使用弹出窗口注销，请使用 logoutPopup 该方法。
  • 重定向：用户重定向到 Azure AD B2C 以完成身份验证流。 如果用户具有禁用弹出窗口的浏览器约束或策略，请使用此方法。
    • 若要使用重定向登录，请使用 loginRedirect 该方法。
    • 若要使用重定向注销，请使用 logoutRedirect 该方法。

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

// src/components/NavigationBar.jsx
instance.loginPopup(loginRequest)
            .catch((error) => console.log(error))

instance.logoutPopup({ postLogoutRedirectUri: "/", mainWindowRedirectUri: "/" })

使用自定义域

通过使用 自定义域，可以完全打造身份验证 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/authConfig.js打开 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 配置对象：

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_reset",
        },
        editProfile: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_edit_profile"
        }
    },
    authorityDomain: "custom.domain.com"
}

预填充登录名称

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

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

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

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

// src/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com";
instance.loginPopup(loginRequest);

预先选择标识提供者

如果将应用程序的登录旅程配置为包含社交帐户，则可以指定 domain_hint 参数。 此查询参数提供有关应用于登录的社交标识提供者Azure AD B2C 的提示。

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

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

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

// src/components/NavigationBar.jsx
loginRequest.domainHint = "<YOUR_DOMAIN_HINT>";
instance.loginPopup(loginRequest);

指定 UI 语言

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

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

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

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.loginPopup(loginRequest);

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

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

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

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

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.loginPopup(loginRequest);

传递 ID 令牌提示

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

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

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

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginPopup(loginRequest);

配置日志

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

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

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

默认情况下，MSAL 记录器不会捕获任何个人或组织数据。 如果你决定这样做，该库提供了启用个人数据和组织数据的日志记录的选项。

若要配置 MSAL 日志记录，请在 src/authConfig.js中配置以下密钥：

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

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

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

后续步骤

  • Last updated on