In one of our project we need to embed Power BI reports in our client facing app, where the authentication (to application) is done by Okta. The application is developed using angular and is hosted in AWS as static website. The Power BI authentication should happen through a service account and user should not be asked to login to view PowerBI report. We want to follow the 'app owns data' approach here.

So far it's good, the problem now is our system architecture does not contain any services. So we need to authenticate and embed powerBI from client-side itself. We tried to get the access token using the endpoint

https://login.microsoftonline.com/{tenantid}/oauth2/v2.0/token

This works from Postman however it throws CORS error while accessing from SPA.

The next thing we tried was using msal-angular package to get access-token. But we couldn't find a way to get token for the 'client_credentials' work flow using the msal package (without user interaction).

Are we missing something here or is there any other way to get the access-token from client-side without any API?

Thanks in advace!!

CodePudding user response：

Yeah, nope. You must have a back-end service for app-owns-data embedding. You have to authenticate to PowerBI to generate the Embed Token, and it's deeply insecure to send either the AAD Service Principal credentials (ClientID/ClientSecret) or AAD Master User credentials (UserName/Password) to the client's browser. That's why msal-angular doesn't support client credentials flow.

The back-end service could be an Azure Function or AWS Lambda. It should be secured by your application authentication scheme, and have access to the credentials to complete the client credentials flow. After it uses the client credentials to obtain a Power BI Access Token, it calls the Power BI Embedding API to generate an Embed Token, and returns that to the client for embedding.