C#과 Power BI API와 함께 일부 JavaScript 코드를 사용하여 대시보드를 웹앱에 통합 또는 포함시키는 방법을 알아봅니다.

이 연습을 시작하려면 Power BI 계정이 필요합니다. 계정이 없으면, Power BI에 등록을 참조하세요.

대시보드를 웹앱에 통합하려면 Power BI API와 Azure Active Directory(AD) 인증 액세스 토큰을 사용하여 대시보드를 가져옵니다. 그런 다음에 대시보드를 동일한 액세스 토큰을 사용하여 div 요소로 로드합니다. Power BI API는 특정 Power BI 리소스에 대한 프로그래밍 방식 액세스를 제공합니다. 자세한 내용은 Power BI REST API의 개요Power BI JavaScript API를 참조하세요.

샘플 다운로드

이 문서는 GitHub의 대시보드 통합 샘플에 사용된 코드를 보여줍니다. 이 연습을 따라 하려면, 샘플을 다운로드해야 합니다.

1단계 - Azure AD에 앱 등록

Power BI API를 사용하려면 Azure Active Directory 테넌트로 응용 프로그램을 등록해야 합니다. Azure AD에서 웹앱을 식별하는 클라이언트 ID클라이언트 암호를 확보하려면 우선 이 단계가 필요합니다. 클라이언트 ID클라이언트 암호가 없으면, Azure AD에서 웹앱을 인증할 수 없습니다. 대시보드 통합 샘플을 다운로드했다면, 등록 후에 갖게 되는 클라이언트 ID클라이언트 암호를 사용하여 샘플을 구성해야 Azure AD에서 샘플이 인증을 받을 수 있습니다.

등록에 도움이 되는 페이지를 만들었습니다. dev.powerbi.com/apps를 찾아 이 단계를 수행할 수 있습니다.

  1. dev.powerbi.com/apps로 이동합니다.

  2. 기존 계정으로 로그인을 선택하고 Power BI 계정에 로그인합니다.

  3. 앱 이름을 입력합니다. 이 연습에서는 대시보드 통합 샘플을 입력합니다.

  4. 앱 유형의 경우, 드롭다운 목록에서 서버 쪽 웹앱을 선택합니다.

  5. URL 리디렉션을 입력합니다. 이 연습에서는, Azure AD가 기본 페이지로 리디렉션 되므로, http://localhost:13526을 입력합니다. Azure Active Directory(AD)가 인증 코드와 함께 이 페이지로 리디렉션됩니다. 인증 코드를 사용하여 Power BI 대시보드에 액세스하기 위한 액세스 토큰을 확보하는 방법을 알아보려면, 인증 액세스 토큰 가져오기를 참조하세요.

  6. 홈 페이지를 입력합니다. 이 연습에서는, 샘플의 홈 페이지인 http://localhost:13526을 입력합니다.

  7. 액세스할 API 선택에서 모든 대시보드 읽기를 선택합니다. 모든 Power BI 앱 사용 권한은 앱 사용 권한을 참조하세요.

  8. 앱 등록을 선택하고 생성된 클라이언트 ID클라이언트 암호를 저장합니다. 클라이언트 ID클라이언트 암호는 Azure AD에서 앱을 식별합니다.

샘플 응용 프로그램 구성

대시보드 통합 샘플을 다운로드했다면, Azure AD에서 샘플이 인증을 받을 수 있도록, 등록 후에 얻은 클라이언트 ID클라이언트 암호를 사용합니다. 샘플을 구성하려면, 클라이언트 ID클라이언트 암호를 web.config에서 변경합니다.

2단계 - 대시보드 가져오기

Power BI 대시보드를 가져오려면, Power BI 대시보드 목록을 가져오는 대시보드 가져오기 작업을 사용합니다. 대시보드 목록에서, 대시보드 ID를 얻을 수 있습니다.

Azure Active Directory 액세스 토큰

대시보드 가져오기 작업이나 그 밖의 Power BI 작업을 호출할 수 있으려면, Azure Active Directory 인증 액세스 토큰(액세스 토큰)이 있어야 합니다. 액세스 토큰은 앱이 Power BI 대시보드, 타일 및 보고서에 액세스하도록 허용하는 데 사용됩니다. Azure Active Directory 액세스 토큰 흐름에 대해 자세히 알아보려면, Azure AD 인증 코드 부여 흐름을 참조하세요. 다음 섹션은 웹앱에 액세스 토큰을 가져오는 방법을 보여줍니다.

Azure AD에서 인증 코드 가져오기

액세스 토큰을 가져오는 첫 번째 단계는 Azure AD에서 인증 코드를 가져오는 것입니다. 이렇게 하려면, 다음 속성을 포함하는 쿼리 문자열을 생성하고 Azure AD에 리디렉션합니다.

인증 코드 쿼리 문자열

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

쿼리 문자열을 생성한 후에 Azure AD를 리디렉션하여 인증 코드를 가져옵니다. 다음은 인증 코드 쿼리 문자열을 생성하고 Azure AD에 리디렉션하는 전체 C# 메서드입니다. 인증 코드를 가져온 후 인증 코드를 사용하여 액세스 토큰을 가져옵니다.

인증 코드 가져오기

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

인증 코드에서 액세스 토큰 가져오기

이제 Azure AD에서 인증 코드를 가져와야 합니다. Azure AD인증 코드를 사용하여 웹앱에 다시 리디렉션되면, 인증 코드를 사용하여 액세스 토큰을 가져옵니다. 다음은 Page_Load 이벤트에 사용할 수 있는 C# 샘플입니다.

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

액세스 토큰을 사용하여 대시보드 가져오기

액세스 토큰이 있으니, 대시보드 가져오기 작업을 호출할 수 있습니다. 대시보드 가져오기 작업은 대시보드 목록을 반환합니다. 대시보드 목록에서 대시보드를 가져올 수 있습니다. 다음은 대시보드를 가져오는 C# 메서드입니다. Power BI REST API를 사용하는 방법에 대한 예제는 APIARY의 Power BI REST API를 참조합니다.

대시보드 가져오기

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

3단계 - JavaScript를 사용하여 대시보드 로드

JavaScript를 사용하여 웹 페이지의 div 요소로 대시보드를 로드합니다.

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

대시보드 통합 샘플을 다운로드하여 실행하면, 샘플이 아래와 같이 표시됩니다.

이벤트 클릭한 타일

위의 예제에서 대시보드의 타일을 클릭할 때 이벤트를 처리할 수 있음을 알 수 있습니다. 이벤트에 대한 자세한 내용은 JavaScript API 내에서 이벤트 처리를 참조하세요.

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

대시보드 샘플 통합을 다운로드하고 실행한 경우 타일을 클릭하면 대시보드 아래의 텍스트가 출력됩니다. 텍스트는 다음과 유사하게 나타납니다. 이제 이 타일이 클릭되었음을 로그할 수 있고 사용자를 다음으로 안내합니다.

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

그룹 작업

그룹에서 대시보드를 포함하는 것에 대해 다음 REST API 호출을 사용하여 그룹 내에서 사용 가능한 모든 대시보드에 목록을 가져올 수 있습니다. 이 REST API 호출에 대한 자세한 정보를 확인하려면 대시보드 가져오기를 참조하세요.

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

위의 API에는 사용할 수 있는 대시보드 목록을 반환합니다. 각 대시보드에 그룹을 포함하도록 지원하는 이미 생성된 EmbedUrl 속성이 있습니다.

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

제한 사항

  • 포함된 대시보드를 액세스하는 최종 사용자는 Power BI 계정이 있어야 하고 동료와 대시보드를 공유해야 합니다.

  • 현재 포함된 대시보드에 Q&A가 지원되지 않습니다.

  • 보안 그룹과 대시보드를 공유하는 경우 일시적인 제한으로 사용자는 대시보드가 포함된 것으로 보이기 전에 PowerBI.com에서 대시보드에 처음 액세스해야 합니다.

참고 항목

Power BI에 등록
대시보드 통합 샘플
앱 사용 권한
Power BI JavaScript API
APIARY의 Power BI REST API
궁금한 점이 더 있나요? Power BI 커뮤니티를 이용하세요.