How to retrieve access_token from Azure Active Directory (AAD) Web API

Question

I am building a web app with the following properties:

• The Front-end is based on VueJS
• The Back-end framework is still not confirmed but it will be a RESTFul API
• The users for the app will be authenticated by Azure Active Directory (AAD)

Here's what I have done so far:

I have set up a Web App/API in my AAD. Along with that following the guidelines here , I have completely secured my VueJS app and now I need to be logged in into my AAD in order to be able to use the app.

The problem now is that, the front-end is secured. But what about the backend? I am trying to get an access_token from the AAD which I can then use as an authorization header with every request to my backend later on.

Here is what I get from my AAD when I sign in using the AuthenticationContext from the adal library.

As you can see I am getting an id_token and when I use the acquireToken function of adal I get an id_token again.

Is there anything I am doing wrong here? Do I need to create another Web App/API on Azure?

How do I go about this?

Thanks!

Answer 1

According to official documentation and this might be your case.

"The OAuth 2.0 implicit flow in Azure AD is designed to return an ID token when the resource for which the token is being requested is the same as the client application. In other words, when the JS client uses ADAL JS to request a token for its own backend web API registered with same App ID as the client, an ID token is returned and cached by the library. Note that in this case the resource should be set to the App ID of the client (App ID URI will not work). This ID token can then be used as a bearer token in the calls to your application's backend API."

You can find more about this here!

https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/Acquire-tokens