如何在React应用中通过msal.js从Azure AD B2C的access token提取声明？

没问题！用MSAL.js完全可以轻松提取这些自定义声明，而且不需要手动扩展用户对象——MSAL已经帮我们把这些声明整合到了账户对象里，我给你详细讲讲怎么操作：

1. 从ID Token中提取自定义声明（最常用） #

当用户完成登录后，MSAL会把ID Token里的所有声明（包括你在策略中配置的自定义声明）存储在账户对象的idTokenClaims属性里。如果你用的是MSAL v2（现在推荐的版本），可以这样获取：

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

function MyComponent() {
  const { instance } = useMsal();
  // 获取当前活跃账户（代替v1的getUser()）
  const activeAccount = instance.getActiveAccount();

  // 提取自定义声明，用可选链避免报错
  const myCustomClaim = activeAccount?.idTokenClaims?.myCustomClaim;

  return (
    <div>
      {myCustomClaim && <p>我的自定义声明：{myCustomClaim}</p>}
    </div>
  );
}

如果你还在使用MSAL v1，可以用clientApplication.getUser()替代getActiveAccount()，然后通过user.idTokenClaims.myCustomClaim获取声明。

2. 从Access Token中提取声明（如果自定义声明在Access Token里） #

如果你的自定义声明是配置在Access Token中的，你需要先获取到Access Token，再解析它的内容。可以用acquireTokenSilent获取token，再用jwt-decode库解析（这个库很常用，你可以先通过npm安装它）：

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

async function getCustomClaimFromAccessToken() {
  const { instance } = useMsal();
  const activeAccount = instance.getActiveAccount();

  try {
    const response = await instance.acquireTokenSilent({
      account: activeAccount,
      scopes: ["https://your-b2c-tenant.onmicrosoft.com/api/scope"], // 替换成你的API范围
    });

    // 解析Access Token获取声明
    const accessTokenClaims = jwtDecode(response.accessToken);
    const myCustomClaim = accessTokenClaims.myCustomClaim;
    return myCustomClaim;
  } catch (error) {
    // 处理静默获取失败的情况，比如需要重新登录
    console.error("获取Access Token失败：", error);
  }
}

3. 关键注意事项 #

• 确保你在Azure AD B2C的用户流/自定义策略中，已经把自定义声明添加到了ID Token或Access Token的输出声明里，否则这些声明不会出现在token中。
• 用可选链操作符?.可以避免因为用户未登录（activeAccount为null）导致的代码报错。
• MSAL v2已经不再推荐使用getUser()，而是用getActiveAccount()来获取当前登录的账户，建议尽量升级到v2版本。

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