Power BI can be embedded for the users of your organization who have access to it. This requires the users to sign-in to their Power BI account to view their content, which are the reports they own or the ones that have been shared with them.
This is the second part of the two-part article series. You can find the first one here.
Creating dashboards/reports using Power BI are out of scope of this article, you can learn more about it here. I’ve skipped a lot a details which have better documentation elsewhere.
A high level diagram showing how this works is shown below.
The workflow is as follows.
Refer [this](http://When user browses UI, he/she is asked to login with his/her power bi credentials. User credentials are validated with Azure AD to generate access tokens UI calls Power BI API to get the report specific data with the token. Power BI API returns report data, and UI displays it in the web page.) for more details.
Here we need to do few more steps than what is mentioned in the documentation.
Read this for more details.
Our application should authenticate user to Azure Active Directory (AD) and generate the access token. This access token is used as the bearer token for subsequent Power BI API requests.
For authenticating with Azure AD, we’ll be using this library. You can add this to your angular project by running the following command.
npm install adal-angular
npm install --save powerbi-client
Now we’ve added the additional libraries for your requirement and can we start coding the the authentication service as follows.
We can store ‘adal’ related configuration in the environment.ts file. I’ve attached the sample format below.
Once the user is authenticated, to handle callback you need to add the following code in the redirect component’s ngOnInit method.
Here I’ve written the code to embed the first of the available reports to a user. You can update it to suit your needs. First we need to get the access token and get the first of the available reports. The code is as follows.
The method ‘getReportsInGroup’ will be invoking the corresponding Power BI REST API.
Next, we need to embed the report in the HTML page. This is similar to ‘Embed for your customers’, except the token type which is ‘Aad’ and access token instead of embed token. Embedding report code is as follows.
Embedding report for your organization
Now you’re done with your Angular app, run it and verify the reports. Dashboards and Tiles can be embedded in a similar way. You can find those snippets here.