Einbetten eines Dashboards, einer Kachel oder eines Berichts von Power BI in die AnwendungEmbed a Power BI dashboard, tile, or report into your application

Hier erfahren Sie, wie Sie mithilfe des Power BI-.NET-SDK und der Power BI-JavaScript-API ein Dashboard, eine Kachel oder einen Bericht in eine Web-App integrieren oder einbetten, wenn das Einbetten für Ihre Kunden erfolgt.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. Dies ist in der Regel das Szenario für ISVs.This is typically the ISV scenario.

Eingebettetes Dashboard

Für diese exemplarische Vorgehensweise benötigen Sie ein Power BI Pro-Konto.To get started with this walkthrough, you need a Power BI Pro account. Wenn Sie kein Konto haben, können Sie sich für ein kostenloses Power BI-Konto registrieren und anschließend für eine Power BI Pro – Testversion registrieren, oder Sie können einen eigenen Azure Active Directory-Mandanten für Testzwecke erstellen.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.

Hinweis

Möchten Sie stattdessen ein Dashboard für Ihre Organisation einbetten?Looking to embed a dashboard for your organization instead? Siehe Integrieren eines Dashboards in eine App für Ihre Organisation.See, Integrate a dashboard into an app for your organization.

Zum Integrieren eines Dashboards in eine Web-App verwenden Sie die Power BI-API und ein Zugriffstoken für die Azure Active Directory (Azure AD)-Autorisierung, um ein Dashboard abzurufen.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. Anschließend laden Sie das Dashboard mit einem Einbettungstoken.Then, you load the dashboard using an embed token. Die Power BI-API bietet programmgesteuerten Zugriff auf bestimmte Power BI-Ressourcen.The Power BI API provides programmatic access to certain Power BI resources. Weitere Informationen finden Sie unter Übersicht über Power BI-REST-API, Power BI-.NET-SDK und Power BI-JavaScript-API.For more information, see Overview of Power BI REST API, Power BI .NET SDK and the Power BI JavaScript API.

Beispiel herunterladenDownload the sample

Diesem Artikel liegt der im Beispiel zum Einbetten für Ihre Organisation auf GitHub verwendete Code zugrunde.This article shows the code used in the Embedding for your organization sample on GitHub. Laden Sie das Beispiel herunter, um die exemplarische Vorgehensweise nachvollziehen zu können.To follow along with this walkthrough, you can download the sample.

Schritt 1 – Registrieren einer App in Azure ADStep 1 - register an app in Azure AD

Sie müssen Ihre Anwendung bei Azure AD registrieren, um REST-API-Aufrufe ausführen zu können.You will need to register your application with Azure AD in order to make REST API calls. Weitere Informationen finden Sie unter Registrieren einer Azure AD-App zum Einbetten von Power BI-Inhalten.For more information, see Register an Azure AD app to embed Power BI content.

Wenn Sie das Beispiel zum Einbetten für Ihre Organisation heruntergeladen haben, verwenden Sie die Client-ID, die Sie nach der Registrierung erhalten haben, damit das Beispiel in Azure AD authentifiziert werden kann.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. Ändern Sie zum Konfigurieren des Beispiels die clientId in der Datei web.config.To configure the sample, change the clientId in the web.config file.

Schritt 2: Abrufen eines Zugriffstokens aus Azure ADStep 2 - get an access token from Azure AD

In der Anwendung müssen Sie zunächst ein Zugriffstoken aus Azure AD abrufen, ehe Sie die Power BI-REST-API aufrufen können.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. Weitere Informationen finden Sie unter Authentifizieren von Benutzern und Abrufen eines Azure AD-Zugriffstokens für die Power BI-App.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Beispiele hierfür finden Sie in den Aufgaben für die einzelnen Inhaltselemente in Controllers\HomeController.cs.You can see examples of this within each content item task in Controllers\HomeController.cs.

Schritt 3: Abrufen eines InhaltselementsStep 3 - get a content item

Zum Einbetten von Power BI-Inhalten müssen Sie einige Schritte ausführen, um sicherzustellen, dass der Vorgang ordnungsgemäß ausgeführt wird.To embed your Power BI content, you will need to do a couple of things to make sure it embeds correctly. Alle diese Schritte können zwar direkt mit der REST-API ausgeführt werden. Die Beispielanwendung und die hier angeführten Beispiele stützen sich jedoch auf das .NET SDK.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.

Erstellen des Power BI-Clients mit dem ZugriffstokenCreate the Power BI Client with your access token

Mit dem Zugriffstoken erstellen Sie das Power BI-Clientobjekt, über den Sie mit den Power BI-APIs interagieren können.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. Dies erfolgt durch Einschließen des AccessToken mit einem Microsoft.Rest.TokenCredentials-Objekt.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.
}

Abrufen des einzubettenden InhaltselementsGet the content item you want to embed

Rufen Sie mit dem Power BI-Clientobjekt einen Verweis auf das Element ab, das eingebettet werden soll.Use the Power BI client object to retrieve a reference to the item you want to embed. Sie können Dashboards, Kacheln und Berichte einbetten.You can embed dashboards, tiles or reports. Im folgenden Beispiel wird veranschaulicht, wie Sie das erste Dashboard, die erste Kachel oder den ersten Bericht aus einem bestimmten Arbeitsbereich abrufen.Here is an example of how to retrieve the first dashboard, tile or report from a given workspace.

Ein Beispiel hierfür finden Sie in Controllers\HomeController.cs im Beispiel zu Daten im App-Besitz.A sample of this is available within Controllers\HomeController.cs of the App Owns Data sample.

DashboardsDashboards

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();

KachelTile

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();

BerichtReport

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();

Erstellen des EinbettungstokensCreate the embed token

Es muss ein Einbettungstoken generiert werden, das aus der JavaScript-API verwendet werden kann.An embed token needs to be generated which can be used from the JavaScript API. Das Einbettungstoken ist spezifisch für das eingebettete Element.The embed token will be specific to the item you are embedding. Das heißt, dass Sie bei jedem Einbetten eines Power BI-Inhaltselements dafür ein neues Einbettungstoken erstellen müssen.This means that any time you embed a piece of Power BI content, you need to create a new embed token for it. Weitere Informationen hierzu, u.a. zum erforderlichen accessLevel, finden Sie unter GenerateToken-API.For more information, including which accessLevel to use, see GenerateToken API.

Wichtig

Da Einbettungstokens nur für das Testen von Bereitstellungen vorgesehen sind, ist die Anzahl von Einbettungstokens limitiert, die ein Power BI-Hauptkonto generieren kann.Because embed tokens are intended for development testing only, the number of embed tokens a Power BI master account can generate is limited. Es muss eine Kapazität erworben werden, um Einbettungsszenarios für die Produktion verwenden zu können.A capacity must be purchased for production embedding scenarios. Wenn eine Kapazität erworben wird, gibt es keine Einschränkungen bei der Generierung von Einbettungstokens.There is no limit to embed token generation when a capacity is purchased.

Ein Beispiel hierfür finden Sie in Controllers\HomeController.cs im Beispiel zum Einbetten für Ihre Organisation.A sample of this is available within Controllers\HomeController.cs of the Embedding for your organization sample.

Dabei wird angenommen, dass eine Klasse für EmbedConfig und TileEmbedConfig erstellt wird.This assumes a class is created for EmbedConfig and TileEmbedConfig. Ein Beispiel hierfür ist in Models\EmbedConfig.cs und Models\TileEmbedConfig.cs verfügbar.A sample of these are available within Models\EmbedConfig.cs and Models\TileEmbedConfig.cs.

DashboardDashboard

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
};

KachelTile

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
};

BerichtReport

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
};

Schritt 4: Laden eines Elements mit JavaScriptStep 4 - load an item using JavaScript

Sie können mithilfe von JavaScript ein Dashboard in ein div-Element auf Ihrer Webseite laden.You can use JavaScript to load a dashboard into a div element on your web page. Im Beispiel wird ein Modell „EmbedConfig/TileEmbedConfig“ mit Ansichten für ein Dashboard, eine Kachel oder einen Bericht verwendet.The sample uses an EmbedConfig/TileEmbedConfig model along with views for a dashboard, tile or report. Ein komplettes Beispiel für die Verwendung der JavaScript-API ist im Beispiel zu Microsoft Power BI Embedded verfügbar.For a full sample of using the JavaScript API, you can use the Microsoft Power BI Embedded Sample.

Ein Anwendungsbeispiel hierfür ist im Beispiel zum Einbetten für Ihre Organisation verfügbar.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>

Nächste SchritteNext steps

Eine Beispielanwendung können Sie auf GitHub einsehen.A sample application is available on GitHub for you to review. Die obigen Beispiele basieren auf diesem Beispiel.The above examples are based on that sample. Weitere Informationen finden Sie im Beispiel zum Einbetten für Ihre Organisation.For more information, see Embedding for your organization sample.

Weitere Informationen sind für die JavaScript-API verfügbar; siehe Power BI-JavaScript-API.More information is available for the JavaScript API, see Power BI JavaScript API.

Weitere Fragen?More questions? Stellen Sie Ihre Frage in der Power BI-Community.Try asking the Power BI Community