How to Integrate Power BI in Web Application

Embedding Power BI reports directly into your web application can transform it from a simple tool into a powerful data hub. Instead of sending users to an external link, you can provide them with interactive charts and real-time dashboards right where they work. This guide will walk you through the process of integrating Power BI into your web app, covering both the conceptual setup and the practical steps to make it happen.

Graphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Build Your First Agent

Why Integrate Power BI into Your Web App?

Placing Power BI content inside your application offers a seamless experience for your users. It enhances your product’s value by providing rich, interactive data visualizations without forcing them to switch contexts. This is especially powerful for SaaS applications, internal business tools, and customer portals where data-driven decision-making is essential.

The core benefits include:

• Unified User Experience: Keep users within your app's ecosystem. They don’t need a separate Power BI license or login to view the data you want to share with them.
• Enhanced Data Storytelling: Go beyond static tables and images. Embedded analytics allows users to filter, slice, and drill down into data, uncovering insights on their own.
• Increased Application Value: By adding a layer of business intelligence, your application becomes stickier and more indispensable to your users.

Understanding Power BI Embedded Analytics Options

Before you begin, it’s important to understand the two main models for embedding Power BI content. The model you choose depends entirely on your audience.

1. Embed for Your Organization (User Owns Data)

This model is designed for internal users within your company. Think of it as an alternative way to share reports with colleagues inside your organization’s private portal or intranet.

• Who it's for: Employees, internal stakeholders.
• How it works: Each user authenticates using their own Power BI credentials via Azure Active Directory (AAD). They must have a Power BI Pro or Premium Per User (PPU) license to view the embedded content.
• Best use case: Creating an internal portal that centralizes analytics for your team.

AI Agents for Marketing

Crash Course

Graphed

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Download the PDF

2. Embed for Your Customers (App Owns Data)

This is the most common model for SaaS applications and public-facing websites. It's designed for external users who do not have, and should not need, Power BI licenses.

• Who it's for: Your customers, clients, or external partners.
• How it works: Your web application authenticates with Power BI using a dedicated identity known as a "service principal" or a "master user account." Your application generates a specific embed token that grants temporary, sandboxed access to the reports for your end-users.
• Best use case: A SaaS platform that displays usage analytics dashboards to its customers.

For the rest of this tutorial, we will focus on the App Owns Data model, as it is the more common and complex scenario for application developers.

Prerequisites for Integration

Before you write a single line of code, you’ll need to set up your environment correctly. Here’s a checklist of what you need:

• An Azure Active Directory (AAD) tenant. If your organization uses Office 365, you already have one.
• A Power BI Pro or Premium Per User (PPU) account. This is necessary to publish reports to the Power BI service.
• A Power BI report or dashboard published to a workspace in the Power BI service.
• For production environments, you will also need a Power BI Embedded capacity A-series SKU or Fabric capacity F-series SKU. For development, you can use your Pro license for a limited number of test embed tokens.
• A development environment like Visual Studio, VS Code, or your preferred IDE.

Step-by-Step: Integrating Power BI with the 'App Owns Data' Model

Let's break down the technical process for embedding a Power BI report into your application for external users.

Step 1: Register an Azure AD Application

Your web application needs an identity to authenticate with Power BI's APIs. You create this identity by registering an application in Azure Active Directory.

1. Navigate to the Azure portal and sign in.
2. Search for and select Azure Active Directory.
3. Under the Manage section, click on App registrations, then + New registration.
4. Give your application a name (e.g., "My SaaS Analytics App").
5. For "Supported account types," choose the option that fits your tenant. "Accounts in this organizational directory only" is usually the correct choice.
6. Click Register.

Once created, you'll be taken to the application's overview page. Copy the Application (client) ID and Directory (tenant) ID. You'll need these later for authentication.

Step 2: Create a Client Secret

A client secret is like a password for your application. It proves its identity when requesting access tokens.

1. From your app registration page in Azure AD, navigate to Certificates & secrets.
2. Click on + New client secret.
3. Give it a description and select an expiration time.
4. Click Add. A new secret will be generated.

Important: Copy the client secret's Value immediately and save it somewhere secure. You will not be able to see it again after you leave this page.

Step 3: Create a Security Group and Add Your App

Instead of giving permissions directly to your app's service principal, it's best practice to use a security group. This makes managing permissions easier.

1. In Azure Active Directory, go to Groups and click + New group.
2. Set the Group type to Security.
3. Give it a name, like "Power BI Embedded Principals".
4. Once created, open the group and go to the Members tab.
5. Click + Add members and search for the name of the Azure app you registered in Step 1. Select it and add it to the group.

Graphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Build Your First Agent

Step 4: Enable Service Principal Access in the Power BI Admin Portal

Next, you need to tell Power BI to allow your new security group (and its members) to use the Power BI APIs.

1. Sign in to app.powerbi.com as a Power BI admin.
2. Go to Settings > Admin portal.
3. Scroll down and open the Tenant settings tab.
4. Find the section for Developer settings and expand "Allow service principals to use Power BI APIs."
5. Enable it, select "Specific security groups," and search for the security group you created in Step 3.

Step 5: Grant Access to the Power BI Workspace

Finally, your service principal needs permission to access the specific report you want to embed.

1. In Power BI, navigate to the workspace containing your report.
2. Click the Access button at the top.
3. Add the Azure app or the security group just as you would add a person, and assign it the role of Member or Admin. This allows the app identity to "see" and interact with the content in the workspace.

Step 6: Authenticate and Generate an Embed Token (Backend)

This is where the coding starts. The backend of your application is responsible for securely authenticating against Power BI and generating short-lived embed tokens for the frontend.

The flow looks like this:

1. Your backend code uses the MSAL (Microsoft Authentication Library) with your app's Client ID, Client Secret, and Tenant ID to request an access token from Azure AD for the https://analysis.windows.net/powerbi/api/.default scope.
2. Once you have this access token, you can make a call to the Power BI REST API.
3. You'll need the Workspace ID (groupId) and Report ID (reportId) of the Power BI report you wish to embed. You can find these in the URL when viewing the report in the Power BI service.
4. With the access token in the authorization header, you make a POST request to the "Generate Token" endpoint: /v1.0/myorg/groups/{groupId}/reports/{reportId}/GenerateToken.
5. The API responds with an embed token, embed URL, and the report’s ID.

Your backend should then expose an endpoint (e.g., /api/get-embed-details) that the frontend can call to retrieve these three pieces of information.

AI Agents for Marketing

Crash Course

Graphed

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Download the PDF

Step 7: Render the Report on the Frontend

The final step is to use the Power BI JavaScript client library to render the report in your user's browser.

1. Include the Power BI JavaScript library in your project. You can install it via npm or use a CDN link.

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/dist/powerbi.min.js"></script>

1. Create a div container in your HTML where the report will be displayed.

<div id="reportContainer" style="height: 600px, width: 100%,"></div>

1. Write JavaScript to call your backend endpoint, retrieve the embed details, and then use the powerbi.embed function.

async function embedReport() {
    // 1. Fetch embed details from your backend API
    const response = await fetch('/api/get-embed-details'),
    const embedDetails = await response.json(),

    // 2. Create the configuration object
    const models = window['powerbi-client'].models,
    const config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: embedDetails.embedToken,
        embedUrl: embedDetails.embedUrl,
        id: embedDetails.reportId,
        permissions: models.Permissions.All,
        settings: {
            panes: {
               filters: {
                   expanded: false,
                   visible: true
               }
            }
        }
    },

    // 3. Find the container and embed the report
    const reportContainer = document.getElementById('reportContainer'),
    const report = powerbi.embed(reportContainer, config),
}

// Run the function when the page loads
embedReport(),

If everything is configured correctly, your Power BI report will now render inside your web application, fully interactive and secure.

Final Thoughts

Integrating Power BI into your web application creates a polished and professional experience, transforming your app into a valuable analytics delivery platform. While the initial Azure and Power BI admin setup involves several moving parts, the result is a secure and scalable way to provide rich, interactive data where your users need it most.

For teams looking to skip the complexity of Azure AD registrations and REST API calls, we've built a simpler way to create and share insights. We created Graphed to connect marketing and sales data sources in seconds and generate real-time dashboards using plain-English prompts. This lets you move straight to embedding actionable insights into your workflows without needing to manage the entire BI backend infrastructure yourself.