Integrieren einer Kachel in eine App (Benutzer ist Besitzer der Daten)Integrate a tile into an app (user owns data)

Hier erfahren Sie, wie Sie mithilfe von REST-API-Aufrufen zusammen mit der Power BI-JavaScript-API eine Kachel in eine Web-App integrieren bzw. einbetten, wenn das Einbetten für Ihre Organisation erfolgt.Learn how to integrate, or embed, a tile into a web app using REST API calls along with the Power BI JavaScript API when embedding for your organization.

Eingebettete Kachel in Webanwendung

Für diese exemplarische Vorgehensweise benötigen Sie ein Power BI-Konto.To get started with this walkthrough, you need a Power BI account. Wenn Sie kein Konto haben, können Sie sich für ein kostenloses Power BI-Konto registrieren, oder Sie können Ihren 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, or you can create your own Azure Active Directory tenant for testing purposes.

Hinweis

Möchten Sie stattdessen mit einem Einbettungstoken eine Kachel für Ihre Kunden einbetten?Looking to embed a tile for your customers, using an embedtoken, instead? Weitere Informationen hierzu finden Sie unter Integrieren eines Dashboards, einer Kachel oder eines Berichts in die Anwendung (die App ist Besitzer der Daten).See, Integrate a dashboard, tile, or report into your application for your customers.

Zum Integrieren einer Kachel in eine Web-App verwenden Sie die Power BI-REST-API oder das Power BI-C#-SDK sowie ein Zugriffstoken für die AD-Autorisierung (Azure Active Directory), um eine Kachel abzurufen.To integrate a tile into a web app, you use the Power BI REST API, or the Power BI C# SDK, and an Azure Active Directory (AD) authorization access token to get a tile. Dann laden Sie die Kachel mithilfe desselben Zugriffstokens.Then, you load the tile using the same access 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 und Power BI-JavaScript-API.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Beispiel herunterladenDownload the sample

Diesem Artikel liegt der im Beispiel zum Integrieren einer Kachel in eine Web-App – integrate-tile-web-app auf GitHub verwendete Code zugrunde.This article shows the code used in the integrate-tile-web-app 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 Integrieren einer Kachel in eine Web-App – integrate-tile-web-app heruntergeladen haben, verwenden Sie die Client-ID und den geheimen Clientschlüssel, die Sie nach der Registrierung erhalten haben, damit das Beispiel in Azure AD authentifiziert werden kann.If you downloaded the integrate-tile-web-app, you use the Client ID and Client Secret you get, after registration, so that the sample can authenticate to Azure AD. Ändern Sie zum Konfigurieren des Beispiels die Client-ID und das Clientgeheimnis in der Datei cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.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.

Schritt 3: Abrufen einer KachelStep 3 - get a tile

Zum Abrufen einer Power BI-Kachel verwenden Sie den Vorgang Get Tiles (Kacheln abrufen), um eine Liste der Power BI-Kacheln für ein bestimmtes Dashboard abzurufen.To get a Power BI tile, you use the Get Tiles operation which gets a list of Power BI tiles from a given dashboard. Der Liste der Kacheln können Sie eine Kachel-ID und eine Einbettungs-URL entnehmen.From the list of tiles, you can get a tile id and embed URL.

Zunächst muss eine Dashboard-ID abgerufen werden, ehe Sie die Kachel abrufen können.A dashboard ID will need to be retrieved first before you can get the tile. Weitere Informationen zum Abrufen eines Dashboards finden Sie unter Integrieren eines Dashboards in eine App (Benutzer ist Besitzer der Daten).For information on how to retrieve a dashbaord, see Integrate a dashboard into an app (user owns data).

Abrufen von Kacheln mithilfe eines ZugriffstokensGet tiles using an access token

Mit dem Zugriffstoken, das Sie in Schritt 2 abgerufen haben, können Sie den Vorgang Get Tiles (Kacheln abrufen) aufrufen.With the access token you retrieved in step 2, you can call the Get Tiles operation. Der Vorgang Get Tiles (Kacheln abrufen) gibt eine Liste der Kacheln zurück.The Get Tiles operation returns a list of tiles. Sie können eine einzelne Kachel aus der Liste der Kacheln abrufen.You can get a single tile from the list of tiles. Im Folgenden finden Sie eine vollständige C#-Methode zum Abrufen einer Kachel.Below is a complete C# method to get a tile.

Zum Ausführen des REST-API-Aufrufs müssen Sie einen Autorisierungsheader im Format Träger {Zugriffstoken} einschließen.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Abrufen von Kacheln mit der REST-APIGet tiles with the REST API

Default.aspx.csDefault.aspx.cs

using Newtonsoft.Json;

//Get a tile from a dashboard. In this sample, you get the first tile.
protected void GetTile(string dashboardId, int index)
{
    //Configure tiles request
    System.Net.WebRequest request = System.Net.WebRequest.Create(
        String.Format("{0}Dashboards/{1}/Tiles",
        baseUri,
        dashboardId)) as System.Net.HttpWebRequest;

    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.Value));

    //Get tiles response from request.GetResponse()
    using (var response = request.GetResponse() as System.Net.HttpWebResponse)
    {
        //Get reader from response stream
        using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
        {
            //Deserialize JSON string
            PBITiles tiles = JsonConvert.DeserializeObject<PBITiles>(reader.ReadToEnd());

            //Sample assumes at least one Dashboard with one Tile.
            //You could write an app that lists all tiles in a dashboard
            if (tiles.value.Length > 0)
                tileEmbedUrl.Text = tiles.value[index].embedUrl;
        }
    }
}

//Power BI Tiles used to deserialize the Get Tiles response.
public class PBITiles
{
    public PBITile[] value { get; set; }
}
public class PBITile
{
    public string id { get; set; }
    public string title { get; set; }
    public string embedUrl { get; set; }
}

Abrufen von Kacheln mit dem .NET-SDKGet tiles using the .NET SDK

Mithilfe des .NET-SDK können Sie eine Liste der Dashboards abrufen und müssen die REST-API nicht direkt aufrufen.You can use the .NET SDK to retrieve a list of dashbaords instead of calling the REST API directly.

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

var tokenCredentials = new TokenCredentials(<ACCESS TOKEN>, "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))
{
    // Get a list of dashboards your "My Workspace"
    ODataResponseListDashboard tiles = client.Dashboards.GetDashboards();

    // Get a list of dashboards from a group (app workspace)
    ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(groupId);

    Dashboard dashboard = dashboards.Value.FirstOrDefault();

    // Get the first tile from the above dashbaord
    ODataResponseListTile tiles = client.Dashboards.GetTiles(dashboard.Id);

    Tile tile = tiles.Value.FirstOrDefault();
}

Schritt 4: Laden einer Kachel mit JavaScriptStep 4 - load a tile using JavaScript

Sie können mithilfe von JavaScript eine Kachel in ein div-Element auf Ihrer Webseite laden.You can use JavaScript to load a tile into a div element on your web page.

Default.aspxDefault.aspx

<!-- Embed Tile-->
<div> 
    <asp:Panel ID="PanelEmbed" runat="server" Visible="true">
        <div>
            <div><b class="step">Step 3</b>: Embed a tile</div>

            <div>Enter an embed url for a tile from Step 2 (starts with https://):</div>
            <input type="text" id="tb_EmbedURL" style="width: 1024px;" />
            <br />
            <input type="button" id="bEmbedTileAction" value="Embed Tile" />
        </div>

        <div id="tileContainer"></div>
    </asp:Panel>
</div>

Site.masterSite.master

window.onload = function () {
    // client side click to embed a selected tile.
    var el = document.getElementById("bEmbedTileAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedTile, false);
    } else {
        el.attachEvent('onclick', updateEmbedTile);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded tile if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedTile();
    }
};

// update embed tile
function updateEmbedTile() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    if (embedUrl === "")
        return;

    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'tile',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the tile.
    var tileContainer = document.getElementById('tileContainer');

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

    // tile.on will add an event handler which prints to Log window.
    tile.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });
}

Wenn Sie das Beispiel zum Integrieren einer Kachel in eine Web-App – integrate-tile-web-app heruntergeladen und ausgeführt haben, sieht das Beispiel ähnlich wie das folgende aus.If you downloaded and ran the integrate-tile-web-app, the sample will look similar to below.

Eingebettete Kachel in Webanwendung

Arbeiten mit Gruppen (App-Arbeitsbereiche)Working with groups (app workspaces)

Zum Einbetten einer Kachel aus einer Gruppe (App-Arbeitsbereich) müssen Sie die Liste aller verfügbaren Kacheln im Dashboard einer Gruppe mit dem folgenden REST-API-Aufruf abrufen.For embedding a tile from a group (app workspace), you will want to get the list of all available tiles within a group's dashboard using the following REST API call. Weitere Informationen zu diesem REST-API-Aufruf finden Sie unter Get Tiles (Kacheln abrufen).To find more information about this REST API call, see Get Tiles. Sie benötigen Berechtigungen in der Gruppe, damit die Anforderung Ergebnisse zurückgibt.You will need to have permission in the group for the request to return results.

https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards/{dashboard_id}/tiles

Die oben genannte API gibt die Liste der verfügbaren Kacheln zurück.The above API returns the list of the available tiles. Jede Kachel verfügt über eine EmbedUrl-Eigenschaft, die bereits so konstruiert ist, dass das Einbetten aus Gruppen unterstützt wird.Each tile has an EmbedUrl property which is already constructed to support group embedding.

https://app.powerbi.com/embed?dashboardId={dashboard_id}&tileId={tile_id}&groupId={group_id}

Nächste SchritteNext steps

Tile Embed im Wiki zu PowerBI-JavaScriptTile Embed on PowerBI-JavaScript Wiki

Power BI-JavaScript-APIPower BI JavaScript API.

Beispiel zu integrate-tile-web-app in GitHub.integrate-tile-web-app sample on GitHub.

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