Incorporer un tableau de bord, une vignette ou un rapport Power BI dans votre applicationEmbed a Power BI dashboard, tile, or report into your application

Découvrez comment intégrer (ou incorporer) un tableau de bord, une vignette ou un rapport dans une application web en utilisant le SDK Power BI .NET, ainsi que l’API JavaScript Power BI, lorsque l’incorporation s’adresse à vos clients.Learn how to integrate, or embed, a dashboard, tile or report, into a web app using the Power BI .NET SDK along with the Power BI JavaScript API when embedding for your customers. Il s’agit typiquement d’un scénario concernant les éditeurs de logiciels indépendants.This is typically the ISV scenario.

Tableau de bord incorporé

Pour vous familiariser avec cette procédure pas à pas, vous avez besoin d’un compte Power BI Pro.To get started with this walkthrough, you need a Power BI Pro account. Si vous n’avez pas de compte, vous pouvez demander gratuitement un compte Power BI, puis vous inscrire à Power BI Pro (Version d’évaluation). Vous pouvez également créer votre propre locataire Azure Active Directory à des fins de test.If you don't have an account, you can sign up for a free Power BI account and then sign up for a Power BI Pro trial, or you can create your own Azure Active Directory tenant for testing purposes.

Note

Vous voulez plutôt incorporer un tableau de bord s’adressant à votre organisation ?Looking to embed a dashboard for your organization instead? Consultez Intégrer un tableau de bord dans une application pour votre organisation.See, Integrate a dashboard into an app for your organization.

Pour intégrer un tableau de bord à une application web, utilisez l’API Power BI et un jeton d’accès d’autorisation Azure Active Directory (AD) pour obtenir un tableau de bord.To integrate a dashboard into a web app, you use the Power BI API, and an Azure Active Directory (AD) authorization access token to get a dashboard. Ensuite, chargez le tableau de bord à l’aide d’un jeton incorporé.Then, you load the dashboard using an embed token. L’API Power BI fournit un accès par programme à certaines ressources Power BI.The Power BI API provides programmatic access to certain Power BI resources. Pour plus d’informations, consultez Vue d’ensemble de l’API REST Power BI, Kit de développement logiciel (SDK) Power BI .NET et API JavaScript Power BI.For more information, see Overview of Power BI REST API, Power BI .NET SDK and the Power BI JavaScript API.

Télécharger l’exempleDownload the sample

Cet article présente le code utilisé dans l’exemple Incorporation pour votre organisation sur GitHub.This article shows the code used in the Embedding for your organization sample on GitHub. Pour suivre cette procédure pas à pas, vous pouvez télécharger l’exemple.To follow along with this walkthrough, you can download the sample.

Étape 1 - Inscrire une application dans Azure ADStep 1 - register an app in Azure AD

Vous devez inscrire votre application avec Azure AD afin d’effectuer des appels d’API REST.You will need to register your application with Azure AD in order to make REST API calls. Pour plus d’informations, consultez Inscrire une application Azure AD pour incorporer du contenu Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Si vous avez téléchargé l’exemple Incorporation pour votre organisation, utilisez l’ID client que vous obtenez après inscription pour que l’exemple puisse s’authentifier sur Azure AD.If you downloaded the Embedding for your organization sample, you use the Client ID you get, after registration, so that the sample can authenticate to Azure AD. Pour configurer l’exemple, modifiez l’ID client dans le fichier web.config.To configure the sample, change the clientId in the web.config file.

Étape 2 : obtenir un jeton d’accès à partir d’Azure ADStep 2 - get an access token from Azure AD

Dans votre application, vous devez d’abord obtenir un jeton d’accès, à partir d’Azure AD, avant de pouvoir effectuer des appels d’API REST Power BI.Within your application, you will first need to get an access token, from Azure AD, before you can make calls to the Power BI REST API. Pour plus d’informations, consultez Authentifier des utilisateurs et obtenir un jeton d’accès Azure AD pour votre application Power BI.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Vous pouvez voir des exemples associés dans chaque tâche d’élément de contenu dans Controllers\HomeController.cs.You can see examples of this within each content item task in Controllers\HomeController.cs.

Étape 3 : obtenir un élément de contenuStep 3 - get a content item

Vous devez effectuer quelques opérations pour vous assurer du bon déroulement de l’incorporation de votre contenu Power BI.To embed your Power BI content, you will need to do a couple of things to make sure it embeds correctly. Même si toutes ces étapes peuvent être effectuées directement avec l’API REST, l’exemple d’application, ainsi que les autres exemples présentés ici, sont réalisés avec le SDK .NET.While all of these steps can be done with the REST API directly, the sample application, and the examples here, are made with the .NET SDK.

Créer un client Power BI avec votre jeton d’accèsCreate the Power BI Client with your access token

Avec votre jeton d’accès, vous devez créer votre objet de client Power BI pour interagir avec les API Power BI.With your access token, you will want to create your Power BI client object which will allow you to interact with the Power BI APIs. Pour cela, encapsulez l’élément AccessToken avec un objet Microsoft.Rest.TokenCredentials.This is done by wrapping the AccessToken with a Microsoft.Rest.TokenCredentials object.

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Microsoft.Rest;
using Microsoft.PowerBI.Api.V2;

var tokenCredentials = new TokenCredentials(authenticationResult.AccessToken, "Bearer");

// Create a Power BI Client object. It will be used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
    // Your code to embed items.
}

Obtenir l’élément de contenu que vous souhaitez incorporerGet the content item you want to embed

Utilisez l’objet client Power BI pour récupérer une référence vers l’élément que vous souhaitez incorporer.Use the Power BI client object to retrieve a reference to the item you want to embed. Vous pouvez incorporer des tableaux de bord, des vignettes ou des rapports.You can embed dashboards, tiles or reports. Voici un exemple montrant comment récupérer un premier tableau de bord, rapport ou vignette à partir d’un espace de travail donné.Here is an example of how to retrieve the first dashboard, tile or report from a given workspace.

Un exemple de ceci est disponible dans Controllers\HomeController.cs de l’exemple L’application possède les données.A sample of this is available within Controllers\HomeController.cs of the App Owns Data sample.

Tableaux de bordDashboards

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(GroupId);

// Get the first report in the group.
Dashboard dashboard = dashboards.Value.FirstOrDefault();

VignetteTile

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// To retrieve the tile, you first need to retrieve the dashboard.

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(GroupId);

// Get the first report in the group.
Dashboard dashboard = dashboards.Value.FirstOrDefault();

// Get a list of tiles from a specific dashboard
ODataResponseListTile tiles = client.Dashboards.GetTilesInGroup(GroupId, dashboard.Id);

// Get the first tile in the group.
Tile tile = tiles.Value.FirstOrDefault();

RapportReport

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListReport reports = client.Reports.GetReportsInGroupAsync(GroupId);

// Get the first report in the group.
Report report = reports.Value.FirstOrDefault();

Créer le jeton incorporéCreate the embed token

Un jeton d’incorporation doit être généré pour être utilisé à partir de l’API JavaScript.An embed token needs to be generated which can be used from the JavaScript API. Le jeton d’incorporation est propre à l’élément que vous incorporez.The embed token will be specific to the item you are embedding. Cela signifie que chaque fois que vous incorporez un contenu Power BI, vous devez lui créer un jeton d’incorporation.This means that any time you embed a piece of Power BI content, you need to create a new embed token for it. Pour en savoir plus, notamment sur les niveaux d’accès (accessLevel) à utiliser, consultez API GenerateToken.For more information, including which accessLevel to use, see GenerateToken API.

Important

Étant donné que les jetons incorporés sont uniquement destinés aux tests de développement, le nombre de jetons incorporés qu’un compte principal Power BI peut générer est limité.Because embed tokens are intended for development testing only, the number of embed tokens a Power BI master account can generate is limited. Vous devez acheter une capacité pour les scénarios d’incorporation de production.A capacity must be purchased for production embedding scenarios. Une fois une capacité achetée, la génération de jetons incorporés n’est pas limitée.There is no limit to embed token generation when a capacity is purchased.

Un exemple de ceci est disponible dans le fichier Controllers\HomeController.cs de l’exemple Incorporation pour votre organisation.A sample of this is available within Controllers\HomeController.cs of the Embedding for your organization sample.

Cela suppose la création d’une classe pour EmbedConfig et TileEmbedConfig.This assumes a class is created for EmbedConfig and TileEmbedConfig. Des exemples de ces opérations sont disponibles dans Models\EmbedConfig.cs et Models\TileEmbedConfig.cs.A sample of these are available within Models\EmbedConfig.cs and Models\TileEmbedConfig.cs.

Tableau de bordDashboard

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Dashboards.GenerateTokenInGroup(GroupId, dashboard.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = dashboard.EmbedUrl,
    Id = dashboard.Id
};

VignetteTile

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token for a tile.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Tiles.GenerateTokenInGroup(GroupId, dashboard.Id, tile.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new TileEmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = tile.EmbedUrl,
    Id = tile.Id,
    dashboardId = dashboard.Id
};

RapportReport

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Reports.GenerateTokenInGroup(GroupId, report.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = report.EmbedUrl,
    Id = report.Id
};

Étape 4 : charger un élément à l’aide de JavaScriptStep 4 - load an item using JavaScript

Vous pouvez utiliser JavaScript pour charger un tableau de bord dans un élément div sur votre page web.You can use JavaScript to load a dashboard into a div element on your web page. L’exemple utilise un modèle EmbedConfig/TileEmbedConfig, avec les affichages d’un tableau de bord, d’une vignette ou d’un rapport.The sample uses an EmbedConfig/TileEmbedConfig model along with views for a dashboard, tile or report. Pour obtenir un exemple complet de l’utilisation de l’API JavaScript, vous pouvez consulter l’exemple Microsoft Power BI Embedded.For a full sample of using the JavaScript API, you can use the Microsoft Power BI Embedded Sample.

Un exemple d’application associé est disponible dans l’exemple Incorporation pour votre organisation.An application sample of this is available within the Embedding for your organization sample.

Views\Home\EmbedDashboard.cshtmlViews\Home\EmbedDashboard.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="dashboardContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read dashboard Id from Model
    var embedDashboardId = "@Model.Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedDashboardId
    };

    // Get a reference to the embedded dashboard HTML element
    var dashboardContainer = $('#dashboardContainer')[0];

    // Embed the dashboard and display it within the div container.
    var dashboard = powerbi.embed(dashboardContainer, config);
</script>

Views\Home\EmbedTile.cshtmlViews\Home\EmbedTile.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="tileContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read tile Id from Model
    var embedTileId = "@Model.Id";

    // Read dashboard Id from Model
    var embedDashboardeId = "@Model.dashboardId";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'tile',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedTileId,
        dashboardId: embedDashboardeId
    };

    // Get a reference to the embedded tile HTML element
    var tileContainer = $('#tileContainer')[0];

    // Embed the tile and display it within the div container.
    var tile = powerbi.embed(tileContainer, config);
</script>

Views\Home\EmbedReport.cshtmlViews\Home\EmbedReport.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="reportContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read report Id from Model
    var embedReportId = "@Model.Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);
</script>

Étapes suivantesNext steps

Vous pouvez examiner un exemple d’application sur GitHub.A sample application is available on GitHub for you to review. Les exemples ci-dessus sont basés sur cet exemple.The above examples are based on that sample. Pour plus d’informations, consultez l’exemple Incorporation pour votre organisation.For more information, see Embedding for your organization sample.

Pour en savoir plus sur l’API JavaScript, consultez API JavaScript Power BI.More information is available for the JavaScript API, see Power BI JavaScript API.

D’autres questions ?More questions? Essayez d’interroger la communauté Power BITry asking the Power BI Community