如何在基于msal-browser的React SPA中触发AADB2C自定义密码更改策略？

步骤1：更新MSAL配置 #

先把你的Azure B2C密码更改策略（比如B2C_1A_PasswordChange）纳入MSAL的识别范围。初始化PublicClientApplication时，补充相关权威配置：

const msalConfig = {
  auth: {
    clientId: "你的SPA客户端ID",
    authority: "https://你的租户.b2clogin.com/你的租户.onmicrosoft.com/B2C_1A_SignUpSignIn", // 默认登录策略
    knownAuthorities: ["你的租户.b2clogin.com"],
    redirectUri: "/",
    postLogoutRedirectUri: "/"
  },
  // 其他配置项...
};

步骤2：编写触发密码更改的组件逻辑 #

借助@azure/msal-react的useMsal钩子获取MSAL实例，调用loginPopup并指定密码更改策略的权威地址，即可唤起密码更改弹窗：

import { useMsal } from "@azure/msal-react";

export const PasswordChangeButton = () => {
  const { instance } = useMsal();

  const triggerPasswordChange = async () => {
    try {
      // 替换为你的密码更改策略权威地址
      const passwordChangeAuthority = "https://你的租户.b2clogin.com/你的租户.onmicrosoft.com/B2C_1A_PasswordChange";
      
      await instance.loginPopup({
        authority: passwordChangeAuthority,
        scopes: ["openid"],
        prompt: "login" // 强制触发弹窗，避免静默登录跳过流程
      });

      // 密码更改完成后，可刷新用户信息
      const activeAccount = instance.getActiveAccount();
      if (activeAccount) {
        await instance.acquireTokenSilent({
          account: activeAccount,
          scopes: ["openid", "profile"]
        });
      }
    } catch (error) {
      console.error("密码更改流程出错:", error);
    }
  };

  return <button onClick={triggerPasswordChange}>修改密码</button>;
};

关键注意事项 #

• 务必将代码中的你的租户、密码更改策略名称、SPA客户端ID替换为实际项目信息。
• 密码更改策略要求用户已完成认证，若用户未登录，loginPopup会先引导登录，再进入密码更改流程。
• 若偏好重定向而非弹窗，可将loginPopup替换为loginRedirect，参数保持一致。
• 确认Azure B2C租户中已正确配置密码更改策略，且SPA应用已被授权使用该策略。

内容的提问来源于stack exchange，提问作者mangafaua