Angular + MSAL：用户无法获取Entra ID后端应用角色问题

核心问题 #

首次获取的令牌未包含后端应用角色，是因为登录请求未明确指定后端应用的作用域，导致Entra ID不会在令牌中注入该应用的角色声明。以下是具体修复步骤：

1. 调整登录请求，添加后端应用作用域 #

登录时需将后端应用的作用域（即environment.scope）加入请求的scopes列表，确保首次获取的令牌包含后端角色：

// 示例：登录重定向时指定作用域
this.msalService.loginRedirect({
  scopes: ['user.read', environment.scope] // 同时包含Graph和后端的作用域
});

也可以在MSAL初始化配置中设置默认作用域，避免每次登录都手动指定：

const msalConfig: Configuration = {
  auth: {
    clientId: '你的前端应用ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: '前端回调地址',
    scopes: ['user.read', environment.scope] // 默认请求的作用域集合
  }
};

2. 修正MSAL拦截器的资源映射配置 #

当前protectedResourceMap的配置存在错误（用user.read作为键是无效的），需将后端API的基础URL映射到对应的作用域，确保拦截器调用后端时自动获取正确令牌：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();
    // Graph接口映射到user.read作用域
    protectedResourceMap.set(environment.graphUrl + '/me/memberOf', ['user.read']);
    // 后端API的基础URL映射到后端作用域
    protectedResourceMap.set('https://你的后端API域名/', [environment.scope]);
    return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap,
    };
}

3. 确认Entra ID的权限与角色配置 #

• 后端应用的角色需为应用角色（Application Roles），且已正确分配给目标用户/组
• 前端应用已添加后端应用的委托权限（Delegated Permissions），若权限需要管理员同意，需完成管理员授权操作

4. 验证令牌内容 #

登录后可通过以下代码主动获取包含后端角色的令牌，解析后检查roles声明是否存在：

const account = this.msalService.instance.getActiveAccount();
if (account) {
  this.msalService.acquireTokenSilent({
    account: account,
    scopes: [environment.scope]
  }).then(response => {
    // 解析accessToken，查看是否包含roles字段
    const payload = JSON.parse(atob(response.accessToken.split('.')[1]));
    console.log('令牌角色:', payload.roles);
  });
}

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