13 Dec 2023 Embed Public Power BI Reports into Your Web Applications

Power BI Embedded Analytics is a powerful set of tools provided by Microsoft, enabling developers to seamlessly integrate interactive Power BI reports, dashboards and visualisations directly into their applications and websites.

In our previous blog post, we discussed the main features of Power BI Embedded Analytics and explained how to embed Power BI reports into a web application using the Embed for your organisation (user owns data) solution, which requires user authentication to access the reports.

In this article, we will delve into how to embed public reports into a web application using the Embed for your customers (app owns data) solution. With this approach, users can access public reports without the need for individual authentication, making it perfect for public websites and organisations.

Our primary objective in embedding Power BI into a portal is to provide customers with the ability to view and analyse data in a user-friendly format, granting them access to valuable business analytics and insights.

We will explore two different approaches to embed public Power BI reports:

• Using an iframe.
• Using a Service Principal and the Power BI JavaScript library.

Embedding Power BI Reports for the Public

1.    Public Embedding of Reports Using an iframe

The simplest approach to embedding public Power BI reports is by using an iframe. This method allows us to provide customers with publicly accessible reports that can be embedded into our application, without requiring any authentication.

To do this, follow these steps to create an embed code in Power BI Service:

• Go to File – Embed report – Publish to Web (public).
• Copy the generated iframe HTML element into your web application.

Example code:

As this is a very simple approach, there are certain constraints:

• Interactivity between the application and the content is limited.
• Customisation options are limited.

2.  Embedding Power BI Reports Using a Service Principal and the Microsoft Libraries (App Owns Data)

2.1. Embed for Your Customers (App Owns Data) Solution

Architecture overview:

For certain reports, stricter access control and enhanced interactivity with our application might be needed. In such cases, we can use the libraries provided by Microsoft (Power BI JavaScript client library for the frontend and MSAL-node for the backend, as in our example in this article).

To make it work, we need to create an Azure Active Directory (Now called Microsoft Entra ID) application and a corresponding Service Principal to be used for authentication. The Azure Active Directory application needs permissions to read Power BI reports (Report.Read.All scope).

Details about how to create the Active Directory application and Service Principal, and how to grant the Service Principal access to the reports can be found in the official Microsoft documentation. Please note that the process of setting up these components is not covered in this article.

2.2. Getting an Access Token to Embed the Power BI Report

To embed a report using the Power BI JavaScript client library, you’ll need to obtain an access token, and this means creating a backend or API, which will supply the token to the frontend application. In our case, we developed a NodeJS backend (Express) to act as an intermediate layer between the frontend application and the Power BI reports.

Clients can request an access token from the server, which in turn utilises the Microsoft Authentication Library for JavaScript (MSAL-node) to authenticate against the previously created Azure Active Directory application. On successful authentication, the server provides the access token required to visualise the Power BI reports.

This step is imperative because obtaining a token using a client secret, known as Service Principal authentication, cannot be performed directly from a Single Page Application (SPA), but needs to be done from a backend server.

We’re using the Microsoft Authentication Library, but it’s also possible to get the embed token without it. An alternative method involves two calls, the first to obtain an access token using OAuth, and the second to retrieve the embed token:

• Step 1: Get access token
  • [POST] https://login.microsoftonline.com/tenant_id/oauth2/token
    • Grant_type: client_credentials
    • Resource: https://analysis.windows.net/powerbi/api
    • Client_id: Active Directory app client id
    • Client_secret: Client secret for the application

• Step 2: Get embed token
  • [POST] https://api.powerbi.com/v1.0/myorg/GenerateToken
    • Auth: Bearer Token (use the token received in the previous call)
    • Body: Specify the dataset and the report to embed (Follow the Power BI REST API documentation)

Example code to get the AD token using MSAL:

import { ClientCredential, ConfidentialClientApplication } from '@azure/msal-node'; 
 
// Azure Active Directory application configuration 
const config = { 
  auth: { 
    clientId: 'your_client_id', 
    authority: 'https://login.microsoftonline.com/your_tenant_id', 
    clientSecret: 'your_client_secret', 
  }, 
}; 
 
// Create a ConfidentialClientApplication object 
const cca = new ConfidentialClientApplication(config); 
 
// Token request parameters 
const tokenRequest = { 
  scopes: ['https://analysis.windows.net/powerbi/api/.default'], 
}; 
 
// Get the token 
const response = await cca.acquireTokenByClientCredential(tokenRequest); 
 const accessToken = response.accessToken; 

Doing everything in a backend (API) ensures that each request is authorised through the server, thus guaranteeing data security and preventing unauthorised access to reports.

2.3. Embedding a Report Using the Power BI JavaScript Client Library

After getting the embed token from the backend, we provide it to the client-side for the secure integration of Power BI reports. We also prepared a code block in the page template to facilitate the embedding of the report.

To embed a public report using the Power BI client library in an “embed for your customers” solution, the configuration is kept minimal. In this setup, the tokenType should be set to Embed. This differs from the approach discussed in our previous blog post, where tokenType was set to Aad for user authentication purposes:

import { pbi, models } from 'powerbi-client'; 
 
// Initialize the configuration 
const config: pbi.IEmbedConfiguration = { 
  type: 'report', 
  id: 'your_report_id', // Replace with your report ID 	
  embedUrl: 'https://app.powerbi.com/reportEmbed', // Embed URL 
  accessToken: 'your_access_token', // Replace with the obtained embed token 
  tokenType: pbi.models.TokenType.Embed,
  permissions: pbi.models.Permissions.Read,
  viewMode: pbi.models.ViewMode.View
}; 
 
// Initialize the report using pbiService 
const report = new pbi.service.Report(config); 
 
// Get the HTML container element to embed the report 
const reportContainer = document.getElementById('reportContainer'); 
 
// Embed the report in the container 
report.off("loaded"); // Prevent multiple embeddings on subsequent calls 
report.on("loaded", () => { 
  console.log("Report successfully embedded!"); 
}); 
 
report.off("error"); // Handle possible errors 
report.on("error", (error) => { 
  console.error("Error embedding the report:", error); 
}); 
report.embed(reportContainer); // Embed the report in the container 

Please note that in this example, we’re using the minimal configuration, encompassing only the essential elements: type, reportId, embedUrl, and accessToken. However, in a real-world application, there is scope to further customise the report parameters, including options like filters, sizes, theming, and more.

By using this library, enhanced flexibility is achieved when embedding Power BI reports into a web portal, allowing for effective settings management whilst also providing users with a rich and interactive data experience.

Advantages of Using Power BI Embedded Analytics

Embedding Power BI Analytics (for public or private reports) into our applications offers several advantages to our customers and organisation:

• Data interactivity and visualisation: Embedded Power BI reports provide our users with powerful data visualisations and analysis capabilities. With charts, graphs and other interactive elements, users can easily work with their data and gain valuable insights.
• Data access: We are embedding for the public in our example, but by using the Service Principal and Microsoft JavaScript client library we can control their access to information, and they’ll only see what we want them to see.
• Effortless report management: Creating public reports and embedding them allows us to update and manage reports easily. We can change the content without having to modify the web application code.
• Enhanced collaboration: Embedded reports promote closer collaboration between different teams, enabling them to get quick analytical insights and share them, meaning better-informed business decisions.

In our case Power BI Embedded Analytics proved to be a powerful tool to provide valuable analytical data to our customers and the public.

Observation Deck

At ClearPeaks, we’ve developed a powerful web application called Observation Deck, designed to present key data to executives rapidly, practically, and clearly.

This tool taps into the full potential of Power BI Embedded Analytics, able to effortlessly incorporate any report from your organisation in a matter of seconds. Observation Deck is a comprehensive BI portal, providing users with a central access point to all their critical data. And that’s not all – it goes beyond simple embedding capabilities, leveraging many Power BI features, like theming and filtering.

You can find it in the Microsoft Marketplace or in our on our website. Don’t hesitate to contact us for a free demo!

Conclusion

Embedding Power BI reports into an application is an excellent way to provide valuable insights to the public or to our customers, whilst always ensuring data security. The combination of public embedding and authentication using a Service Principal allows us to cater for different use cases and to still offer a personalised user experience.

We’ve met with great success embedding Power BI reports for our customers, and we are excited to continue harnessing the capabilities of Power BI to empower them with actionable business intelligence. And needless to say, we will continue using these tools in Observation Deck.

If you have questions or need guidance on integrating Power BI reports into your applications, please feel free to reach out and our dedicated consultants will get straight back to you, ready to offer expert advice tailored to your specific requirements. And in the meantime, stay tuned for our next blog post!