Azure Active Directory Authentication Javascript

1
votes

I'm trying to implement Power Bi Embedded, to achieve that I have to authenticate with Azure Active Directory (AAD). That's where I'm stuck, I don't know what the steps are to achieve that.

For what I've been reading in the Azure docs, and because of my stack, the type of authentication that fits with my flow is OAuth 2.0 on-behalf-of-flow. This, because I have my SPA written on Angular and we handle many transactions with Cloud Functions (Firebase). So, what we want is:

  1. The SPA tries to embed a report
  2. The SPA request an embed token to the cloud functions
  3. The cloud functions, first, must create an access token from AAD
  4. Once created the access token, request to Power Bi API generate an embed token
  5. Returns embed token

Basically, where I'm lost is in point 3. I haven't really understand how should I request an access token so I can continue with the flow. I've found a Js library called ADAL (Active Directory Authentication Library) for Js and for what I've read, it implements the Implicit grant flow.

So, what I need is any help and/or clues in how to retrieve an access token from AAD with Javascript?

1
azureazure-active-directorygoogle-cloud-functionsadalpowerbi-embedded
Yeah so if you want tokens in front-end JavaScript, you have to authenticate the user via implicit flow. I'd recommend using MSAL.js for that, Adal is the older one. The job of the front-end would be to get an access token for your back-end API. The back-end can then validate the token and exchange it for another access token using the on behalf of flow. – juunas
Cool, thanks @juunas, sounds great! I'mma check it out – Gerardo Ruiz
Hi @GerardoRuiz checking to see if the response provided "juunas" was helpful. – CHEEKATLAPRADEEP-MSFT
@GerardoRuiz Any update for this issue? – Tony Ju
Hey @juunas I have a question here why I have to generate another token to get embed token? isn't it possible to get embed token by msal access token? If not what is the difference between both token? Please help me with your answer. – Saiful Islam

1 Answers

0
votes

As mentioned in the comment, you can use MSAL.js to get the token with the implicit flow in the front-end, then in the back-end, you can then validate the token and exchange it for another access token using on behalf of flow.