使用msal.js对接Azure AD B2C登录后如何获取JWT令牌

注意：useMsal返回的实例默认不会直接存储访问令牌，登录流程仅会下发ID令牌用于身份校验，访问接口所需的JWT访问令牌需要主动调用令牌获取接口拉取。

实现步骤 #

1. 先从msal基础库导入交互异常类用于异常兼容
2. 配置你需要访问的资源对应的scope权限，调用静默获取令牌接口，失败后自动降级为Redirect交互模式拉取令牌

完整参考代码如下：

import { useEffect } from "react";
import { MsalProvider, MsalAuthenticationTemplate, useMsal, useAccount } from "@azure/msal-react";
import { InteractionRequiredAuthError } from "@azure/msal-browser";

// 替换为你实际业务需要的权限范围，和Azure应用注册的配置保持一致
const tokenRequest = {
  scopes: ["User.Read", "你的自定义API Scope"]
}

function YourProtectedComponent() {
  const { instance } = useMsal();
  const account = useAccount(); // 自动获取当前已登录的账号信息

  const getAccessToken = async () => {
    if (!account) return null;
    try {
      // 优先从本地缓存拉取有效令牌，缓存过期会自动静默刷新
      const response = await instance.acquireTokenSilent({
        ...tokenRequest,
        account: account
      });
      // response.accessToken 就是你需要的JWT格式访问令牌
      const jwtToken = response.accessToken;
      // 后续可以把令牌放到请求头里调用后端接口
      return jwtToken;
    } catch (error) {
      // 静默获取失败需要用户交互授权，直接走Redirect模式拉取令牌
      if (error instanceof InteractionRequiredAuthError) {
        instance.acquireTokenRedirect({
          ...tokenRequest,
          account: account
        });
      }
      console.error("令牌获取失败：", error);
      return null;
    }
  }

  // 组件挂载时触发令牌获取，也可以在调用接口前按需触发
  useEffect(() => {
    getAccessToken();
  }, [instance, account])

  return <div>受保护的业务内容</div>
}

注意事项 #

• 代码中的scopes必须替换为你实际访问资源对应的权限，如果你要调用自己的后端接口，填写你在Azure应用注册中暴露的API Scope即可
• MsalAuthenticationTemplate的Redirect模式已经自动处理了登录回调后的令牌缓存逻辑，不需要额外手动处理回调结果
• 如果需要JWT格式的ID令牌，可以从response.idToken直接获取

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