| title | description | author | ms.author | ms.reviewer | ms.service | ms.subservice | ms.topic | ms.custom | ms.date |
|---|---|---|---|---|---|---|---|---|---|
Embed content in your Power BI embedded analytics application for your organization |
Learn how to integrate Power BI into your application to provide insights for your organization by using embedded analytics software and tools. |
mberdugo |
monaberdugo |
powerbi |
powerbi-developer |
tutorial |
01/30/2024 |
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:
[!div class="checklist"]
- 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.
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
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:
[!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 3.1 SDK (or higher)
-
An integrated development environment (IDE). We recommend using one of the following IDEs:
-
A text editor
-
Command line terminal (or PowerShell)
-
To create an embed for your organization sample app, follow these steps:
Registering your application with Microsoft Entra ID allows you to establish an identity for your app.
[!INCLUDERegister Azure AD app]
[!INCLUDECreate a Power BI workspace]
[!INCLUDECreate a Power BI report]
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 | :::image type="icon" source="../../media/yes.png"::: | :::image type="icon" source="../../media/yes.png"::: | :::image type="icon" source="../../media/yes.png"::: |
| Client secret | :::image type="icon" source="../../media/yes.png"::: | :::image type="icon" source="../../media/yes.png"::: | :::image type="icon" source="../../media/no.png"::: |
| Workspace ID | :::image type="icon" source="../../media/no.png"::: | :::image type="icon" source="../../media/no.png"::: | :::image type="icon" source="../../media/yes.png"::: |
| Report ID | :::image type="icon" source="../../media/no.png"::: | :::image type="icon" source="../../media/no.png"::: | :::image type="icon" source="../../media/yes.png"::: |
Tip
Applies to: :::image type="icon" source="../../media/yes.png":::.NET Core :::image type="icon" source="../../media/yes.png":::.NET Framework :::image type="icon" source="../../media/yes.png":::React TypeScript
[!INCLUDEGet the client ID]
Tip
Applies to: :::image type="icon" source="../../media/yes.png":::.NET Core :::image type="icon" source="../../media/yes.png":::.NET Framework :::image type="icon" source="../../media/no.png":::React TypeScript
[!INCLUDEGet the client secret]
Tip
Applies to: :::image type="icon" source="../../media/no.png":::.NET Core :::image type="icon" source="../../media/no.png":::.NET Framework :::image type="icon" source="../../media/yes.png":::React TypeScript
[!INCLUDEGet the workspace ID]
Tip
Applies to: :::image type="icon" source="../../media/no.png":::.NET Core :::image type="icon" source="../../media/no.png":::.NET Framework :::image type="icon" source="../../media/yes.png":::ReactTypeScript
[!INCLUDEGet the report ID]
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.
[!INCLUDEEmbedding steps]
-
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.
[!INCLUDEConfigure the Azure AD authentication options]
-
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.
-
Save your changes.
:::image type="content" source="media/embed-sample-for-your-organization/azure-ad-net-configurations.png" alt-text="Screenshot of the Azure portal window, which shows the app authentication configurations and the web redirect URI for the .NET core app sample.":::
-
Open the Embed for your organization folder.
-
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.
-
-
Open appsettings.json and fill in the following parameter values:
-
ClientId- Use the client ID GUID -
ClientSecret- Use the client secret
-
-
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.
-
[!INCLUDEThe embedded application sample app interface]
[!INCLUDEConfigure the Azure AD authentication options]
-
In Platform configurations, configure the following options:
-
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.
-
In Implicit grant and hybrid flows, enable the ID tokens option.
-
-
Save your changes.
:::image type="content" source="media/embed-sample-for-your-organization/azure-ad-framework-configurations.png" alt-text="Screenshot of the Azure portal window, which shows the app authentication configurations, the web redirect URI, and the selected access token option.":::
-
Open the Embed for your organization folder.
-
Using Visual Studio, open the UserOwnsData.sln file.
-
Open Web.config and fill in the following parameter values:
-
clientId- Use the client ID GUID -
clientSecret- Use the client secret
-
- Run the project by selecting IIS Express (play).
[!INCLUDEThe embedded application sample app interface]
[!INCLUDEConfigure the Azure AD authentication options]
-
In Platform configurations, configure your Web platform as follows:
-
In Redirect URIs, add
https://localhost:3000and select Configure.[!NOTE] If you don't have a Web platform, select Add a platform, and in the Configure platforms window, choose Web.
-
In Implicit grant and hybrid flows, enable both options:
- Access tokens
- ID tokens
-
-
Save your changes.
:::image type="content" source="media/embed-sample-for-your-organization/azure-ad-react-configurations.png" alt-text="Screenshot of the Azure portal window, which shows the Microsoft Entra app authentication configurations and the web redirect URI set for localhost 3000.":::
-
Open the Embed for your organization > UserOwnsData > src folder.
-
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
-
-
Save the file.
-
Open a terminal and navigate to Embed for your organization > UserOwnsData.
-
Install the required dependencies by entering the following command:
npm install -
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.
After configuring and running the embed for your customers sample application, you can start developing your own application.
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.