Informazioni su come integrare, o incorporare, un dashboard in un'app Web usando C# e l'API Power BI, assieme al codice JavaScript.

Per eseguire questa procedura dettagliata, è necessario un account Power BI. Se non si dispone di un account, è possibile iscriversi a un account di Power BI gratuito, oppure creare il proprio tenant di Azure Active Directory a scopo di test.

Per integrare un dashboard in un'app Web, occorre usare l'API Power BI e un token di accesso di autorizzazione di Azure Active Directory (AD) per ottenere un dashboard. Caricare quindi il dashboard in un elemento div con lo stesso token di accesso. L'API Power BI fornisce l'accesso a livello di codice a determinate risorse di Power BI. Per altre informazioni, vedere Panoramica dell'API REST di Power BI e API JavaScript di Power BI

Scaricare l'esempio

Questo articolo illustra il codice usato nell'esempio di integrazione di un dashboard in GitHub. Per proseguire con questa procedura dettagliata, è necessario scaricare l'esempio.

Se si sta cercando un esempio che implichi l'incorporamento di elementi per gli utenti esterni a Power BI, è possibile vedere Incorporamento per gli utenti esterni a Power BI.

Passaggio 1: Registrare un'app in Azure AD

Per usare l'API Power BI, è necessario registrare un'app nel tenant di Azure Active Directory. Questo passaggio è necessario per ottenere un ID client e un segreto client che identificano l'app Web in Azure AD. Senza un ID client e un segreto client Azure AD non può autenticare l'app Web. Se è stato scaricato l'esempio di integrazione di un dashboard, usare l'ID Client e il segreto client ottenuti dopo la registrazione per configurare l'esempio in modo che possa autenticarsi con Azure AD.

È stata creata una pagina d'ausilio per la registrazione. Per eseguire questo passaggio andare a dev.powerbi.com/apps.

  1. Passare a dev.powerbi.com/apps.

  2. Selezionare Accedi con l'account esistentee accedere al proprio account di Power BI.

  3. Immettere un nome in Nome app. Per questa procedura dettagliata immettere Esempio di integrazione di un dashboard.

  4. Per Tipo di app selezionare Server-side Web app (App Web lato server) nell'elenco a discesa.

  5. Immettere un URL di reindirizzamento. Per questa procedura dettagliata Azure AD reindirizza alla pagina predefinita, quindi immettere http://localhost:13526. Azure Active Directory (AD) eseguirà il reindirizzamento a questa pagina con un codice di autorizzazione. Per informazioni su come acquisire un token di accesso per accedere ai dashboard di Power BI con un codice di autorizzazione, vedere Ottenere un token di accesso per l'autenticazione.

  6. Immettere un valore per Home page. Per questa procedura dettagliata, immettere http://localhost:13526 che corrisponde alla home page dell'esempio.

  7. In Scegliere le API per accedere selezionare Read All Dashboards (Lettura di tutti i dashboard). Per tutte le autorizzazioni delle app Power BI, vedere Autorizzazioni di Power BI.

  8. Selezionare Registra app e salvare l'ID client e il segreto client generati. Un ID client e un segreto client identificano l'app in Azure Ad.

Configurare l'applicazione di esempio

Se è stato scaricato l'esempio di integrazione di un dashboard, usare l'ID Client e il segreto client ottenuti dopo la registrazione in modo che l'esempio possa autenticarsi con Azure AD. Per configurare l'esempio, modificare l'ID Client e il segreto Client nel file web.config.

Passaggio 2: Ottenere un dashboard

Per ottenere un dashboard di Power BI, usare l'operazione Get Dashboards che recupera un elenco di report di dashboard di Power BI. Dall'elenco dei dashboard è possibile ottenere un ID dashboard.

Token di accesso di Azure Active Directory

Prima di poter chiamare l'operazione Get Dashboards o qualsiasi altra operazione di Power BI, è necessario ottenere un token di accesso per l'autenticazione (token di accesso) di Azure Active Directory. Un token di accesso viene usato per consentire all'app di accedere ai dashboard, ai riquadri e ai report di Power BI. Per altre informazioni sul flusso di token di accesso di Azure Active Directory, vedere Flusso di concessione del codice di autorizzazione. La sezione successiva illustra come ottenere un token di accesso in un'app Web.

Ottenere un codice di autorizzazione da Azure AD

Il primo passaggio per ottenere un token di accesso consiste nell'ottenere un codice di autorizzazione da Azure AD. A questo scopo, creare una stringa di query con le proprietà seguenti e reindirizzarla ad Azure AD.

Stringa di query del codice di autorizzazione

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

Dopo aver creato una stringa di query, reindirizzarla ad Azure AD per ottenere un codice di autorizzazione. Di seguito è riportato un metodo C# completo per creare una stringa di query per il codice di autorizzazione e reindirizzarla ad Azure AD. Dopo aver ottenuto il codice di autorizzazione, si ottiene un token di accesso usando il codice di autorizzazione.

Ottenere il codice di autorizzazione

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

Ottenere un token di accesso dal codice di autorizzazione

A questo punto si sarà ottenuto un codice di autorizzazione da Azure AD. Dopo che Azure AD avrà reindirizzato all'utente l'app Web con un codice di autorizzazione, si userà il codice di autorizzazione per ottenere un token di accesso. Di seguito è riportato un esempio di C# che è possibile usare nell'evento Page_Load.

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

Ottenere un dashboard con un token di accesso

Una volta ottenuto un token di accesso, è possibile chiamare l'operazione Get Dashboards. L'operazione Get Dashboards restituisce un elenco di dashboard. Dall'elenco dei dashboard è possibile ottenere un dashboard. Di seguito è riportato un metodo C# completo per ottenere un dashboard. Per esempi su come usare l'API REST di Power BI, vedere API REST di Power BI in APIARY.

Ottenere un dashboard

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

Passaggio 3: caricare un dashboard con JavaScript

È possibile usare JavaScript per caricare un dashboard in un elemento div nella pagina Web.

<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/>";
    });
}

Se è stato scaricato ed eseguito l'esempio di integrazione di un dashboard, avrà un aspetto simile al seguente.

Eventi selezionati nel riquadro

Nell'esempio precedente, si sarà notato che è possibile gestire gli eventi quando si fa clic sul riquadro nel dashboard. Per altre informazioni sugli eventi, vedere Gestione degli eventi all'interno dell'API JavaScript.

// 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/>";
});

Se è stato scaricato ed eseguito l'esempio di integrazione di un dashboard,facendo clic in un riquadro verrà generato del testo sotto al dashboard. Il testo dovrebbe essere simile a quello indicato di seguito. Ciò consente di registrare che è stato fatto clic su un riquadro e quindi l'utente potrà passare al

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

Utilizzo dei gruppi

Per incorporare un dashboard da un gruppo, è consigliabile ottenere l'elenco di tutti i dashboard disponibili all'interno di un gruppo usando la seguente chiamata all'API REST. Per altre informazioni su questa chiamata all'API REST, vedere Get Dashboards (Ottenere dashboard).

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

L'API precedente restituisce l'elenco dei dashboard disponibili. Ogni dashboard presenta una proprietà EmbedUrl che è già concepita per supportare l'incorporamento del gruppo.

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

Limitazioni

  • Gli utenti finali che accedono ai dashboard incorporati devono avere account di Power BI e poter accedere ai dashboard condivisi.

  • Attualmente, Domande e risposte non è supportato nei dashboard incorporati.

  • Come limitazione temporanea, quando si condivide un dashboard con gruppi di sicurezza, l'utente deve accedere ai dashboard in PowerBI.com prima di poterlo visualizzare incorporato.

Vedere anche

Esempio di integrazione di un dashboard
Incorporamento di esempio per gli utenti esterni a Power BI
Autorizzazioni delle app
API JavaScript di Power BI
API REST di Power BI in APIARY

Altre domande? Provare a rivolgersi alla community di Power BI