React 中的 MS 身份验证

Question

我正在开发一个 MS Teams 应用程序，该应用程序通过 Graph-API 将新文件上传到连接的 Teams OneDrive，但我无法为我的应用程序进行身份验证。

我在该主题上找到的文档根本没有提到 react，因此我无法使身份验证正常工作（因为我对 javascript 非常陌生并且需要一个清晰的示例）。如果我可以简单地在某处找到一个有效的授权令牌，那么我只需对其进行硬编码，它就可以解决问题。

否则，我如何通过 Graph-API 获得用户/应用身份验证以将我的文件上传到 OneDrive？

这是我的代码：

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: {}
    }
  }

  componentDidMount() {
    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:/", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
  }
  
  render() {  
      return (     
        <form>
          <div>
            <label>Select file to upload</label>
            <input type="file"></input>
          </div>
          <button type="submit">Upload</button>
        </form>     
      );
    }
  }

export default Tab;

我的 fetch 似乎工作正常，除了它给我的身份验证错误。

Answer 1

按照步骤here。

首先，您需要在 Azure Active Directory 中注册一个应用程序并生成一个客户端密码。然后，您可以在对https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token 的 POST 请求中使用 app id 和 client secret 来获取授权令牌。

然后，您可以在代码中使用此令牌代替 {token}。

如果您还没有，可以通过Microsoft 365 Developer Program 注册沙盒 Office 365 租户进行测试。