How to get the Access Token for OneDrive API from Angular

Question

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?

Answer 1

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.