응용 프로그램에 Power BI 대시보드, 타일 또는 보고서 포함Embed a Power BI dashboard, tile, or report into your application

고객에 대한 콘텐츠를 포함하는 경우 Power BI JavaScript API와 함께 Power BI .NET SDK를 사용하여 대시보드, 타일 또는 보고서를 웹앱에 통합하거나 포함하는 방법에 대해 알아봅니다.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. 일반적으로 ISV 시나리오입니다.This is typically the ISV scenario.

포함된 대시보드

이 연습을 시작하려면 Power BI Pro 계정이 필요합니다.To get started with this walkthrough, you need a Power BI Pro account. 계정이 없는 경우 무료 Power BI 계정에 등록하고 Power BI Pro 평가판에 등록한 다음 테스트를 위해 자신만의 Azure Active Directory 테넌트를 만들 수 있습니다.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.

참고

대신 조직의 대시보드를 포함하려고 하십니까?Looking to embed a dashboard for your organization instead? 조직의 앱에 대시보드 통합을 참조하세요.See, Integrate a dashboard into an app for your organization.

대시보드를 웹앱에 통합하려면 Power BI API와 Azure Active Directory(AD) 인증 액세스 토큰을 사용하여 대시보드를 가져옵니다.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. 그런 다음 포함 토큰을 사용하여 대시보드를 로드합니다.Then, you load the dashboard using an embed token. Power BI API는 특정 Power BI 리소스에 대한 프로그래밍 방식 액세스를 제공합니다.The Power BI API provides programmatic access to certain Power BI resources. 자세한 내용은 Power BI REST API의 개요, Power BI .NET SDKPower BI JavaScript API를 참조하세요.For more information, see Overview of Power BI REST API, Power BI .NET SDK and the Power BI JavaScript API.

샘플 다운로드Download the sample

이 문서에서는 GitHub에서 조직에 대한 콘텐츠 포함 샘플에서 사용되는 코드를 보여줍니다.This article shows the code used in the Embedding for your organization sample on GitHub. 이 연습을 따라 하기 위해 샘플을 다운로드할 수 있습니다.To follow along with this walkthrough, you can download the sample.

1단계 - Azure AD에 앱 등록Step 1 - register an app in Azure AD

REST API 호출을 실행하려면 Azure AD를 사용해 응용 프로그램을 등록해야 합니다.You will need to register your application with Azure AD in order to make REST API calls. 자세한 내용은 Power BI 콘텐츠를 포함하려면 Azure AD 앱 등록을 참조하세요.For more information, see Register an Azure AD app to embed Power BI content.

조직에 대한 콘텐츠 포함 샘플을 다운로드했다면 Azure AD에서 샘플이 인증을 받을 수 있도록, 등록 후에 얻은 클라이언트 ID를 사용합니다.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. 샘플을 구성하려면, web.config 파일에서 clientId를 변경합니다.To configure the sample, change the clientId in the web.config file.

2 단계-Azure AD로 액세스 토큰 가져오기Step 2 - get an access token from Azure AD

응용 프로그램 내에서 먼저 Azure AD에서 액세스 토큰을 가져와야 Power BI REST API로 호출할 수 있습니다.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. 자세한 내용은 사용자를 인증하고 Power BI 앱에 대한 Azure AD 액세스 토큰 가져오기를 참조하세요.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Controllers\HomeController.cs의 각 콘텐츠 항목 작업 내에서 이 예제를 볼 수 있습니다.You can see examples of this within each content item task in Controllers\HomeController.cs.

3 단계-콘텐츠 항목 가져오기Step 3 - get a content item

Power BI 콘텐츠를 포함하려면 제대로 포함되었는지 확인하기 위해 몇 가지를 수행해야 합니다.To embed your Power BI content, you will need to do a couple of things to make sure it embeds correctly. 이러한 모든 단계를 REST API를 사용하여 직접 수행할 수 있지만, 여기에 나오는 샘플 응용 프로그램과 예제는 NET SDK를 사용하여 만들어집니다.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.

액세스 토큰으로 Power BI 클라이언트 만들기Create the Power BI Client with your access token

사용자 액세스 토큰을 사용해 사용자는 Power BI API와 상호 작용할 수 있는 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. 이렇게 하려면 AccessToken을 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.
}

포함하려는 콘텐츠 항목 가져오기Get the content item you want to embed

Power BI 클라이언트 개체를 사용하여 포함하려는 항목에 참조를 검색할 수 있습니다.Use the Power BI client object to retrieve a reference to the item you want to embed. 대시보드, 타일 또는 보고서를 포함할 수 있습니다.You can embed dashboards, tiles or reports. 다음은 주어진 작업 영역에서 첫 번째 대시보드, 타일 또는 보고서를 검색하는 방법을 보여주는 예입니다.Here is an example of how to retrieve the first dashboard, tile or report from a given workspace.

이 방법의 샘플은 앱 소유 데이터 샘플Controllers\HomeController.cs에서 찾을 수 있습니다.A sample of this is available within Controllers\HomeController.cs of the App Owns Data sample.

대시보드Dashboards

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

타일Tile

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

보고서Report

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

포함 토큰을 만듭니다.Create the embed token

JavaScript API에서 사용할 수 있는 embed 토큰이 생성되어야 합니다.An embed token needs to be generated which can be used from the JavaScript API. embed 토큰은 포함한 항목에 한정됩니다.The embed token will be specific to the item you are embedding. 즉, Power BI 콘텐츠의 구성 요소를 포함하는 경우 이에 대한 새 embed 토큰을 만들어야 합니다.This means that any time you embed a piece of Power BI content, you need to create a new embed token for it. 어떤 accessLevel을 사용할지를 포함한 자세한 내용은 사용 하려면 GenerateToken API를 참조하세요.For more information, including which accessLevel to use, see GenerateToken API.

중요

포함 토큰은 개발 테스트 전용이므로 Power BI 마스터 계정에서 생성할 수 있는 포함 토큰의 수는 제한적입니다.Because embed tokens are intended for development testing only, the number of embed tokens a Power BI master account can generate is limited. 프로덕션 포함 시나리오를 위해 용량을 구입해야 합니다.A capacity must be purchased for production embedding scenarios. 용량을 구입할 때 토큰 생성은 제한 없이 포함시킬 수 있습니다.There is no limit to embed token generation when a capacity is purchased.

이 샘플은 조직에 대한 콘텐츠 포함 샘플Controllers\HomeController.cs 내에서 찾을 수 있습니다.A sample of this is available within Controllers\HomeController.cs of the Embedding for your organization sample.

이는 EmbedConfigTileEmbedConfig에 대한 클래스가 생성되었음을 의미합니다.This assumes a class is created for EmbedConfig and TileEmbedConfig. 이들에 대한 샘플은 Models\EmbedConfig.csModels\TileEmbedConfig.cs 내에서 찾아볼 수 있습니다.A sample of these are available within Models\EmbedConfig.cs and Models\TileEmbedConfig.cs.

대시보드Dashboard

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

타일Tile

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

보고서Report

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

4 단계-JavaScript를 사용하여 항목을 로드합니다.Step 4 - load an item using JavaScript

JavaScript를 사용하여 웹 페이지의 div 요소로 대시보드를 로드합니다.You can use JavaScript to load a dashboard into a div element on your web page. 샘플은 EmbedConfig/TileEmbedConfig 모델을 대시보드, 타일 또는 보고서에 대한 보기와 함께 사용합니다.The sample uses an EmbedConfig/TileEmbedConfig model along with views for a dashboard, tile or report. JavaScript API 사용에 관한 전체 샘플인 경우 Microsoft Power BI Embedded 샘플을 사용할 수 있습니다.For a full sample of using the JavaScript API, you can use the Microsoft Power BI Embedded Sample.

이 응용 프로그램 샘플은 조직에 대한 콘텐츠 포함 샘플 내에서 사용할 수 있습니다.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>

다음 단계Next steps

검토하기 위한 샘플 응용 프로그램은 GitHub에서 사용할 수 있습니다.A sample application is available on GitHub for you to review. 위의 예제는 이 샘플을 기반으로 하고 있습니다.The above examples are based on that sample. 자세한 내용은 조직에 대한 콘텐츠 포함 샘플을 참조하세요.For more information, see Embedding for your organization sample.

JavaScript API에 사용할 수 있는 자세한 정보는 Power BI JavaScript API를 참조하세요.More information is available for the JavaScript API, see Power BI JavaScript API.

궁금한 점이 더 있나요?More questions? Power BI 커뮤니티에 질문합니다.Try asking the Power BI Community