如何从 Angular 获取 OneDrive API 的访问令牌 [英] How to get the Access Token for OneDrive API from Angular

问题描述

我有一个 Angular 应用程序，可以让用户上传文件.我计划使用 OneDrive API(我为应用程序设置的 OneDrive 帐户)将这些文件存储在 OneDrive 中.

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

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

<块引用>

我需要在不重定向到登录页面的情况下获取访问令牌(无需用户交互).但在后台.

我尝试了以下 URL 来获取 POSTMAN 中的访问令牌.

<块引用>

https://login.microsoftonline.com/{Tenant_ID}/oauth2/令牌

我试过了，

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

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');返回 this.http.post(https://login.microsoftonline.com/{id}/oauth2/token", msFormData);}

所有三个都在工作并且能够获得令牌.当我在 Angular 中尝试隐式流时，我收到了 CORS 错误.(无论如何我都不能使用隐式，因为客户端机密会被暴露).

<块引用>

尝试使用 Resource_owner 流程时，我获得了 SPO 许可证错误信息.如果我使用 user flow 并检索访问权限来自重定向 URL 的令牌.我可以使用 Graph API访问令牌以获取驱动器项目.所以我知道我不需要 SPO许可证.(也许)

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

---

更新:我发现要访问一个驱动器，我们需要一个委派的访问令牌.这与 client_credential 流有何不同?以及如何获得它们?

解决方案

委托的令牌一般称为用户令牌，你通过客户端凭证流得到的令牌是一个应用令牌.它们之间唯一的区别是是否有用户登录.

如果要获取委托令牌，必须登录用户.是否是 交互式登录 或 非交互式登录，用户必须登录！

此外，您需要将 /tenant id 端点更改为 /common 端点以避免租户级别的登录.

I have an Angular application that lets users upload files. I am planning to store these files in the OneDrive using OneDrive API (the OneDrive account I have set up for the application).

I am aware that we have to use OAuth2.0 to get the access token from the webserver and use that token as a bearer token to use the API to manage my files in OneDrive.

How can I get this access token in my Angular app?

I need to get the access token without redirecting to the login page(Without interaction from the user). but in the background.

I tried the following URL to get the access token in POSTMAN.

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

I have tried,

• Client credential flow.
• Resource owner flow.
• Implicit flow.

Function for Implicit flow in Angular (I have hardcoded the URL and values to test)

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

All three are working and able to get the token. When I tried implicit flow in Angular I am getting a CORS error. (I can't use implicit anyway because the client secret will be exposed).

When tried with the Resource_owner flow I got the SPO license error message. Where if I use the user flow and retrieve the access token from the redirect URL. I am able to use the Graph API with that access token to get the drive items. So I know I don't need an SPO license for this.(Maybe)

If that is not the best way I can create a service in my backend to get the access token/refresh token and serve it to the Angular app using an API, so the users can upload the files from the browser. But the access token got from the above flow gives me an SPO error.

---

UPDATE: I found out that to access the one drive we need a delegated access token. How is that different from client_credenttial flow? and how to get them?

解决方案

The delegated token is generally called a user token, and the token you get through the client credential flow is an application token. The only difference between them is whether there is a user logged in.

If you want to obtain a delegated token, must log in user. Whether it is an interactive login or a non-interactive login, the user must be logged in!

In addition, you need change the /tenant id endpoint to the /common endpoint to avoid tenant-level login.

这篇关于如何从 Angular 获取 OneDrive API 的访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！