Embedding Power BI in Angular with AAD: Security Concerns and Alternatives

[Anonymous]

Hi everyone,

My company is looking to embed a Power BI report into our Angular application with Azure AD integration. Ideally, we'd like to bypass the login screen for a seamless user experience. However, the client company is hesitant to grant the 'report.read.all' application permission due to security concerns.
Is there a secure way to embed a Power BI report in our Angular application without requiring users to log in through AAD?

[hackcrr · Accepted solution]

Hi, @Anonymous 

Generate an access token programmatically using the client ID and client secret. Use this token to authenticate API requests to Power BI. Embed the report in your Angular application using the Power BI JavaScript SDK. To do this: Register a new Azure AD application.
Configure the app to have the required API permissions (report.read.allPower BI).
Create a client secret for the application. Go to the Power BI service and enable service principal access.
Assign the service principal to the desired workspace with the necessary permissions.

Here is an embedded code:

import * as msal from "@azure/msal-node";
import * as powerbi from "powerbi-client";

// MSAL configuration
const msalConfig = {
  auth: {
    clientId: "YOUR_CLIENT_ID",
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
  },
};

// Create an instance of the MSAL application
const cca = new msal.ConfidentialClientApplication(msalConfig);

// Function to get an access token
async function getAccessToken() {
  const tokenResponse = await cca.acquireTokenByClientCredential({
    scopes: ["https://analysis.windows.net/powerbi/api/.default"],
  });
  return tokenResponse.accessToken;
}

// Function to embed Power BI report
async function embedPowerBIReport() {
  const accessToken = await getAccessToken();

  const embedConfig = {
    type: "report",
    id: "YOUR_REPORT_ID",
    embedUrl: "YOUR_REPORT_EMBED_URL",
    accessToken: accessToken,
  };

  const reportContainer = document.getElementById("reportContainer");
  const report = powerbi.embed(reportContainer, embedConfig);
}

For high scalability and performance, consider using the Power BI Embedded capacity (A SKU). This provides greater control over the embedding process and better performance for embedded analytics.

If this post helps, then please consider Accept it as the solution and kudos to this post to help the other members find it more quickly

[Anonymous]

Hi, @Anonymous 

If you configure it so that no user login is required, this can have a large number of security issues.The AAD login is primarily to secure the data and also to request a token from the Microsoft Authorization Platform for viewing the current report/PowerBI.

You can check to get the information from the link below:

Integrate PowerBI report using 'embed for customer approach' to angular application which use OKTA t...

How to embed Power BI content in an Angular app | Microsoft Learn

Best Regards

Jianpeng Li

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.