integrate power bi with angular

Question

i'm trying to embed a power bi report into my angular app inside my organization. to do that, one of the requirements is to get an access token from azure ad to authenticate my app to power bi api. one way to do that is by calling AuthenticationContext from the backend to acquire token.

i'm already using MSAL for authentication in my angular app. is there a way to use Msal for auth?

Answer 1

Hi @Tarek, Taher , yes, you can use MSAL for authentication to acquire an access token from Azure AD to authenticate your app to the Power BI API. MSAL provides a simple way to acquire tokens for various Microsoft services, including Power BI.

To embed a Power BI report into your Angular app, you can use the Power BI JavaScript API. The Power BI JavaScript API provides a set of JavaScript functions and objects that you can use to interact with Power BI reports and dashboards.

Here's an example of how to embed a Power BI report into your Angular app using the Power BI JavaScript API and MSAL for authentication:

1. Install the Power BI JavaScript API package:

npm install powerbi-client

2. Import the Power BI JavaScript API and MSAL:

import * as pbi from 'powerbi-client';
import * as Msal from 'msal';

3. Create a new instance of the Power BI report:

const reportContainer = <HTMLElement>document.getElementById('reportContainer');
const reportConfig = {
  type: 'report',
  id: 'your-report-id',
  embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=your-report-id',
  accessToken: ''
};
const report = powerbi.embed(reportContainer, reportConfig);

Replace your-report-id with the ID of your Power BI report.

4. Acquire an access token for the Power BI API using MSAL:

const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    authority: 'https://login.microsoftonline.com/your-tenant-id',
    redirectUri: 'http://localhost:4200' // your redirect URI
  }
};
const msalInstance = new Msal.UserAgentApplication(msalConfig);

// acquire token silently
msalInstance.acquireTokenSilent({
  scopes: ['https://analysis.windows.net/powerbi/api/.default']
}).then((response) => {
  // set the access token in the report config
  reportConfig.accessToken = response.accessToken;
  // load the report
  report.load(reportConfig);
}).catch((error) => {
  // handle error
});

Replace your-client-id and your-tenant-id with your actual client ID and tenant ID. Also, replace http://localhost:4200 with your actual redirect URI.

5. Load the report:

```typescript
report.load(reportConfig);

This will load the report into the reportContainer element.

Please let me know if you have any questions and I can help you further.

If this answer helps you please mark "Accept Answer" so other users can reference it.

Thank you,

James