Tutorial: Embed Power BI content using a sample embed for your organization application

Power BI embedded analytics allows you to embed Power BI content, such as reports, dashboards and tiles, into your application.

In this tutorial, you'll learn how to:

• Set up your embedded environment.
• Configure an embed for your organization (also known as user owns data) sample application.

To use your application, your users will need to sign in to Power BI.

The embed for your organization solution is typically used by enterprises and large organizations, and is intended for internal users.

Important

If you are embedding content for a national/regional cloud, the first few steps of this tutorial are different. See Embed content for national/regional clouds for details.

Code sample specifications

This tutorial includes instructions for configuring an embed for your organization sample application in one of the following frameworks:

• .NET Framework
• .NET Core
• React TypeScript

Note

The .NET Core and the .NET Framework samples allow the end user to view any Power BI dashboard, report or tile they have access to in the Power BI service. The React TypeScript sample lets you embed only one report that your end user already has access to in the Power BI service.

The code samples support the following browsers:

• Microsoft Edge
• Google Chrome
• Mozilla Firefox

Prerequisites

Before you start this tutorial, verify that you have both the following Power BI and code dependencies:

• Power BI dependencies

  • Your own Microsoft Entra tenant.

    • One of the following licenses:

      • Power BI Pro

      • Premium Per User (PPU)

    Note

    To move to production you'll need one of the following configurations:

    • All users with Pro licenses.
    • All users with PPU licenses.
    • A SKU that's equivalent or higher to a F64 SKU. This configuration allows all users to have free licenses.

• Code dependencies

  .NET Core

  • .NET Core 3.1 SDK (or higher)

  • An integrated development environment (IDE). We recommend using one of the following IDEs:

    • Visual Studio

    • Visual Studio Code

  .NET Framework

  • .NET Framework 4.8

  • Visual Studio

  React TypeScript

  • A text editor

  • Command line terminal (or PowerShell)

---

Method

To create an embed for your organization sample app, follow these steps:

1. Register a Microsoft Entra application.

2. Create a Power BI workspace.

3. Create and publish a Power BI report.

4. Get the embedding parameter values.

5. Embed your content.

Step 1 - Register a Microsoft Entra application

Registering your application with Microsoft Entra ID allows you to establish an identity for your app.

To register your application with Microsoft Entra ID, follow the instructions in Register your application.

Step 2 - Create a Power BI workspace

Microsoft Fabric keeps your reports, dashboards, and tiles in a workspace. To embed these items, you need to create them and upload them into a workspace.

Tip

If you already have a workspace, you can skip this step.

To create a workspace, do the following:

1. Sign in to Fabric.

2. Select Workspaces.

3. Select + New workspace.

4. Name your workspace and select Save.

Step 3 - Create and publish a Power BI report

Your next step is to create a report and upload it to your workspace. You can create your own report using Power BI Desktop, and then publish it to your workspace. Or, you can upload a sample report to your workspace.

Tip

If you already have a workspace with a report, you can skip this step.

To download a sample report and publish it to your workspace, follow these steps:

1. Open the GitHub Power BI Desktop samples folder.

2. Select Code and then select Download zip.

   

3. Extract the downloaded ZIP and navigate to the Samples Reports folder.

4. Select a report to embed, and publish it to your workspace.

Step 4 - Get the embedding parameter values

To embed your content, you'll need to obtain a few parameter values. The parameter values depend on the language of the sample application you want to use. The table below lists which parameter values are required for each sample.

Parameter	.NET Core	.NET Framework	React TypeScript
Client ID
Client secret
Workspace ID
Report ID

Client ID

Tip

Applies to: .NET Core .NET Framework React TypeScript

To get the client ID GUID (also know as application ID), follow these steps:

1. Log into Microsoft Azure.

2. Search for App registrations and select the App registrations link.

3. Select the Microsoft Entra app you're using for embedding your Power BI content.

4. From the Overview section, copy the Application (client) ID GUID.

Client secret

Tip

Applies to: .NET Core .NET Framework React TypeScript

To get the client secret, follow these steps:

1. Log into Microsoft Azure.

2. Search for App registrations and select the App registrations link.

3. Select the Microsoft Entra app you're using for embedding your Power BI content.

4. Under Manage, select Certificates & secrets.

5. Under Client secrets, select New client secret.

6. In the Add a client secret pop-up window, provide a description for your application secret, select when the application secret expires, and select Add.

7. From the Client secrets section, copy the string in the Value column of the newly created application secret. The client secret value is your client ID.

Note

Make sure you copy the client secret value when it first appears. After navigating away from this page, the client secret will be hidden and you'll not be able to retrieve its value.

Workspace ID

Tip

Applies to: .NET Core .NET Framework React TypeScript

To get the workspace ID GUID, follow these steps:

1. Sign in to Power BI service.

2. Open the report you want to embed.

3. Copy the GUID from the URL. The GUID is the number between /groups/ and /reports/.

   

Report ID

Tip

Applies to: .NET Core .NET Framework ReactTypeScript

To get the report ID GUID, follow these steps:

1. Sign in to Power BI service.

2. Open the report you want to embed.

3. Copy the GUID from the URL. The GUID is the number between /reports/ and /ReportSection.

   

Step 5 - Embed your content

The Power BI embedded sample application allows you to create an embed for your organization Power BI app.

Follow these steps to modify the embed for your organization sample application, to embed your Power BI report.

1. Open the Power BI developer samples folder.

2. Select Code and then select Download zip.

   

3. Extract the downloaded ZIP and navigate to the PowerBI-Developer-Samples-master folder.

4. Open one of the following folders depending on the language you want your application to use:

   • .NET Core
   • .NET Framework
   • React-TS

   Note

   The embed for your organization sample applications only support the previously listed frameworks. The Java, Node JS and Python sample applications, only support the embed for your customers solution.

.NET Core

Configure your Microsoft Entra app

1. Sign into the Azure portal.

2. Select App registrations. If you can't see this option, search for it.

3. Open the Microsoft Entra application you created in Step 1 - Register a Microsoft Entra application.

4. From the Manage menu, select Authentication.

5. In Platform configurations, open your Web platform and in the Redirect URIs section, add https://localhost:5000/signin-oidc.

   Note

   If you don't have a Web platform, select Add a platform and in the Configure platforms window, choose Web.

6. Save your changes.

Configure the sample embedding app

1. Open the Embed for your organization folder.

2. Open the embed for your organization sample app using one of these methods:

   • If you're using Visual Studio, open the UserOwnsData.sln file.

   • If you're using Visual Studio Code, open the UserOwnsData folder.

3. Open appsettings.json and fill in the following parameter values:

   • ClientId - Use the client ID GUID

   • ClientSecret - Use the client secret

Run the sample app

1. Run the project by selecting the appropriate option:

   • If you're using Visual Studio, select IIS Express (play).

   • If you're using Visual Studio Code, select Run > Start Debugging.

2. Sign into the embedding sample application.

   Note

   During your first sign in, you'll be prompted to allow Microsoft Entra permissions for the app.

3. When the embedding sample application loads, select the Power BI content you want to embed and then select Embed.

   

.NET Framework

Configure your Microsoft Entra app

1. Sign into the Azure portal.

2. Select App registrations. If you can't see this option, search for it.

3. Open the Microsoft Entra application you created in Step 1 - Register a Microsoft Entra application.

4. From the Manage menu, select Authentication.

5. In Platform configurations, configure the following options:

   1. In your Web platform, in the Redirect URIs section, add https://localhost:44300/.

      Note

      If you don't have a Web platform, select Add a platform and in the Configure platforms window, select Web.

   2. In Implicit grant and hybrid flows, enable the ID tokens option.

6. Save your changes.

Configure the sample embedding app

1. Open the Embed for your organization folder.

2. Using Visual Studio, open the UserOwnsData.sln file.

3. Open Web.config and fill in the following parameter values:

   • clientId - Use the client ID GUID

   • clientSecret - Use the client secret

Run the sample app

1. Run the project by selecting IIS Express (play).

2. Sign into the embedding sample application.

   Note

   During your first sign in, you'll be prompted to allow Microsoft Entra permissions for the app.

3. When the embedding sample application loads, select the Power BI content you want to embed and then select Embed.

   

React TypeScript

Configure your Microsoft Entra app

1. Sign into the Azure portal.

2. Select App registrations. If you can't see this option, search for it.

3. Open the Microsoft Entra application you created in Step 1 - Register a Microsoft Entra application.

4. From the Manage menu, select Authentication.

5. In Platform configurations, configure your Web platform as follows:

   1. In Redirect URIs, add https://localhost:3000 and select Configure.

      Note

      If you don't have a Web platform, select Add a platform, and in the Configure platforms window, choose Web.

   2. In Implicit grant and hybrid flows, enable both options:

      • Access tokens
      • ID tokens

6. Save your changes.

Configure the sample embedding app

1. Open the Embed for your organization > UserOwnsData > src folder.

2. Using a text editor, open the Config.ts file and fill in the following parameter values:

   • clientId - Use the client ID GUID

   • workspaceId - Use the workspace ID

   • reportId - Use the report ID

3. Save the file.

Run the sample app

1. Open a terminal and navigate to Embed for your organization > UserOwnsData.

2. Install the required dependencies by entering the following command:

   npm install

3. Run the application by entering the following command:

   npm run start

   Note

   During your first sign in, you'll be prompted to allow Microsoft Entra permissions for the app.

Develop your application

After configuring and running the embed for your customers sample application, you can start developing your own application.

Update user permissions

Users need permission to access the Power BI folder the report is in. When you grant a user permission to access a folder, the change usually takes effect only after the user logs in to the Power BI Portal. For the new permissions to take effect immediately, in the Embedded scenario, make an explicit call to the RefreshUser Permissions REST API at startup. This API call will refresh the permissions and avoid authorization failures for users with newly granted permissions.

Related content

• Tutorial: Embed Power BI content using a sample embed for your customers' application
• Embed paginated reports

Ask the Power BI Community