Découvrez comment intégrer (ou incorporer) un tableau de bord dans une application web à l’aide de C#, de l’API Power BI et de code JavaScript.

Pour vous familiariser avec cette procédure pas à pas, vous avez besoin d’un compte Power BI. Si vous n’avez pas de compte, consultez la rubrique S’inscrire à Power BI.

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. Chargez ensuite le tableau de bord dans un élément div en utilisant le même jeton d’accès. L’API Power BI fournit un accès par programme à certaines ressources Power BI. Pour plus d’informations, consultez Vue d’ensemble de l’API REST de Power BI et API JavaScript Power BI.

Télécharger l’exemple

Cet article explique le code utilisé dans l’exemple d’intégration de tableau de bord sur GitHub. Pour suivre cette procédure pas à pas, vous devez télécharger l’exemple.

Étape 1 - Inscrire une application dans Azure AD

Pour utiliser l’API Power BI, vous devez inscrire une application auprès de votre locataire Azure Active Directory. Vous devez commencer par cette inscription pour obtenir un ID client et une Clé secrète client qui identifient votre application web dans Azure AD. Sans ID client et Clé secrète client, Azure AD ne peut pas authentifier votre application web. Si vous avez téléchargé l’exemple d’intégration de tableau de bord, vous utilisez l’ID Client et la Clé secrète client que vous obtenez après inscription pour configurer l’exemple afin que ce dernier puisse s’authentifier auprès d’Azure AD.

Nous avons créé une page pour vous aider lors de l’inscription. Vous pouvez accéder à dev.powerbi.com/apps pour effectuer cette étape.

  1. Accédez à dev.powerbi.com/apps.

  2. Sélectionnez Connectez-vous avec votre compte existant, puis connectez-vous à votre compte Power BI.

  3. Entrez un Nom d’application. Pour cette procédure pas à pas, entrez Exemple d’intégration de tableau de bord.

  4. Pour Type d’application, sélectionnez Application web côté serveur dans la liste déroulante.

  5. Entrez une URL de redirection. Pour cette procédure pas à pas, Azure AD effectue une redirection vers la page par défaut, par conséquent, entrez http://localhost:13526. Azure Active Directory (AD) redirige vers cette page avec un Code d’autorisation. Pour savoir comment acquérir un jeton d’accès pour accéder aux tableaux de bord Power BI à l’aide d’un code d’autorisation, consultez Obtenir un jeton d’accès d’authentification.

  6. Entrez une Page d’accueil. Pour cette procédure pas à pas, entrez http://localhost:13526, soit la page d’accueil de l’exemple.

  7. Pour Choose APIs to access (Choisissez les API auxquelles accéder), sélectionnez Read All Dashboards (Lire tous les tableaux de bord). Pour toutes les autorisations d’application Power BI, consultez Autorisations d’application.

  8. Sélectionnez Inscrire l’application, puis enregistrez l’ID client et la Clé secrète client qui ont été générés. Un ID client et une Clé secrète client identifient l’application dans Azure AD.

Configurer l’exemple d’application

Si vous avez téléchargé l’exemple d’intégration de tableau de bord, vous utilisez l’ID client et la Clé secrète client que vous obtenez après inscription pour que l’exemple puisse s’authentifier auprès d’Azure AD. Pour configurer l’exemple, modifiez l’ID client et la Clé secrète client dans le fichier web.config.

Étape 2 - Obtenir un tableau de bord

Pour obtenir un tableau de bord Power BI, vous utilisez l’opération Obtenir des tableaux de bord opération qui obtient une liste de tableaux de bord Power BI. Dans la liste des tableaux de bord, vous pouvez obtenir un ID de tableau de bord.

Jeton d’accès Azure Active Directory

Avant de pouvoir appeler l’opération Obtenir des tableaux de bord ou toute autre opération Power BI, vous devez obtenir un jeton d’accès d’authentification Azure Active Directory (jeton d’accès). Un jeton d’accès est utilisé pour autoriser l’accès de votre application aux tableaux de bord, rapports et vignettes Power BI. Pour en savoir plus sur le flux de jetons d’accès dans Azure Active Directory, consultez Flux d’octroi d’un code d’autorisation Azure AD. La section suivante vous montre comment obtenir un jeton d’accès dans une application web.

Obtenir un code d’autorisation à partir d’Azure AD

La première étape pour obtenir un jeton d’accès est de vous procurer un code d’autorisation depuis Azure AD. Pour ce faire, vous créez une chaîne de requête avec les propriétés suivantes, et redirigez vers Azure AD.

Chaîne de requête de code d’autorisation

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

Après avoir créé une chaîne de requête, vous redirigez vers Azure AD pour obtenir un code d’autorisation. Voici une méthode C# complète pour créer une chaîne de requête de code d’autorisation et rediriger vers Azure AD. Une fois que vous avez le code d’autorisation, vous obtenez un jeton d’accès à l’aide du code d’autorisation.

Obtenir un code d’autorisation

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

Obtenir un jeton accès à partir du code d’autorisation

Vous devez maintenant avoir un code d’autorisation d’Azure AD. Une fois qu’Azure AD vous redirige vers votre application web avec un code d’autorisation, vous utilisez le code d’autorisation pour obtenir un jeton d’accès. Voici un exemple de code C# que vous pouvez utiliser dans l’événement 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;
    }
}

Obtenir un tableau de bord avec un jeton d’accès

Maintenant que vous disposez d’un jeton d’accès, vous pouvez appeler l’opération Obtenir des tableaux de bord. L’opération Obtenir des tableaux de bord renvoie la liste des tableaux de bord. Vous obtenez un tableau de bord à partir de la liste de tableaux de bord. Voici une méthode C# complète pour obtenir un tableau de bord. Pour obtenir des exemples d’utilisation de l’API REST Power BI, consultez la référence sur l’API REST Power BI sur APIARY.

Obtenir un tableau de bord

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

Étape 3 - Charger un tableau de bord à l’aide de JavaScript

Vous pouvez utiliser JavaScript pour charger un tableau de bord dans un élément div sur votre page 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/>";
    });
}

Si vous avez téléchargé et exécuté l’exemple d’intégration de tableau de bord, l’exemple se présente comme ci-dessous.

Événements relatifs à une vignette sur laquelle un utilisateur a cliqué

Dans l’exemple ci-dessus, vous avez peut-être remarqué que vous pouvez gérer les événements quand un utilisateur clique sur la vignette du tableau de bord. Pour plus d’informations sur les événements, consultez Gestion des événements dans l’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/>";
});

Si vous avez téléchargé et exécuté l’exemple d’intégration de tableau de bord, le fait de cliquer sur une vignette génère du texte sous le tableau de bord. Le texte ressemble à ce qui suit. Cela vous permet de journaliser le fait qu’un utilisateur a cliqué sur une vignette, puis de diriger l’utilisateur vers

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

Utilisation des groupes

Pour incorporer un tableau de bord à partir d’un groupe, obtenez la liste de tous les tableaux de bord disponibles au sein d’un groupe à l’aide de l’appel d’API REST suivant. Pour plus d’informations sur cet appel d’API REST, consultez Obtenir des tableaux de bord.

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

L’API ci-dessus renvoie la liste des tableaux de bord disponibles. Chaque tableau de bord a une propriété EmbedUrl qui est déjà créée pour prendre en charge l’incorporation de groupe.

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

Limites

  • Les utilisateurs finaux qui accèdent aux tableaux de bord incorporés doivent avoir des comptes Power BI et les tableaux de bord doivent être partagés avec eux.

  • La fonctionnalité Questions et réponses n’est actuellement pas prise en charge dans les tableaux de bord incorporés.

  • Voici une limitation temporaire : quand vous partagez un tableau de bord avec des groupes de sécurité, l’utilisateur doit tout d’abord accéder aux tableaux de bord dans PowerBI.com avant de les voir incorporés.

Voir aussi

S’inscrire à Power BI
Exemple Intégrer un tableau de bord
Autorisations d’application
API JavaScript Power BI
API REST Power BI sur APIARY
D’autres questions ? Posez vos questions à la communauté Power BI