React中使用MSAL获取的Access Token缺失Group IDs问题排查

在React Web客户端使用MSAL获取Access Token时，希望Token中包含组ID，相关配置及现象如下：

代码实现 #

const accessToken = await instance.acquireTokenSilent({
    scopes: [
      "https://graph.windows.net/Group.Read.All",
      "https://graph.windows.net/User.Read",
    ],
    account: accounts[0],
  })
).accessToken;

Azure配置 #

1. 已为应用注册授予Microsoft Graph API的Group.Read.All (delegated)权限
2. 在Token配置中添加groups作为可选声明，应用manifest关键配置：

{
    "accessTokenAcceptedVersion": 2,
    (...)
    "groupMembershipClaims": "SecurityGroup",
    (...)
    "optionalClaims": {
        "accessToken": [
            {
                "name": "groups",
                "source": null,
                "essential": false,
                "additionalProperties": []
            }
        ],
    },
    (...)
}

现象 #

• 成功获取到有效的Access Token，但仅包含scp声明，缺失groups声明：

{
   "scp": "Group.Read.All User.Read"
}

• MSAL获取的id_token中包含组ID，但Access Token中没有

核心原因 #

你请求的是Microsoft Graph官方API的Access Token，这类Token的声明字段由Microsoft Graph服务端控制，Azure AD的可选声明配置仅对自定义API资源的Access Token生效，对微软官方API的Token不产生影响。同时groupMembershipClaims配置仅作用于ID Token，不会修改第三方API的Access Token内容。

解决方案 #

方案1：直接使用ID Token中的组信息

既然你已经能在id_token中获取到组ID，可直接提取该字段在前端业务中使用。

方案2：调用Microsoft Graph API获取组信息

利用已授权的Group.Read.All权限，调用Graph接口获取用户完整的组列表：

const fetchUserGroups = async (accessToken) => {
  const response = await fetch("https://graph.microsoft.com/v1.0/me/memberOf", {
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });
  const result = await response.json();
  // result.value 包含组ID、名称、类型等详细信息
  return result.value;
};

如果需要获取嵌套的组（用户所在组的子组），可调用/me/transitiveMemberOf接口。

方案3：改用自定义API实现Token包含组信息

若必须在Access Token中携带组ID，需将你的服务注册为Azure AD中的自定义API资源，客户端请求该自定义API的Access Token时，Azure AD会将配置的groups可选声明加入Token中。

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