React中MS Teams应用身份验证 调用Graph API上传文件到OneDrive

• 直接使用Graph Explorer登录你的工作/学校账号，在界面的「访问令牌」板块复制生成的有效令牌，替换代码里{token}占位符即可临时调试上传逻辑，该令牌默认包含OneDrive文件读写权限，仅可用于本地测试，有效期约1小时，禁止在生产环境硬编码使用。

前置配置 #

• 进入Azure AD应用管理页，为你的Teams关联应用添加Files.ReadWrite.All委托权限，按需调整权限粒度，若仅需要访问当前Teams关联的站点可配置更精准的Sites.ReadWrite.Selected权限。
• 打开Teams应用清单文件，添加webApplicationInfo配置项，填入你的Azure AD应用ID与资源地址https://graph.microsoft.com。

修改后的完整代码 #

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {},
      accessToken: ""
    }
  }

  async componentDidMount() {
    // 初始化Teams SDK
    await microsoftTeams.app.initialize();
    // 获取当前用户授权令牌
    const token = await microsoftTeams.authentication.getAuthToken({
      resources: ["https://graph.microsoft.com"]
    });
    this.setState({accessToken: token});

    var myHeaders = new Headers();
    myHeaders.append("Content", "text/plain");
    myHeaders.append("Content-Type", "text/plain");
    myHeaders.append("Authorization", `Bearer ${token}`);

    var raw = "This works";

    var requestOptions = {
      method: 'PUT',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    }

    fetch("https://graph.microsoft.com/v1.0/sites/OpenSesameTest/Shared%20Documents/General/FileB.txt:/content", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
  }
  
  // 带文件选择的上传逻辑可按如下实现
  handleFileUpload = async (e) => {
    e.preventDefault();
    const fileInput = e.target.querySelector('input[type="file"]');
    const file = fileInput.files[0];
    if (!file) return;

    const myHeaders = new Headers();
    myHeaders.append("Content-Type", file.type);
    myHeaders.append("Authorization", `Bearer ${this.state.accessToken}`);

    const requestOptions = {
      method: 'PUT',
      headers: myHeaders,
      body: file,
      redirect: 'follow'
    };

    // 4MB以下文件直接用该接口上传
    const uploadUrl = `https://graph.microsoft.com/v1.0/sites/OpenSesameTest/Shared%20Documents/General/${file.name}:/content`;
    fetch(uploadUrl, requestOptions)
      .then(res => res.json())
      .then(res => console.log("上传成功", res))
      .catch(err => console.log("上传失败", err));
  }
  
  render() {  
      return (     
        <form onSubmit={this.handleFileUpload}>
          <div>
            <label>Select file to upload</label>
            <input type="file"></input>
          </div>
          <button type="submit">Upload</button>
        </form>     
      );
    }
  }

export default Tab;

• 你原先的Graph接口地址缺少末尾的/content路径，会导致请求错误，上述代码已修正。
• 单个文件大小超过4MB时，需要调用Graph的分片上传接口，不可直接用当前PUT请求。
• 生产环境建议从Teams上下文获取当前站点ID替换硬编码的OpenSesameTest，避免跨站点访问错误。

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