如何让React应用获取的Azure Token包含应用角色（App Roles）？

我之前也碰到过一模一样的问题，折腾了好一阵子才搞定，其实核心是要把Azure AD的配置和前端请求的参数对应起来，一步步来：

1. 确认客户端应用的API权限配置 #

首先，你的React应用（Azure里的客户端应用注册）必须添加对定义了App Roles的资源应用的权限——如果App Roles就是在这个React应用自己的注册里定义的，那就是添加对自身的权限：

• 进入Azure门户的「应用注册」，找到你的React应用
• 切换到「API权限」页面，点击「添加权限」→「我的API」，选中你的应用
• 在「委派权限」里，勾选你需要的权限（比如User.Read），同时确保包含能获取角色的权限（如果是自定义App Roles，这里会显示对应的权限项，或者直接选.default）
• 点击「添加权限」后，一定要点击「授予管理员同意」（这个步骤必须由Azure AD管理员操作，否则普通用户登录后拿不到角色）

2. 调整前端登录请求的Scope参数 #

用react-microsoft-plugin的时候，默认的scope可能只请求了微软Graph的权限，这就导致返回的Token里没有你自定义的App Roles。你需要明确指定请求你的应用的资源范围：

// 导入需要的模块
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';

// 初始化配置
const msalConfig = {
  auth: {
    clientId: '你的应用注册Client ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: '你的应用回调地址'
  }
};

const pca = new PublicClientApplication(msalConfig);

// 登录请求时指定正确的scope
const loginRequest = {
  scopes: ['api://你的应用注册Client ID/.default']
};

// 登录调用示例
pca.loginPopup(loginRequest)
  .then(response => {
    // 获取Access Token（注意：App Roles通常在Access Token里，不是ID Token）
    const accessToken = response.accessToken;
    // 可以用jwt-decode库解码Token查看roles
    const decodedToken = jwtDecode(accessToken);
    console.log('用户的App Roles:', decodedToken.roles);
  })
  .catch(error => {
    console.error('登录错误:', error);
  });

这里的api://{你的应用ID}/.default会让Azure AD返回包含所有已配置权限（包括App Roles）的Access Token。

3. 确认角色分配的正确性 #

再检查一遍Azure AD的「企业应用程序」里的角色分配：

• 找到你的应用对应的企业应用（注意：应用注册和企业应用是两个不同的实体，角色分配必须在企业应用里操作）
• 进入「用户和组」页面，确认目标用户/组已经被分配了对应的App Roles，且状态是「已分配」

4. 验证Token内容 #

拿到Token后，用微软官方的Token解码工具jwt.ms解码，重点看这两个字段：

• aud（受众）：必须是你的应用的Client ID或者自定义的API URI，不能是微软Graph的地址（比如https://graph.microsoft.com）
• roles：如果配置正确，这里会列出用户被分配的所有App Roles

如果还是没看到roles字段，先检查是否是请求的ID Token——ID Token主要用于身份验证，App Roles一般不会出现在这里，你需要获取的是Access Token。

内容的提问来源于stack exchange，提问作者Mathias B.