In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie ein Dashboard mithilfe von C# und der Power BI-API sowie JavaScript-Code in eine Web-App integrieren bzw. einbetten.

Für diese exemplarische Vorgehensweise benötigen Sie ein Power BI-Konto. 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.

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. Anschließend laden Sie das Dashboard mit demselben Zugriffstoken in ein div-Element. Die Power BI-API bietet programmgesteuerten Zugriff auf bestimmte Power BI-Ressourcen. Weitere Informationen finden Sie unter Übersicht über Power BI-REST-API und Power BI-JavaScript-API

Beispiel herunterladen

Diesem Artikel liegt der im Beispiel zum Integrieren eines Dashboards auf GitHub verwendete Code zugrunde. Um die exemplarische Vorgehensweise nachvollziehen zu können, sollten Sie das Beispiel herunterladen.

Wenn Sie nach einem Beispiel suchen, das das Einbetten von Elementen für Nicht-Power-BI-Benutzer umfasst, lesen Sie Registrieren einer App zum Einbetten von Power BI-Inhalten.

Schritt 1 – Registrieren einer App in Azure AD

Um die Power BI-API zu verwenden, müssen Sie eine App bei Ihrem Azure Active Directory-Mandanten registrieren. Dies muss zuerst erfolgen, damit Sie über eine Client-ID und einen geheimen Clientschlüssel verfügen, mit denen Ihre Web-App in Azure AD identifiziert wird. Ohne Client-ID und geheimen Clientschlüssel kann die Web-App in Azure AD nicht authentifiziert werden. Wenn Sie das Beispiel zum Integrieren eines Dashboards heruntergeladen haben, verwenden Sie die Client-ID und den geheimen Clientschlüssel, die Sie nach der Registrierung zum Konfigurieren des Beispiels erhalten haben, damit das Beispiel in Azure AD authentifiziert werden kann.

Wir haben eine Seite erstellt, die Sie bei der Registrierung unterstützt. Sie können die Seite dev.powerbi.com/apps aufrufen, um diesen Schritt auszuführen.

  1. Öffnen Sie die Seite dev.powerbi.com/apps.

  2. Klicken Sie auf Mit Ihrem vorhandenen Konto anmelden, und melden Sie sich bei Ihrem Power BI-Konto an.

  3. Geben Sie einen App-Namen ein. Geben Sie für diese exemplarische Vorgehensweise Integrate a dashboard sample ein.

  4. Wählen Sie für App-Typ in der Dropdownliste Server-side Web app (Serverseitige Web-App) aus.

  5. Geben Sie eine Umleitungs-URLein. Bei dieser exemplarischen Vorgehensweise wird Azure AD zurück an die Standardseite umgeleitet, geben Sie daher „http://localhost:13526“ ein. Azure Active Directory (AD) wird mit einem Autorisierungscode an diese Seite umgeleitet. Informationen zum Abrufen eines Zugriffstokens für den Zugriff auf Power BI-Dashboards mithilfe eines Autorisierungscodes finden Sie unter Abrufen eines Authentifizierungszugriffstokens.

  6. Geben Sie eine Startseite ein. Geben Sie für diese exemplarische Vorgehensweise „http://localhost:13526“ ein, die Startseite des Beispiels.

  7. Wählen Sie für Choose APIs to access (APIs für Zugriff auswählen) die Option Read All Dashboards (Alle Dashboards lesen) aus. Informationen zu allen Berechtigungen für Power BI-Apps finden Sie unter App-Berechtigungen.

  8. Klicken Sie auf App registrieren, und speichern Sie die Client-ID und den geheimen Clientschlüssel, die generiert wurden. Mit der Client-ID und dem geheimen Clientschlüssel wird die App in Azure AD identifiziert.

Konfigurieren der Beispielanwendung

Wenn Sie das Beispiel zum Integrieren eines Dashboards 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. Ändern Sie zum Konfigurieren des Beispiels die Client-ID und den geheimen Clientschlüssel in „web.config“.

Schritt 2: Abrufen eines Dashboards

Zum Abrufen eines Power BI-Dashboards verwenden Sie den Vorgang Get Dashboards (Dashboards abrufen), um eine Liste der Power BI-Dashboards abzurufen. Aus dieser Dashboardliste können Sie dann eine Dashboard-ID abrufen.

Abrufen eines Zugriffstokens für Azure Active Directory

Damit Sie den Vorgang Get Dashboards (Dashboards abrufen) oder einen anderen Power BI-Vorgang aufrufen können, benötigen Sie ein Azure Active Directory-Authentifizierungszugriffstoken (Zugriffstoken). Über ein Zugriffstoken erhält Ihre App Zugriff auf Power BI-Dashboards, -Kacheln und -Berichte. Weitere Informationen zum Azure Active Directory-Flow (Azure AD) für Zugriffstoken finden Sie unter Authorization Code Grant-Flow. Im nächsten Abschnitt erfahren Sie, wie Sie in einer Web-App ein Zugriffstoken abrufen.

Abrufen eines Autorisierungscodes von Azure AD

Der erste Schritt beim Abrufen eines Zugriffstokens ist das Abrufen eines Autorisierungscodes von Azure AD. Zu diesem Zweck erstellen Sie eine Abfragezeichenfolge mit den folgenden Eigenschaften und leiten diese weiter an Azure AD.

Abfragezeichenfolge für den Autorisierungscode

var @params = new NameValueCollection
{
    //Azure AD will return an authorization code.
    {"response_type", "code"},

    //Client ID is used by the application to identify themselves to the users that they are requesting permissions from.
    //You get the client id when you register your Azure app.
    {"client_id", Settings.Default.ClientID},

    //Resource uri to the Power BI resource to be authorized
    //The resource uri is hard-coded for sample purposes
    {"resource", "https://analysis.windows.net/powerbi/api"},

    //After app authenticates, Azure AD will redirect back to the web app. In this sample, Azure AD redirects back
    //to Default page (Default.aspx).
    { "redirect_uri", Settings.Default.RedirectUri}
};

Nachdem Sie eine Abfragezeichenfolge erstellt haben, leiten Sie diese weiter an Azure AD, um einen Autorisierungscode abzurufen. Im Folgenden finden Sie eine vollständige C#-Methode zum Erstellen einer Abfragezeichenfolge für den Autorisierungscode und leiten diese an Azure AD weiter. Wenn Sie über den Autorisierungscode verfügen, erhalten Sie ein Zugriffstoken mithilfe des Autorisierungscodes.

Abrufen des Autorisierungscodes

protected void signInButton_Click(object sender, EventArgs e)
{
    //Create a query string
    //Create a sign-in NameValueCollection for query string
    var @params = new NameValueCollection
    {
        //Azure AD will return an authorization code. 
        //See the Redirect class to see how "code" is used to AcquireTokenByAuthorizationCode
        {"response_type", "code"},

        //Client ID is used by the application to identify themselves to the users that they are requesting permissions from. 
        //You get the client id when you register your Azure app.
        {"client_id", Properties.Settings.Default.ClientID},

        //Resource uri to the Power BI resource to be authorized
        {"resource", Properties.Settings.Default.PowerBiAPI},

        //After user authenticates, Azure AD will redirect back to the web app
        {"redirect_uri", "http://localhost:13526/Redirect"}
    };

    //Create sign-in query string
    var queryString = HttpUtility.ParseQueryString(string.Empty);
    queryString.Add(@params);

    //Redirect authority
    //Authority Uri is an Azure resource that takes a client id to get an Access token
    string authorityUri = Properties.Settings.Default.AADAuthorityUri;
    var authUri = String.Format("{0}?{1}", authorityUri, queryString);
    Response.Redirect(authUri);
}

Abrufen eines Zugriffstokens aus dem Autorisierungscode

Sie verfügen nun über einen Autorisierungscode von Azure AD. Nach der Weiterleitung durch Azure AD mit einem Autorisierungscode an Ihre Web-App verwenden Sie den Autorisierungscode, um ein Zugriffstoken abzurufen. Im Folgenden finden Sie ein C#-Beispiel, das Sie im Page_Load-Ereignis verwenden können.

protected void Page_Load(object sender, EventArgs e)
{

    //Test for AuthenticationResult
    if (Session[authResultString] != null)
    {
        //Get the authentication result from the session
        authResult = (AuthenticationResult)Session[authResultString];

        //Show Power BI Panel
        signInStatus.Visible = true;
        signInButton.Visible = false;

        //Set user and token from authentication result
        userLabel.Text = authResult.UserInfo.DisplayableId;
        accessTokenTextbox.Text = authResult.AccessToken;
    }
}

Abrufen eines Dashboards mit einem Zugriffstoken

Mit diesem Zugriffstoken können Sie den Vorgang Get Dashboards (Dashboards abrufen) aufrufen. Der Vorgang Get Dashboards (Dashboards abrufen) gibt eine Liste von Dashboards zurück. Sie können aus dieser Dashboardliste dann ein Dashboard abrufen. Im Folgenden finden Sie eine vollständige C#-Methode zum Abrufen eines Dashboards. Beispiele zum Verwenden der Power BI-REST-API finden Sie unter Power BI-REST-API in APIARY.

Abrufen von Dashboards

protected void getDashboardsButton_Click(object sender, EventArgs e)
{
    string responseContent = string.Empty;

    //Configure dashboards request
    System.Net.WebRequest request = System.Net.WebRequest.Create(String.Format("{0}dashboards", baseUri)) as System.Net.HttpWebRequest;
    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", authResult.AccessToken));

    //Get dashboards 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()))
        {
            responseContent = reader.ReadToEnd();

            //Deserialize JSON string
            PBIDashboards PBIDashboards = JsonConvert.DeserializeObject<PBIDashboards>(responseContent);

            if (PBIDashboards != null)
            {
                var gridViewDashboards = PBIDashboards.value.Select(dashboard => new {
                    Id = dashboard.id,
                    DisplayName = dashboard.displayName,
                    EmbedUrl = dashboard.embedUrl
                });

                this.GridView1.DataSource = gridViewDashboards;
                this.GridView1.DataBind();
            }
        }
    }
}

//Power BI Dashboards used to deserialize the Get Dashboards response.
public class PBIDashboards
{
    public PBIDashboard[] value { get; set; }
}
public class PBIDashboard
{
    public string id { get; set; }
    public string displayName { get; set; }
    public string embedUrl { get; set; }
    public bool isReadOnly { get; set; }
}

Schritt 3: Laden eines Dashboards mit JavaScript

Sie können mithilfe von JavaScript ein Dashboard in ein div-Element auf Ihrer Webseite laden.

<input type="text" id="tb_EmbedURL" style="width: 1024px;" />
<input type="button" id="bEmbedDashboardAction" value="Embed Dashboard" />
<div id="dashboardContainer"></div>


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

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

// update embed dashboard
function updateEmbedDashboard() {

    // 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: 'dashboard',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

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

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

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

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.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 eines Dashboards heruntergeladen und ausgeführt haben, ähnelt das Beispiel dem in der folgenden Abbildung.

TileClicked-Ereignisse

Im Beispiel oben haben Sie möglicherweise festgestellt, dass Sie Ereignisse behandeln können, wenn auf die Kachel im Dashboard geklickt wird. Weitere Informationen zu Ereignissen finden Sie unter Behandeln von Ereignissen in der JavaScript-API.

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

// dashboard.on will add an event handler which prints to Log window.
dashboard.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 eines Dashboards heruntergeladen und ausgeführt haben, wird beim Klicken auf eine Kachel Text unter dem Dashboard ausgegeben. Der Text sollte ungefähr wie folgt aussehen. Dies ermöglicht es Ihnen, das Klicken auf eine Kachel zu protokollieren und den Benutzer weiterzuleiten.

Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "", "navigationUrl": "https://app.powerbi.com/dashboards/fcff76f9-15ff-4a8e-8242-275ac9c25b90/qna?q=count%20of%20new%20hires%20from%20July%202014%20to%20December%202014", "tileId": "0e99b45c-9b53-4920-b239-cee7d37d2369" }
---------
Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "https://app.powerbi.com/reportEmbed?reportId=ab199308-80b1-4626-9823-43a84623bd9c", "navigationUrl": "https://app.powerbi.com/reports/ab199308-80b1-4626-9823-43a84623bd9c/ReportSection1", "tileId": "ffc30447-674a-4511-944f-79e182d719de", "pageName": "ReportSection1" }
---------

Arbeiten mit Gruppen

Zum Einbetten eines Dashboards aus einer Gruppe muss die Liste aller verfügbaren Dashboards in einer Gruppe durch den folgenden REST-API-Aufruf abgerufen werden. Weitere Informationen zu diesem REST-API-Aufruf finden Sie unter Abrufen von Dashboards.

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

Die oben genannte API gibt die Liste der verfügbaren Dashboards zurück. Jedes Dashboard verfügt über eine EmbedUrl-Eigenschaft, die bereits so konstruiert ist, dass das Einbetten aus Gruppen unterstützt wird.

https://app.powerbi.com/dashboardEmbed?dashboardId={dashboardId}&groupId={groupId}

Einschränkungen

  • Die Endbenutzer, die auf die eingebetteten Dashboards zugreifen, müssen über Power BI-Konten verfügen, und die Dashboards müssen für sie freigegeben sein.

  • Q&A wird derzeit in eingebetteten Dashboards nicht unterstützt.

  • Zudem gilt eine vorübergehende Einschränkung: Beim gemeinsamen Nutzen eines Dashboards mit Sicherheitsgruppen müssen Benutzer zunächst die Dashboards auf „PowerBI.com“ aufrufen, um das eingebettete Dashboard zu sehen.

Siehe auch

Beispiel zum Integrieren eines Dashboards
Beispiel für Einbetten (Embedding) für Nicht-Power-BI-Benutzer
App-Berechtigungen
Power BI-JavaScript-API
Power BI-REST-API in APIARY

Weitere Fragen? Stellen Sie Ihre Frage in der Power BI-Community.