如何在msal-react中为OBO流指定受众以解决AADSTS500131错误？

AADSTS500131错误的核心原因是前端获取的令牌受众（aud字段）与中间层应用的客户端ID不匹配——OBO流程要求前端令牌必须以中间层应用的客户端ID作为受众，这样中间层才能用该令牌请求下游API的令牌。

以下是在msal-react中指定受众的两种有效方法：

1. 初始化MSAL实例时配置默认受众 #

在创建PublicClientApplication实例的配置中，将默认请求范围设置为中间层应用的客户端ID对应的范围（格式为api://{中间层应用客户端ID}/.default）：

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
  auth: {
    clientId: "你的前端应用客户端ID",
    authority: "https://login.microsoftonline.com/你的Azure AD租户ID",
    redirectUri: "前端回调地址（如http://localhost:3000）",
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  }
};

// 初始化时指定默认请求范围
const pca = new PublicClientApplication(msalConfig);
pca.setDefaultRequest({
  scopes: ["api://中间层应用客户端ID/.default"]
});

2. 获取令牌时显式指定受众（推荐） #

在调用acquireTokenSilent或acquireTokenPopup获取令牌时，直接在请求参数的scopes数组中传入中间层应用的范围，这种方式更灵活，适合多场景需求：

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

const MyComponent = () => {
  const { instance, accounts } = useMsal();

  const fetchTokenForOBO = async () => {
    const tokenRequest = {
      account: accounts[0], // 当前登录用户的账户信息
      scopes: ["api://中间层应用客户端ID/.default"] // 明确指定受众对应的范围
    };

    try {
      // 优先静默获取令牌
      const response = await instance.acquireTokenSilent(tokenRequest);
      return response.accessToken;
    } catch (error) {
      // 需要交互时弹出登录窗口
      if (error instanceof InteractionRequiredAuthError) {
        const response = await instance.acquireTokenPopup(tokenRequest);
        return response.accessToken;
      }
      throw error;
    }
  };

  // 组件逻辑...
};

关键注意事项 #

• 确保Azure AD中已配置前端应用对中间层应用的委派权限：在中间层应用的API权限设置中，添加前端应用的委派权限并完成管理员同意操作。
• 验证令牌受众：获取令牌后，可通过JWT解析工具查看令牌的aud字段，确认其值与中间层应用的客户端ID完全一致。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams