Azure B2C认证成功后无法获取正确用户名问题求助

云原生阿岚

2026-8-19

如何在Azure AD B2C React SPA中获取用户实际用户名而非邮箱

问题背景

你使用Azure AD B2C的标准注册/登录策略（本地账户，以username作为用户ID），React SPA通过MSAL.js完成认证，但目前acquireTokenSilent返回的account.username是邮箱地址，而非设置的实际用户名。

解决方案

1. 在AD B2C用户流中添加用户名相关声明到ID令牌

当前ID令牌未包含实际用户名的声明，需修改用户流配置：

登录Azure门户，进入你的AD B2C租户
找到并打开正在使用的注册和登录用户流（例如b2c_1_flow）
切换到应用程序声明标签页
在「可用声明」列表中，找到并勾选用户名（或根据你截图中的配置选择「用户主体名称(UPN)」）
点击「保存」完成用户流配置更新

2. 在React代码中提取实际用户名

配置更新后，重新触发登录流程，调用acquireTokenSilent获取的令牌会包含新增声明，可从idTokenClaims中提取：

const { instance, accounts, inProgress } = useMsal();
if (accounts.length > 0) {
  instance
    .acquireTokenSilent({
      account: accounts[0],
      scopes: ["https://APP_URI/user_impersonation"],
    })
    .then((token) => {
      // 根据添加的声明名称获取用户名，示例：
      const actualUsername = token.idTokenClaims.username; 
      // 若添加的是UPN声明，则使用 token.idTokenClaims.upn
      console.log("实际用户名:", actualUsername);
    })
    .catch((err) => {
      console.log("获取令牌失败:", err);
    });
}