C# と Power BI API を JavaScript コードと一緒に使って、Web アプリにダッシュボードを統合する (埋め込む) 方法を説明します。

このチュートリアルを開始するには、Power BI アカウントが必要です。 アカウントを持っていない場合は、「Power BI にサインアップする」を参照してください。

ダッシュボードを Web アプリに統合するには、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 で web アプリを識別するクライアント ID およびクライアント シークレットを取得するために、この手順を最初に実行する必要があります。 クライアント ID およびクライアント シークレットがないと、Azure AD は web アプリを認証できません。 ダッシュボード統合サンプルをダウンロードした場合は、登録後に取得するクライアント IDクライアント シークレットを使って、サンプルが Azure AD で認証を受けられるようにサンプルを構成します。

登録するためのページを作成してあります。 dev.powerbi.com/apps を使って、このステップを実行できます。

  1. dev.powerbi.com/apps に移動します。

  2. [Sign in with your existing account] (既存のアカウントでサインインする) を選び、Power BI アカウントにサインインします。

  3. アプリ名を入力します。 このチュートリアルでは、「Integrate a dashboard sample」と入力します。

  4. [App Type] (アプリの種類) では、ドロップダウンから [Server-side Web app] (サーバー側 Web アプリ) を選びます。

  5. [リダイレクト URL]を入力します。 このチュートリアルでは、Azure AD によって既定のページにリダイレクトされるので、http://localhost:13526 と入力します。 Azure Active Directory (AD) は、認証コードをもってこのページにリダイレクトします。 認証コードを使って Power BI ダッシュボードにアクセスするためのアクセス トークンを取得する方法については、「認証アクセス トークンを取得する」をご覧ください。

  6. ホーム ページを入力します。 このチュートリアルでは、サンプルのホーム ページである「http://localhost:13526」を入力します。

  7. [Choose APIs to access] (アクセスする API を選択する) では、[Read All Dashboards] (すべてのダッシュボードを読み取る) を選びます。 Power BI アプリのすべてのアクセス許可については、「アプリのアクセス許可」を参照してください。

  8. [Register app] (アプリの登録) を選び、生成されたクライアント 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 認証コード付与フロー」を参照してください。 次のセクションでは、web アプリからアクセス トークンを取得する方法を示します。

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 によって認証コードとともに web アプリにリダイレクトされた後、認証コードを使用してアクセス トークンを取得します。 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 を使用して、Web ページの 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/>";
    });
}

ダッシュボードの統合サンプルをダウンロードして実行した場合、サンプルは次のようになります。

タイル クリック イベント

上記のサンプルでお気づきかもしれませんが、ダッシュボード上でタイルがクリックされた場合にイベントを処理することができます。 イベントの詳細については、「Handling Events within the JavaScript API」 (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 コミュニティを利用してください