Teams Tab（SPA）应用获取Microsoft Graph应用权限令牌遇403错误求助

核心问题：SPA无法直接使用应用权限 #

你开发的Teams Tab是单页应用（SPA），属于公共客户端，这类应用无法安全存储客户端密钥（Client Secret），因此Azure AD不允许SPA直接使用应用权限（Application Permissions）（比如Chat.Read.All、CallRecords.Read.All）。

你当前用的是MSAL.js的PublicClientApplication，走的是授权码流（PKCE），这是委托权限的认证流程，令牌里只会包含用户授权的委托权限，应用权限不会被纳入，所以调用需要应用权限的Graph API时会返回403。

正确解决方案：通过后端服务中转应用权限请求 #

SPA无法直接获取应用权限的令牌，必须借助后端服务来实现：

1. 搭建后端API服务
   用服务器端技术（如ASP.NET Core、Node.js、Python Flask等）搭建一个中间API，这个服务可以安全存储Azure AD应用的客户端密钥。

2. 为后端配置应用权限
   在Azure AD应用注册中，给你的应用添加Chat.Read.All、CallRecords.Read.All等应用权限，并确保已授予管理员同意（在"API权限"页面确认权限状态为"已授予[租户名]的管理员同意"）。

3. 后端使用客户端凭据流获取令牌
   后端服务通过客户端凭据流向Azure AD请求Graph访问令牌，示例请求（以Node.js为例）：

   const axios = require('axios');
   
   async function getGraphToken() {
     const tenantId = '你的租户ID';
     const clientId = '你的应用客户端ID';
     const clientSecret = '你的应用客户端密钥';
     const tokenEndpoint = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;
   
     const response = await axios.post(tokenEndpoint, new URLSearchParams({
       client_id: clientId,
       client_secret: clientSecret,
       scope: 'https://graph.microsoft.com/.default',
       grant_type: 'client_credentials'
     }));
   
     return response.data.access_token;
   }
   

4. SPA调用后端API
   前端SPA不再直接调用Microsoft Graph，而是通过AJAX请求你的后端API，后端拿到应用权限令牌后调用Graph API，再将结果返回给SPA。

额外注意事项 #

• 部分Graph API操作没有对应的委托权限，只能通过应用权限实现，这种情况下后端中转是唯一可行的方案。
• 确保后端服务的客户端密钥妥善保管，不要暴露给前端。

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