React开发Teams标签页应用：如何获取Graph API的accessToken？

在已集成@microsoft/teams-js的React Teams标签页应用中，可通过以下步骤获取访问Microsoft Graph的accessToken：

1. 确保Teams SDK完成初始化 #

调用任何Teams API前，必须先完成SDK初始化，通常在组件的useEffect中执行：

import { app } from '@microsoft/teams-js';
import { useEffect } from 'react';

function TeamsTabComponent() {
  useEffect(() => {
    app.initialize().then(() => {
      console.log('Teams SDK初始化完成');
      // 后续可调用获取token的方法
    }).catch(error => {
      console.error('SDK初始化失败:', error);
    });
  }, []);

  // 其他组件逻辑
}

2. 调用getAuthToken获取Graph Access Token #

使用Teams SDK的authentication.getAuthToken方法，传入Microsoft Graph的资源端点：

import { authentication } from '@microsoft/teams-js';

const getGraphAccessToken = async () => {
  try {
    const token = await authentication.getAuthToken({
      resources: ['https://graph.microsoft.com']
    });
    console.log('Graph Access Token:', token);
    return token;
  } catch (error) {
    console.error('获取token失败:', error);
    // 处理错误场景，比如用户未授权、权限不足等
    throw error;
  }
};

• resources参数指定目标资源，这里填Graph API的官方端点即可，SDK会自动匹配对应权限的token。
• 需确保你的Azure AD应用注册中已添加所需的Microsoft Graph委托权限（比如User.Read）。

3. 使用Token调用Microsoft Graph API #

拿到token后，通过HTTP请求调用Graph API，例如获取当前用户基本信息：

const fetchUserInfo = async () => {
  const token = await getGraphAccessToken();
  const response = await fetch('https://graph.microsoft.com/v1.0/me', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  
  if (!response.ok) {
    throw new Error('获取用户信息失败');
  }
  
  const userData = await response.json();
  console.log('用户信息:', userData);
  return userData;
};

关键注意事项 #

• Azure AD应用注册必须配置正确的重定向URI，与Teams应用的配置一致。
• 部分高权限的Graph API需要租户管理员提前授权。
• 开发环境中需确保Teams客户端正确加载应用，避免跨域或初始化失败问题。

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