How to gain access tokens using Azure Easy Auth?

1
votes

I have a Single Page Appplication (SPA) built using React and a Web API, both of which are hosted on Azure's App Service. Authentication is provided by Azure AD.

I have been using the Active Directory Authentication Library (ADAL) for JavaScript. While all the examples seem to be about Angular, I have managed to get the pure JavaScript version of the library working with the React application. I have used the OAuth2 implicit grant flow to utimately provide authenticated access to the Web API via the SPA.

Everything works fine with ADAL, but this approach requires you to have a login and logout mechanism (eg. via a button). The authorization code is added to the URL as a fragment and ADAL conveniently does the rest. However, I would like the entire application to be secure/authenticated and so I have setup "Easy Auth" - authentication via the App Service.

When working with "Easy Auth" you sign-on to the application but there is no fragment returned in the URL and so ADAL cannot be used to acquire an access token for the API.

What is the best way to gain access tokens like those needed for implicit grant when using "Easy Auth"? Is there a way to incorporate ADAL into an "Easy Auth" flow?

Thank you.

1
reactjsazureazure-web-app-serviceazure-active-directory

1 Answers

1
votes

If you deploy the single page application and web API into the same Azure's app service and protect the app service using the Easy Auth, there is no necessary to use adal in the single page application to call the web API now.

In this scenario, you are able to login the app service via the server-flow and then you can call the web API directly since the Easy Auth will authenticate the request via the cookies. And if the web API also server other clients you want to call using the token, you need to get the id_token/access_token using the Azure AD app which you protect the app service and exchange the authentication token using id_token/access_token issued by Azure AD. This progress is called client-flow.

More detail about these two flows, you can refer link here.