0

我一直在为同样的问题苦苦挣扎一段时间,我正在尝试通过 Graph-API 将文件上传到我的 MS Teams OneDrive,但我没有授权。

到目前为止,阅读文档以从 Microsoft 获取我的令牌对我没有任何帮助,因为我是 Javascript 和 React 的新手,所以我很难让它正常工作。谁能给我一个示例,说明获取访问 Graph-API 所需的授权令牌的代码是什么样的?

我已经注册了我的 Microsoft 应用程序并制作了一个我需要的客户端密码以获取令牌。

先感谢您!

我的代码:

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));
  }

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

    var raw = "Fetch my token";

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

    fetch("https://login.microsoftonline.com/openimstest/oauth2/v2.0/c7094fc6-9d30-429d-bb66-dd389295b426", 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;

PS 我知道我实际上并没有在我的页面上使用文件输入,但我想一开始尽可能简单,我很高兴现在通过 Graph-API 成功上传文件。再次感谢您!

编辑:我试图用来获取令牌的 fetch:

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: 'GET',
      grant_type: 'Unsure where to find my client_credentials',
      client_id: 'my client-id',
      scope: 'https://graph.microsoft.com/.default',
      client_secret: 'my client-secret',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    }

    fetch("https://login.microsoftonline.com/openimstest/oauth2/v2.0/token", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
  }

我不确定在哪里可以找到我的 client_credentials 或放什么。此外,我尝试使用的 fetch 可能还有其他问题。

4

3 回答 3

1

看看这个Single sign-on (SSO) support for tabs

按照文档创建应用程序注册和设置公开 API 部分。

在您的应用程序中为所有这些文件添加路由。对于文件夹结构,您可能会使用与我在下面共享的应用程序中提到的相同的路线。

<Route exact path="/signin" component={SignInPage} />
<Route exact path="/signin-simple-start" component={SignInSimpleStart} />
<Route exact path="/signin-simple-end" component={SignInSimpleEnd} />

接下来看看这个文件夹结构->登录。在这里你会看到三个文件

  1. sign-in.tsx -> 这个文件路径,你需要在清单中给出。它具有启动身份验证流程的按钮。同样仅在此文件中,您需要提供身份验证成功时要显示的页面的路由。

    successCallback: () => { history.push("/yourPage"); }

  2. sign-in-start.tsx -> 这里需要调用认证端点。所以在我分享的应用程序中,我们有 C# 后端,从那里我们得到 URL 端点line 22并将其推送到历史记录中。您可以做的是直接创建该 URL(见下文)并将其分配给变量结果(将第 22 行到第 24 行的代码替换为此)。

var result = https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize?client_id=<client_id>&response_type=id_token token&redirect_uri=https://<app-domain>/signin-simple-end&response_mode=fragment&scope=<required-scope>&state=12345&nonce=abcde&login_hint=<user-principal-name>;

document.location.href = result;

  1. sign-in-end.tsx -> 在这个文件中,我们获得了我们在上一步中询问的所有令牌。因此,为了获得访问令牌,您需要添加此代码

    if (hashParams["access_token"]) { localStorage.setItem("auth.result", JSON.stringify({ accessToken: hashParams["access_token"] })); }

useEffect我们获得其他令牌的地方。上面的代码检查我们是否获得了 access_token 并localStorage稍后设置它,您可以使用localStorage.getItem("auth.result").

您可能需要进行少量操作localStorage.getItem("auth.result")才能获得令牌。

上述方法为我们获取了委托的 Graph API 权限,因此您需要根据您的图调用在您的应用中授予委托权限。

于 2021-09-20T18:55:48.063 回答
0

微软专门为在单页应用程序中获取令牌创建了一个库。它被称为@azure/MSAL-browser他们甚至专门为反应做了一个包。msal-react此页面显示了如何在反应中使用它的入门。该软件包将为您处理令牌请求。

没有客户端凭据流

您可以按照以下步骤使用客户端密码执行此操作。在继续之前,请注意,您不应在 SPA Reactjs 应用程序上使用客户端凭据流,因为无法保护客户端机密。

另一个答案应该留在这个陈述中。让我解释一下。客户端凭据流适用于在没有用户交互的情况下运行服务器端的应用程序。在客户端应用程序中使用此流程的任何人都在错误地使用它!所以我认为我们不应该教育人们如何可能滥用身份验证流程。

于 2021-09-17T20:56:14.053 回答
-1

您可以按照以下步骤使用客户端密码执行此操作。在继续之前,请注意,您不应在 SPA Reactjs 应用程序上使用客户端凭据流,因为无法保护客户端机密。

请注意,如果您必须在那里使用客户端密码,那么您应该将与 Graph 的交互删除到服务端,然后使用其他方式保护您的应用程序,请参阅 - 本教程:在Nodejs的 Node.js 控制台应用程序中调用 Microsoft Graph API安全守护程序服务身份验证

用于使用 Client Secret 获取访问令牌。

  1. 在 Azure AD 上添加所需的应用程序权限,以将文件上传到 onedrive。在这种情况下Files.ReadWrite.Al。此权限需要管理员批准。 在此处输入图像描述

  2. 使用以下获取格式的请求从 Azure AD 获取访问令牌。

    curl --location --request GET 'https://login.microsoftonline.com/tenant-id/oauth2/v2.0/token'
    --header 'Content-Type: application/x-www-form-urlencoded'
    - -data-urlencode 'grant_type=client_credentials'
    --data-urlencode 'client_id=client-id'
    --data-urlencode 'scope=https://graph.microsoft.com/.default'
    --data-urlencode 'client_secret=客户机密'

正如我所说,当在单页 Reactjs 应用程序中使用时,客户端密码将不安全。

更好的选择是使用身份验证代码流,这在您的 SPA 案例中会更安全。按照此操作获取 reactjs教程:登录用户并使用身份验证代码流从 React 单页应用程序 (SPA) 调用 Microsoft Graph API

这将只需要:

  1. Files.ReadWrite在 AAD 上添加为委派权限
  2. 使用有权访问团队团队并以他们身份进行身份验证的用户登录。
  3. 调用PUT /groups/{group-id}/drive/items/{item-id}/content,其中组 id 是团队 id。
于 2021-09-15T04:41:45.533 回答