如何在React JS应用中集成Outlook Calendar API并解决令牌错误？

从错误截图显示的invalid_token和401 Unauthorized状态码来看，这确实是令牌相关的问题，以下是具体的排查和解决方法：

• 检查令牌权限范围：调用https://graph.microsoft.com/v1.0/me/events接口需要至少Calendars.ReadWrite权限。获取令牌时，scope参数必须包含该权限，示例参数：

  scope=Calendars.ReadWrite offline_access
  

  若采用动态权限申请，需确认用户已同意该权限。

• 验证令牌核心字段：解析JWT令牌（可使用本地JWT解析工具），检查以下关键字段：

  • aud（受众）：必须为https://graph.microsoft.com，否则令牌并非针对Microsoft Graph API生成
  • iss（颁发者）：需匹配https://login.microsoftonline.com/{tenant_id}/v2.0，确保租户ID无误
  • exp（过期时间）：确认令牌未超出有效期

• 核对令牌获取请求参数：

  • 确保grant_type正确：授权码流用authorization_code，刷新令牌用refresh_token
  • client_id、tenant_id需与Azure AD中注册的应用信息完全一致
  • 授权码流中的code参数只能使用一次，若重复使用会导致令牌无效

• 修正请求头格式：调用Graph API时，Authorization请求头必须严格遵循Bearer {token}格式（注意Bearer后有空格），React中的示例代码：

  const response = await fetch('https://graph.microsoft.com/v1.0/me/events', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(eventData)
  });
  

• 检查Azure AD应用注册配置：

  • 在Azure AD后台为应用添加Microsoft Graph的Calendars.ReadWrite权限，并完成管理员同意（针对租户内应用）
  • 确认应用的重定向URI与React应用中的配置完全匹配，避免授权码获取环节出错

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