앱에 타일 통합(사용자 소유 데이터)Integrate a tile into an app (user owns data)

조직에 대한 콘텐츠를 포함할 때 Power BI JavaScript API와 함께 REST API 호출을 사용하여 타일을 웹앱에 통합하거나 포함하는 방법에 대해 알아봅니다.Learn how to integrate, or embed, a tile into a web app using REST API calls along with the Power BI JavaScript API when embedding for your organization.

웹 응용 프로그램에 포함된 타일

이 연습을 시작하려면 Power BI 계정이 필요합니다.To get started with this walkthrough, you need a Power BI account. 계정이 없는 경우 무료 Power BI 계정에 등록하거나 테스트를 위해 자신만의 Azure Active Directory 테넌트를 만들 수 있습니다.If you don't have an account, you can sign up for a free Power BI account, or you can create your own Azure Active Directory tenant for testing purposes.

참고

대신 embedtoken을 사용하여 고객의 타일을 포함하려고 하십니까?Looking to embed a tile for your customers, using an embedtoken, instead? 고객의 응용 프로그램에 대시보드, 타일 또는 보고서 통합을 참조하세요.See, Integrate a dashboard, tile, or report into your application for your customers.

타일을 웹앱에 통합하려면, Power BI REST API, 또는 Power BI C# SDK와, Azure Active Directory(AD) 인증 액세스 토큰을 사용하여 타일을 가져옵니다.To integrate a tile into a web app, you use the Power BI REST API, or the Power BI C# SDK, and an Azure Active Directory (AD) authorization access token to get a tile. 그런 다음, 동일한 액세스 토큰을 사용하여 타일을 로드합니다.Then, you load the tile using the same access token. Power BI API는 특정 Power BI 리소스에 대한 프로그래밍 방식 액세스를 제공합니다.The Power BI API provides programmatic access to certain Power BI resources. 자세한 내용은 Power BI REST API의 개요Power BI JavaScript API를 참조하세요.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

샘플 다운로드Download the sample

이 문서에서는 GitHub의 integrate-tile-web-app에 사용된 코드를 보여줍니다.This article shows the code used in the integrate-tile-web-app 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.

integrate-tile-web-app을 다운로드했다면 등록 후에 가져온 클라이언트 ID클라이언트 암호를 사용하여 Azure AD에서 샘플을 인증합니다.If you downloaded the integrate-tile-web-app, you use the Client ID and Client Secret you get, after registration, so that the sample can authenticate to Azure AD. 샘플을 구성하려면, 클라이언트 ID클라이언트 비밀cloud.config에서 변경합니다.To configure the sample, change the Client ID and Client Secret in the cloud.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.

3단계: 타일 가져오기Step 3 - get a tile

Power BI 타일을 가져오려면, 주어진 대시보드에서 Power BI 타일 목록을 가져오는 타일 가져오기 작업을 사용합니다.To get a Power BI tile, you use the Get Tiles operation which gets a list of Power BI tiles from a given dashboard. 타일 목록에서 타일 id와 포함된 URL을 가져올 수 있습니다.From the list of tiles, you can get a tile id and embed URL.

대시보드 ID가 먼저 검색되어야 타일을 가져올 수 있습니다.A dashboard ID will need to be retrieved first before you can get the tile. 대시보드를 검색하는 방법에 대한 자세한 내용은 앱에 대시보드 통합(사용자 소유 데이터)을 참조하세요.For information on how to retrieve a dashbaord, see Integrate a dashboard into an app (user owns data).

액세스 토큰을 사용하여 타일 가져오기Get tiles using an access token

2단계에서 검색한 액세스 토큰을 사용하면 타일 가져오기 작업을 호출할 수 있습니다.With the access token you retrieved in step 2, you can call the Get Tiles operation. 타일 가져오기 작업은 타일 목록을 반환합니다.The Get Tiles operation returns a list of tiles. 타일의 목록에서 단일 타일을 가져올 수 있습니다.You can get a single tile from the list of tiles. 다음은 타일을 가져오는 전체 C# 메서드입니다.Below is a complete C# method to get a tile.

REST API를 호출하려면 권한 부여 헤더를 Bearer {access token} 형식으로 포함해야 합니다.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

REST API로 타일 가져오기Get tiles with the REST API

Default.aspx.csDefault.aspx.cs

using Newtonsoft.Json;

//Get a tile from a dashboard. In this sample, you get the first tile.
protected void GetTile(string dashboardId, int index)
{
    //Configure tiles request
    System.Net.WebRequest request = System.Net.WebRequest.Create(
        String.Format("{0}Dashboards/{1}/Tiles",
        baseUri,
        dashboardId)) as System.Net.HttpWebRequest;

    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.Value));

    //Get tiles 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()))
        {
            //Deserialize JSON string
            PBITiles tiles = JsonConvert.DeserializeObject<PBITiles>(reader.ReadToEnd());

            //Sample assumes at least one Dashboard with one Tile.
            //You could write an app that lists all tiles in a dashboard
            if (tiles.value.Length > 0)
                tileEmbedUrl.Text = tiles.value[index].embedUrl;
        }
    }
}

//Power BI Tiles used to deserialize the Get Tiles response.
public class PBITiles
{
    public PBITile[] value { get; set; }
}
public class PBITile
{
    public string id { get; set; }
    public string title { get; set; }
    public string embedUrl { get; set; }
}

.NET SDK를 사용하여 타일 가져오기Get tiles using the .NET SDK

.NET SDK를 사용하여 REST API를 직접 호출하는 대신 대시보드 목록을 검색할 수 있습니다.You can use the .NET SDK to retrieve a list of dashbaords instead of calling the REST API directly.

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

var tokenCredentials = new TokenCredentials(<ACCESS TOKEN>, "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))
{
    // Get a list of dashboards your "My Workspace"
    ODataResponseListDashboard tiles = client.Dashboards.GetDashboards();

    // Get a list of dashboards from a group (app workspace)
    ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(groupId);

    Dashboard dashboard = dashboards.Value.FirstOrDefault();

    // Get the first tile from the above dashbaord
    ODataResponseListTile tiles = client.Dashboards.GetTiles(dashboard.Id);

    Tile tile = tiles.Value.FirstOrDefault();
}

4단계 - JavaScript를 사용하여 타일 로드Step 4 - load a tile using JavaScript

JavaScript를 사용하여 웹 페이지의 div 요소로 타일을 로드합니다.You can use JavaScript to load a tile into a div element on your web page.

Default.aspxDefault.aspx

<!-- Embed Tile-->
<div> 
    <asp:Panel ID="PanelEmbed" runat="server" Visible="true">
        <div>
            <div><b class="step">Step 3</b>: Embed a tile</div>

            <div>Enter an embed url for a tile from Step 2 (starts with https://):</div>
            <input type="text" id="tb_EmbedURL" style="width: 1024px;" />
            <br />
            <input type="button" id="bEmbedTileAction" value="Embed Tile" />
        </div>

        <div id="tileContainer"></div>
    </asp:Panel>
</div>

Site.masterSite.master

window.onload = function () {
    // client side click to embed a selected tile.
    var el = document.getElementById("bEmbedTileAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedTile, false);
    } else {
        el.attachEvent('onclick', updateEmbedTile);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded tile if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedTile();
    }
};

// update embed tile
function updateEmbedTile() {

    // 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: 'tile',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the tile.
    var tileContainer = document.getElementById('tileContainer');

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

    // tile.on will add an event handler which prints to Log window.
    tile.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/>";
    });
}

integrate-tile-web-app을 다운로드하여 실행하면 샘플이 아래와 같이 표시됩니다.If you downloaded and ran the integrate-tile-web-app, the sample will look similar to below.

웹 응용 프로그램에 포함된 타일

그룹(앱 작업 영역) 작업Working with groups (app workspaces)

그룹(앱 작업 영역)에서 타일을 포함하려면 다음 REST API 호출을 사용하여 그룹의 대시보드 내에서 사용 가능한 모든 타일 목록을 가져올 수 있습니다.For embedding a tile from a group (app workspace), you will want to get the list of all available tiles within a group's dashboard using the following REST API call. 이 REST API 호출에 대한 자세한 정보를 확인하려면 타일 가져오기를 참조하세요.To find more information about this REST API call, see Get Tiles. 결과를 반환하라는 요청에 대한 권한이 그룹에 있어야 합니다.You will need to have permission in the group for the request to return results.

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

위의 API에는 사용할 수 있는 타일 목록을 반환합니다.The above API returns the list of the available tiles. 각 타일에 그룹을 포함하도록 지원하는 이미 생성된 EmbedUrl 속성이 있습니다.Each tile has an EmbedUrl property which is already constructed to support group embedding.

https://app.powerbi.com/embed?dashboardId={dashboard_id}&tileId={tile_id}&groupId={group_id}

다음 단계Next steps

PowerBI-JavaScript Wiki의 타일 포함Tile Embed on PowerBI-JavaScript Wiki

Power BI JavaScript API.Power BI JavaScript API.

GitHub의 integrate-tile-web-app 샘플.integrate-tile-web-app sample on GitHub.

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