Saiba como integrar ou inserir um dashboard em um aplicativo Web usando o C# e a API do Power BI junto com um código JavaScript.

Para começar este passo a passo, você precisará de uma conta do Power BI. Se você não tiver uma conta, veja Inscrever-se no Power BI.

Para integrar um dashboard em um aplicativo Web, você usa a API do Power BI e um token de acesso de autorização do Azure AD (Active Directory) para obter um dashboard. Em seguida, você carrega o dashboard em um elemento div usando o mesmo token de acesso. A API do Power BI fornece acesso programático a determinados recursos do Power BI. Para obter mais informações, consulte Visão geral da API REST do Power BI e a API de JavaScript do Power BI

Baixe o exemplo

Este artigo mostra o código usado na amostra Integrar um painel no GitHub. Para acompanhar este passo a passo, é necessário baixar a amostra.

Etapa 1 – registrar um aplicativo no Azure AD

Para usar a API do Power BI, é necessário registrar um aplicativo com seu locatário do Azure Active Directory. Você precisa fazer isso primeiro para ter uma ID do Cliente e um Segredo do Cliente que identifiquem seu aplicativo Web no Azure AD. Sem uma ID do Cliente e um Segredo do Cliente, o Azure AD não pode autenticar seu aplicativo Web. Se você baixou a amostra Integrar um painel, use a ID do Cliente e o Segredo do Cliente obtidos após o registro para configurar a amostra para que ela seja autenticada no Azure AD.

Nós criamos uma página para ajudá-lo com o registro. Você pode navegar até dev.powerbi.com/apps para realizar esta etapa.

  1. Acesse dev.powerbi.com/apps.

  2. Selecione Entre com sua conta existente e entre em sua conta do Power BI.

  3. Insira um Nome do Aplicativo. Para este passo a passo, insira Amostra Integrar um painel.

  4. Para Tipo de Aplicativo, selecione Aplicativo Web do lado do servidor no menu suspenso.

  5. Insira uma URL de Redirecionamento. Para este passo a passo, o Azure AD redireciona de volta para a página padrão; portanto, insira http://localhost:13526. O Azure AD (Active Directory) redirecionará para a página com um Código de Autorização. Para saber como adquirir um Token de Acesso para acessar os painéis do Power BI usando um Código de Autorização, veja Obter um token de acesso de autenticação.

  6. Insira uma Home Page. Para este passo a passo, insira http://localhost:13526 que é a home page da amostra.

  7. Em Escolher APIs para acessar, selecione Ler Todos os Painéis. Para ver todas as permissões ao aplicativo do Power BI, confira Permissões ao aplicativo.

  8. Selecione Registrar aplicativo e salve a ID do Cliente e o Segredo do Cliente gerados. Uma ID do Cliente e um Segredo do Cliente identificam o aplicativo no Azure AD.

Configurar o aplicativo de exemplo

Se você baixou a amostra Integrar um painel, use a ID do Cliente e o Segredo do Cliente obtidos após o registro para que a amostra seja autenticada no Azure AD. Para configurar a amostra, altere a ID do Cliente e o Segredo do Cliente em web.config.

Etapa 2 – obter um painel

Para obter um dashboard do Power BI, você usa a operação Obter Dashboards que obtém uma lista de dashboards do Power BI. Na lista de dashboards, é possível obter uma ID de dashboard.

Token de acesso do Azure Active Directory

Antes que você possa chamar a operação Obter Dashboards ou qualquer outra operação do Power BI, é necessário obter um token de acesso de autenticação (token de acesso) do Azure Active Directory. Um token de acesso é usado para permitir que seu aplicativo acesse os painéis, blocos e relatórios do Power BI. Para saber mais sobre o fluxo do token de acesso do Azure Active Directory, veja Fluxo de concessão de código de autorização do Azure AD. A próxima seção mostra como obter um token de acesso em um aplicativo Web.

Obter um código de autorização do Azure AD

A primeira etapa para obter um token de acesso é obter um código de autorização do Azure AD. Para fazer isso, você constrói uma cadeia de caracteres de consulta com as propriedades a seguir e a redireciona para o Azure AD.

Cadeia de caracteres de consulta do código de autorização

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

Depois de construir uma cadeia de caracteres de consulta, você a redireciona para o Azure AD para obter um código de autorização. Veja abaixo um método em C# completo para construir uma cadeia de caracteres de consulta do código de autorização e redirecioná-la para o Azure AD. Depois de conseguir o código de autorização, obtenha um token de acesso usando o código de autorização.

Obter o código de autorização

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

Obter um token de acesso do código de autorização

Agora você deve ter um código de autorização do Azure AD. Depois que o Azure AD redirecionar de volta para seu aplicativo Web com um código de autorização, você usa o código de autorização para obter um token de acesso. Abaixo está um exemplo do C# que você pode usar em seu 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;
    }
}

Obter um dashboard usando um token de acesso

Agora que você tem um token de acesso, é possível chamar a operação Obter Dashboards. A operação Obter Dashboards retorna uma lista de dashboards. É possível obter um dashboard na lista de dashboards. Veja abaixo um método do C# completo para obter um dashboard. Para obter exemplos de como usar a API REST do Power BI, consulte API REST do Power BI no APIARY.

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

Etapa 3 – carregar um dashboard usando o JavaScript

Você pode usar o JavaScript para carregar um dashboard em um elemento div na sua página da 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 você baixou e executou a amostra Integrar um painel, a amostra será parecida com a mostrada abaixo.

Eventos clicados em bloco

Talvez você tenha observado no exemplo acima que é possível manipular eventos quando o bloco é clicado no dashboard. Para obter mais informações sobre eventos, consulte Manipulação de eventos na API de 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 você baixou e executou o Exemplo de integrar um dashboard, clicar em um bloco produzirá um texto abaixo do dashboard. O texto será semelhante ao seguinte. Isso permitiria registrar que um bloco foi clicado e, em seguida, conduzir o usuário para o

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

Trabalhando com grupos

Para inserir um painel de um grupo, é necessário obter a lista de todos os painéis disponíveis em um grupo usando a seguinte chamada à API REST. Para obter mais informações sobre essa chamada à API REST, consulte Obter painéis.

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

A API acima retorna a lista de painéis disponíveis. Cada painel tem uma propriedade EmbedUrl que já é construída para oferecer suporte a inserção de grupo.

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

Limitações

  • Os usuários finais que acessam os painéis inseridos devem ter contas de Power BI e os painéis devem ser compartilhados com eles.

  • Atualmente não há suporte para P e R nos painéis inseridos.

  • Como uma limitação temporária, ao compartilhar um painel com grupos de segurança, o usuário precisa primeiro acessar os painéis no PowerBI.com antes de vê-lo inserido.

Consulte também

Inscrever-se no Power BI
Amostra Integrar um painel
Permissões do aplicativo
API de JavaScript do Power BI
API REST do Power BI no APIARY
Mais perguntas? Experimente a Comunidade do Power BI