Insira um dashboard, bloco ou relatório do Power BI no aplicativoEmbed a Power BI dashboard, tile, or report into your application

Saiba como integrar ou inserir um dashboard, um bloco ou relatório em um aplicativo Web usando o SDK do .NET do Power BI, junto com a API JavaScript do Power BI durante a inserção para os clientes.Learn how to integrate, or embed, a dashboard, tile or report, into a web app using the Power BI .NET SDK along with the Power BI JavaScript API when embedding for your customers. Normalmente, esse é o cenário de ISV.This is typically the ISV scenario.

Dashboard inserido

Para começar este passo a passo, você precisa de uma conta do Power BI Pro.To get started with this walkthrough, you need a Power BI Pro account. Caso você não tenha uma conta, inscreva-se em uma conta gratuita do Power BI e, depois, inscreva-se em uma avaliação do Power BI Pro ou crie seu próprio locatário do Azure Active Directory para fins de teste.If you don't have an account, you can sign up for a free Power BI account and then sign up for a Power BI Pro trial, or you can create your own Azure Active Directory tenant for testing purposes.

Observação

Buscando inserir um dashboard para sua organização em vez disso?Looking to embed a dashboard for your organization instead? Consulte Inserir um dashboard do Power BI em um aplicativo para sua organização.See, Integrate a dashboard into an app for your organization.

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 (Azure Active Directory) para obter um dashboard.To integrate a dashboard into a web app, you use the Power BI API, and an Azure Active Directory (AD) authorization access token to get a dashboard. Em seguida, carregue o dashboard usando um token de inserção.Then, you load the dashboard using an embed token. A API do Power BI fornece acesso programático a determinados recursos do Power BI.The Power BI API provides programmatic access to certain Power BI resources. Para obter mais informações, consulte Visão geral da API REST do Power BI, SDK do .NET do Power BI e API JavaScript do Power BI.For more information, see Overview of Power BI REST API, Power BI .NET SDK and the Power BI JavaScript API.

Baixe o exemploDownload the sample

Este artigo mostra o código usado na amostra Inserindo para a organização no GitHub.This article shows the code used in the Embedding for your organization sample on GitHub. Para acompanhar esse passo a passo, baixe a amostra.To follow along with this walkthrough, you can download the sample.

Etapa 1 – registrar um aplicativo no Azure ADStep 1 - register an app in Azure AD

Você precisará registrar seu aplicativo no Azure AD para fazer chamadas à API REST.You will need to register your application with Azure AD in order to make REST API calls. Para obter mais informações, consulte Registrar um aplicativo do Azure AD para inserir o conteúdo do Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Se você baixou a amostra Inserindo para a organização, use a ID do Cliente obtida, após o registro, para que a amostra possa ser autenticada no Azure AD.If you downloaded the Embedding for your organization sample, you use the Client ID you get, after registration, so that the sample can authenticate to Azure AD. Para configurar a amostra, altere a clientId no arquivo web.config.To configure the sample, change the clientId in the web.config file.

Etapa 2 – Obter um token de acesso do Azure ADStep 2 - get an access token from Azure AD

No aplicativo, primeiro você precisará obter um token de acesso do Azure AD antes de poder fazer chamadas à API REST do Power BI.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. Para obter mais informações, consulte Autenticar usuários e obter um token de acesso do Azure AD para o aplicativo do Power BI.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Veja exemplos disso em cada tarefa do item de conteúdo em Controllers\HomeController.cs.You can see examples of this within each content item task in Controllers\HomeController.cs.

Etapa 3 – Obter um item de conteúdoStep 3 - get a content item

Para inserir o conteúdo do Power BI, você precisará realizar algumas tarefas para verificar se ele é inserido corretamente.To embed your Power BI content, you will need to do a couple of things to make sure it embeds correctly. Embora todas essas etapas possam ser feitas com a API REST diretamente, o aplicativo de exemplo e os exemplos aqui, são feitos com o SDK do .NET.While all of these steps can be done with the REST API directly, the sample application, and the examples here, are made with the .NET SDK.

Criar o Cliente do Power BI com o token de acessoCreate the Power BI Client with your access token

Com o token de acesso, crie o objeto de cliente do Power BI que permitirá interagir com as APIs do Power BI.With your access token, you will want to create your Power BI client object which will allow you to interact with the Power BI APIs. Faça isso encapsulando AccessToken com um objeto Microsoft.Rest.TokenCredentials.This is done by wrapping the AccessToken with a Microsoft.Rest.TokenCredentials object.

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

var tokenCredentials = new TokenCredentials(authenticationResult.AccessToken, "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))
{
    // Your code to embed items.
}

Obter o item de conteúdo que você deseja inserirGet the content item you want to embed

Use o objeto de cliente do Power BI para recuperar uma referência ao item que você deseja inserir.Use the Power BI client object to retrieve a reference to the item you want to embed. Você pode inserir dashboards, blocos ou relatórios.You can embed dashboards, tiles or reports. Veja a seguir um exemplo de como recuperar o primeiro dashboard, bloco ou relatório de um espaço de trabalho específico.Here is an example of how to retrieve the first dashboard, tile or report from a given workspace.

Uma amostra disso está disponível em Controllers\HomeController.cs da amostra O Aplicativo Possui Dados.A sample of this is available within Controllers\HomeController.cs of the App Owns Data sample.

DashboardsDashboards

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(GroupId);

// Get the first report in the group.
Dashboard dashboard = dashboards.Value.FirstOrDefault();

BlocoTile

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// To retrieve the tile, you first need to retrieve the dashboard.

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(GroupId);

// Get the first report in the group.
Dashboard dashboard = dashboards.Value.FirstOrDefault();

// Get a list of tiles from a specific dashboard
ODataResponseListTile tiles = client.Dashboards.GetTilesInGroup(GroupId, dashboard.Id);

// Get the first tile in the group.
Tile tile = tiles.Value.FirstOrDefault();

RelatórioReport

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// You will need to provide the GroupID where the dashboard resides.
ODataResponseListReport reports = client.Reports.GetReportsInGroupAsync(GroupId);

// Get the first report in the group.
Report report = reports.Value.FirstOrDefault();

Criar o token de inserçãoCreate the embed token

Um token de inserção precisa ser gerado, o qual pode ser usado por meio da API JavaScript.An embed token needs to be generated which can be used from the JavaScript API. O token de inserção será específico ao item que estiver sendo inserido.The embed token will be specific to the item you are embedding. Isso significa que sempre que você inserir uma parte do conteúdo do Power BI, precisará criar um novo token de inserção para ele.This means that any time you embed a piece of Power BI content, you need to create a new embed token for it. Para obter mais informações, incluindo qual accessLevel usar, consulte API GenerateToken.For more information, including which accessLevel to use, see GenerateToken API.

Importante

Como os tokens inseridos destinam-se apenas para teste de desenvolvimento, o número de tokens inseridos que uma conta mestre do Power BI pode gerar é limitado.Because embed tokens are intended for development testing only, the number of embed tokens a Power BI master account can generate is limited. Uma capacidade deve ser adquirida para cenários de integração de produção.A capacity must be purchased for production embedding scenarios. Não há nenhum limite para a geração de tokens inseridos quando uma capacidade é adquirida.There is no limit to embed token generation when a capacity is purchased.

Uma amostra disso está disponível em Controllers\HomeController.cs da amostra Inserindo para a organização.A sample of this is available within Controllers\HomeController.cs of the Embedding for your organization sample.

Isso pressupõe que uma classe seja criada para EmbedConfig e TileEmbedConfig.This assumes a class is created for EmbedConfig and TileEmbedConfig. Uma amostra deles está disponível em Models\EmbedConfig.cs e Models\TileEmbedConfig.cs.A sample of these are available within Models\EmbedConfig.cs and Models\TileEmbedConfig.cs.

DashboardDashboard

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Dashboards.GenerateTokenInGroup(GroupId, dashboard.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = dashboard.EmbedUrl,
    Id = dashboard.Id
};

BlocoTile

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token for a tile.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Tiles.GenerateTokenInGroup(GroupId, dashboard.Id, tile.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new TileEmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = tile.EmbedUrl,
    Id = tile.Id,
    dashboardId = dashboard.Id
};

RelatórioReport

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Reports.GenerateTokenInGroup(GroupId, report.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = report.EmbedUrl,
    Id = report.Id
};

Etapa 4 – Carregar um item usando o JavaScriptStep 4 - load an item using JavaScript

Você pode usar o JavaScript para carregar um dashboard em um elemento div na sua página da Web.You can use JavaScript to load a dashboard into a div element on your web page. A amostra usa um modelo de EmbedConfig/TileEmbedConfig, juntamente com as exibições de um dashboard, bloco ou relatório.The sample uses an EmbedConfig/TileEmbedConfig model along with views for a dashboard, tile or report. Para obter uma amostra completa de como usar a API JavaScript, use a Amostra do Microsoft Power BI Embedded.For a full sample of using the JavaScript API, you can use the Microsoft Power BI Embedded Sample.

Uma amostra de aplicativo disso está disponível na amostra Inserindo para a organização.An application sample of this is available within the Embedding for your organization sample.

Views\Home\EmbedDashboard.cshtmlViews\Home\EmbedDashboard.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="dashboardContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read dashboard Id from Model
    var embedDashboardId = "@Model.Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedDashboardId
    };

    // Get a reference to the embedded dashboard HTML element
    var dashboardContainer = $('#dashboardContainer')[0];

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

Views\Home\EmbedTile.cshtmlViews\Home\EmbedTile.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="tileContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read tile Id from Model
    var embedTileId = "@Model.Id";

    // Read dashboard Id from Model
    var embedDashboardeId = "@Model.dashboardId";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'tile',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedTileId,
        dashboardId: embedDashboardeId
    };

    // Get a reference to the embedded tile HTML element
    var tileContainer = $('#tileContainer')[0];

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

Views\Home\EmbedReport.cshtmlViews\Home\EmbedReport.cshtml

<script src="~/scripts/powerbi.js"></script>
<div id="reportContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read report Id from Model
    var embedReportId = "@Model.Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);
</script>

Próximas etapasNext steps

Um aplicativo de exemplo está disponível no GitHub para você examinar.A sample application is available on GitHub for you to review. Os exemplos acima baseiam-se nessa amostra.The above examples are based on that sample. Para obter mais informações, consulte a amostra Inserindo para a organização.For more information, see Embedding for your organization sample.

Mais informações estão disponíveis sobre a API JavaScript em API JavaScript do Power BI.More information is available for the JavaScript API, see Power BI JavaScript API.

Mais perguntas?More questions? Experimente perguntar à Comunidade do Power BITry asking the Power BI Community