Power BI ユーザーではないユーザー (アプリがデータを所有している場合) のために埋め込むときに、Power BI C# SDK と Power BI JavaScript API を使って Web アプリにダッシュボード、タイル、またはレポートを統合する (埋め込む) 方法を説明します。

このチュートリアルを開始するには、Power BI Pro アカウントが必要です。 Power BI アカウントをお持ちでない場合、Power BI アカウントに無料でサインアップした後、Power BI Pro 試用版にサインアップできます。または、テスト目的で独自の Azure Active Directory テナントを作成できます。

メモ:

代わりに Power BI ユーザー (ユーザーがデータを所有している場合) のためにダッシュボードを埋め込む場合は、 「ダッシュボードをアプリに統合する (ユーザーがデータを所有)」をご覧ください。

ダッシュボードを Web アプリに統合するには、Power BI API、および Azure Active Directory (AD) 承認アクセス トークンを使って、ダッシュボードを取得します。 次に、埋め込んだトークンを使ってダッシュボードを読み込みます。 Power BI API は、特定の Power BI リソースへのプログラムによるアクセスを提供します。 詳しくは、「Power BI REST API の概要」、「Power BI C# SDK」(Power BI の C# SDK)、「Power BI JavaScript API」(Power BI の JavaScript API) をご覧ください。

サンプルをダウンロードする

この記事では、GitHub の「App Owns Data sample」(アプリ所有データ サンプル) で使われているコードを示します。 このチュートリアルの手順を試してみるには、サンプルをダウンロードできます。

ステップ 1 - Azure AD にアプリを登録する

REST API の呼び出しを行うには、Azure AD にアプリケーションを登録する必要があります。 詳しくは、「Azure AD アプリを登録して Power BI コンテンツを埋め込む」をご覧ください。

App Owns Data sample」(アプリ所有データ サンプル) をダウンロードした場合、サンプルが Azure AD に対して認証を実行できるように、登録した後で取得するクライアント ID を使います。 サンプルを構成するには、web.config ファイルの clientId を変更します。

ステップ 2 - Azure AD からアクセス トークンを取得する

アプリケーションでは、Power BI REST API の呼び出しを行う前に、まず、Azure AD からアクセス トークンを取得する必要があります。 詳しくは、「ユーザーを認証し、Power BI アプリ用の Azure AD アクセス トークンを取得する」をご覧ください。

Controllers\HomeController.cs 内の各コンテンツ アイテム タスクで、これの例を見ることができます。

ステップ 3 - コンテンツ アイテムを取得する

Power BI コンテンツを正しく埋め込むは、2 つのことを行う必要があります。 すべての手順は REST API で直接行うことができますが、サンプル アプリケーションおよびここの例は .NET SDK で行われています。

アクセス トークンを使って Power BI クライアントを作成する

Power BI API と対話できる Power BI クライアント オブジェクトを、アクセス トークンで作成します。 そのためには、AccessToken を Microsoft.Rest.TokenCredentials オブジェクトでラップします。

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

埋め込むコンテンツ アイテムを取得する

Power BI クライアント オブジェクトを使って、埋め込むアイテムへの参照を取得します。 ダッシュボード、タイル、またはレポートを埋め込むことができます。 指定したワークスペースから最初のダッシュボード、タイル、またはレポートを取得する方法の例を次に示します。

このサンプルは、「App Owns Data sample」(アプリ所有データ サンプル) の Controllers\HomeController.cs にあります。

ダッシュボード

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

タイル

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

レポート

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

埋め込みトークンを作成する

JavaScript API から使うことができる埋め込みトークンを生成する必要があります。 埋め込みトークンは、埋め込むアイテムに固有のものです。 つまり、Power BI コンテンツを埋め込むときは常に、それ用の埋め込みトークンを新しく作成する必要があります。 使う accessLevel など詳しくは、「GenerateToken API」をご覧ください。

このサンプルは、「App Owns Data sample」(アプリ所有データ サンプル) の Controllers\HomeController.cs にあります。

ここでは EmbedConfig および TileEmbedConfig のクラスを作成するものとします。 これらのサンプルは、Models\EmbedConfig.cs および Models\TileEmbedConfig.cs にあります。

ダッシュボード

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

タイル

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

レポート

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 を使ってアイテムを読み込む

JavaScript を使用して、Web ページの div 要素にダッシュ ボードを読み込むことができます。 このサンプルでは、EmbedConfig/TileEmbedConfig モデルと、ダッシュボード、タイル、またはレポートのビューを使います。 JavaScript API の使用に関する完全なサンプルについては、「Microsoft Power BI Embedded Sample」(Microsoft Power BI Embedded のサンプル) をご覧ください。

このアプリケーションのサンプルは、「App Owns Data sample」(アプリ所有データ サンプル) にあります。

Views\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.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.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>

次の手順

GitHub でサンプル アプリケーションを入手して確認できます。 上の例はそのサンプルに基づいています。 詳しくは、「Embed sample for non-Power BI users (app owns data)」(Power BI ユーザーではないユーザーのための埋め込みサンプル (アプリがデータを所有)) をご覧ください。

JavaScript API について詳しくは、「Power BI JavaScript API」(Power BI の JavaScript API) もご覧ください。

他にわからないことがある場合は、 Power BI コミュニティで質問してみてください