如何从 Angular 获取 OneDrive API 的访问令牌

我有一个 Angular 应用程序，可以让用户上传文件。我计划将这些文件存储在OneDrive using OneDrive API（我为应用程序设置的 OneDrive 帐户）。

我知道我们必须使用OAuth2.0从网络服务器获取访问令牌并使用该令牌作为不记名令牌以使用 API 管理 OneDrive 中的文件。

如何在我的 Angular 应用程序中获取此访问令牌？

我需要获取访问令牌而不重定向到登录页面（无需用户交互）。 但在后台。

我尝试使用以下 URL 在 POSTMAN 中获取访问令牌。

https://login.microsoftonline.com/{Tenant_ID}/oauth2/token

我努力了，

• 客户端凭证流。
• 资源所有者流程。
• 隐式流。

Angular 中的隐式流函数 （我已经硬编码了要测试的 URL 和值）

    getToken() {
    var msFormData = new FormData();
    msFormData.append('grant_type', 'client_credentials');
    msFormData.append('client_id', 'client_id');
    msFormData.append('client_secret', 'client_secret');
    msFormData.append('resource', 'https://graph.microsoft.com');

    return this.http.post("https://login.microsoftonline.com/{id}/oauth2/token", msFormData);
}

这三个人都在工作并且能够获得令牌。 当我在 Angular 中尝试隐式流时，出现 CORS 错误。 （无论如何我都不能使用隐式，因为客户端秘密会被暴露）。

当尝试使用Resource_owner流程我得到了SPO license错误信息。如果我在哪里使用user flow并检索访问权限 来自重定向 URL 的令牌。我可以使用 Graph API 来实现 获取驱动器项目的访问令牌。所以我知道我不需要 SPO 许可证。（也许）

如果这不是最好的方法，我可以在后端创建一个服务来获取访问令牌/刷新令牌并使用 API 将其提供给 Angular 应用程序，以便用户可以从浏览器上传文件。但是从上述流程获得的访问令牌给了我一个 SPO 错误。

UPDATE:我发现要访问一个驱动器，我们需要一个委派访问令牌。这与 client_credential 流程有何不同？以及如何获得它们？

要在没有用户交互的情况下获取有效的图形令牌，您可以使用以下请求。但请注意，这意味着在您的客户端代码中存储了客户端密钥。这样，用户就可以请求有效的应用程序令牌，并可以访问应用程序范围内允许的任何内容。

因此，就像名称已经说明的那样，客户端密钥应该保密，并且不应在客户端站点上的代码中使用。更好的是拥有一个自己的 REST api，它发送以下请求并将令牌返回到您的角度应用程序。如何保护此 api 的安全取决于您。

非交互式用户令牌

var settings = {
  "async": true,
  "crossDomain": true,
  "url": `https://login.microsoftonline.com/${tenantId}/oauth2/token`,
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache"
  },
  "data": {
    "client_id": `${clientId}`,
    "client_secret": ${clientSecret}``,
    "resource": "https://graph.microsoft.com/",
    "username": `${username}`,
    "password": `${password}`,
    "grant_type": "password",
    "scope": "openid"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

不过，您可以将上述请求转换为您的具体语言。但作为一项特殊服务，我将上述代码重写为您给定的代码（未经测试）：

getToken() {
    var msFormData = new FormData();
    msFormData.append('clientId', `${clientId}`);
    msFormData.append('client_secret', `${clientSecret}`);
    msFormData.append('resource', 'https://graph.microsoft.com');
    msFormData.append('username', `${username}`);
    msFormData.append('password', `${password}`);
    msFormData.append('grant_type', 'password');
    msFormData.append('scope', 'openid');
    
    return this.http.post(`https://login.microsoftonline.com/${tenantId}/oauth2/token`, msFormData);
}

非交互式应用程序令牌

var settings = {
  "async": true,
  "crossDomain": true,
  "url": `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache",
  },
  "data": {
    "grant_type": "client_credentials",
    "scope": "https://graph.microsoft.com/.default",
    "client_id": `${clientId}`,
    "client_secret": `${clientSecret}`
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

您还可以直接使用变量本身，而不是使用仅包含变量的反引号字符串。但我选择这种风格是为了更好地强调这些参数必须由您自己提供。