MSAL.js无法获取带指定scope的令牌调用Microsoft Graph API问题

你遇到的scope被忽略的问题是MSAL跨资源令牌请求的常见问题，按照以下步骤调整即可解决：

核心原因 #

MSAL的访问令牌缓存按资源受众(aud) 隔离，你首次登录时请求的是自有应用的.default scope，拿到的令牌受众是你的应用ID；而调用Graph需要的令牌受众是https://graph.microsoft.com，属于完全独立的两类令牌。当你在Graph的令牌请求中混合了OIDC scope和不同资源的scope时，MSAL会自动fallback到当前会话已有的默认令牌，导致指定的Graph scope被忽略。

调整步骤 #

• 第一步：修正graphRequest的scope配置，仅保留Graph相关的权限，移除无关的OIDC scope：

export const graphRequest: SilentRequest = {
  scopes: ["https://graph.microsoft.com/People.Read"],
};

openid、profile、offline_access这类OIDC scope仅需要在首次登录请求时传入即可，不需要在获取特定资源访问令牌时重复传入。

• 第二步：完善fetchGraph方法，增加静默请求失败后的交互式授权逻辑，处理用户未同意Graph权限的场景：

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

async fetchGraph<T>(input: RequestInfo, init?: RequestInit): Promise<T> {
  const activeAccount = msalInstance.getActiveAccount();
  try {
    // 尝试静默获取Graph专属令牌
    const tokenResponse = await msalInstance.acquireTokenSilent({ 
      ...graphRequest, 
      account: activeAccount! 
    });
    const resp = await fetch(`https://graph.microsoft.com/v1.0/me/people`, { 
      ...init, 
      ...this.authorizationHeader(tokenResponse.accessToken) 
    });
    if (resp.ok) {
      return resp.json() as T;
    }
    throw new Error(`请求失败，状态码：${resp.status}`);
  } catch (error) {
    // 静默失败说明需要用户交互授权Graph权限
    if (error instanceof InteractionRequiredAuthError) {
      await msalInstance.acquireTokenRedirect({
        ...graphRequest,
        account: activeAccount!
      });
      // 重定向回来后重新执行静默请求即可拿到令牌
      return this.fetchGraph(input, init);
    }
    throw error;
  }
}

• 第三步：确认Azure应用注册配置正确：
  你配置的People.Read必须是委托权限，不能是应用程序权限，前端单页应用属于公共客户端，仅支持使用委托权限；同时确认该权限已经完成管理员同意，或者租户允许用户自行同意该权限。

• 可选优化：如果希望避免调用Graph时触发二次授权，可以将Graph scope加入首次登录的请求中，用户登录时就一次性完成所有权限同意：

export const loginRequest: RedirectRequest = {
  scopes: [`${msalConfig.auth.clientId}/.default`, "https://graph.microsoft.com/People.Read"],
};

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