Question

How would you embed Power BI reports in an Angular application with Azure AD authentication?

I’m building an Angular application that requires embedding Power BI reports and securing them with Azure AD authentication. What are the steps and best practices to configure this integration effectively, ensuring secure and seamless user access to the embedded reports? Could you also explain how to handle token acquisition and API calls in this context?

Answer 1

To enable Azure AD authentication within an Angular application for embedding Power BI reports, follow these simple steps:

Configuration in Azure AD:

Register your Angular app in Azure AD and grant it Power BI API permissions (e.g., Report.ReadWrite.All).

Set authentication and redirect URIs for token acquisition.

Token Acquisition using MSAL.js:

Install MSAL.js: npm install @azure/msal-browser.

Use MSAL to authenticate and acquire an access token for Power BI

const msalConfig = { /* Azure AD app details */ }; 

const msalInstance = new msal.PublicClientApplication(msalConfig); 

const token = await msalInstance.acquireTokenSilent({ scopes: ['https://analysis.windows.net/powerbi/api/.default'] });

Embed Power BI Report:

• Use the Power BI JavaScript API (powerbi-client) to embed reports.
• Include the access token in the embed configuration:

const embedConfig = {

 type: 'report', 

tokenType: powerbi.models.TokenType.Aad,

accessToken: token.accessToken, 

embedUrl: '<your-embed-url>', 

id: '<report-id>',

};

 powerbi.embed(document.getElementById('reportContainer'), embedConfig);

Ensure the token is securely handled and users are authenticated before embedding the report.