Power BI のダッシュボード、タイル、レポートをアプリケーションに埋め込むEmbed a Power BI dashboard, tile, or report into your application

顧客向けのダッシュボード、タイル、またはレポートを、Power BI .NET SDK と Power BI JavaScript API を使って Web アプリに統合する (埋め込む) 方法を説明します。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 アカウントに無料でサインアップした後、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.

ダッシュボードを Web アプリに統合するには、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 SDK」(Power BI の .NET SDK)、「Power BI JavaScript API」(Power 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. 詳しくは、「Azure AD アプリを登録して Power BI コンテンツを埋め込む」をご覧ください。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

アプリケーションでは、Power BI REST API の呼び出しを行う前に、まず、Azure AD からアクセス トークンを取得する必要があります。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 コンテンツを正しく埋め込むは、2 つのことを行う必要があります。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.

このサンプルは、「App Owns Data sample」(アプリ所有データ サンプル) の 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 から使うことができる埋め込みトークンを生成する必要があります。An embed token needs to be generated which can be used from the JavaScript API. 埋め込みトークンは、埋め込むアイテムに固有のものです。The embed token will be specific to the item you are embedding. つまり、Power BI コンテンツを埋め込むときは常に、そのための埋め込みトークンを新しく作成する必要があります。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.

ここでは EmbedConfig および TileEmbedConfig のクラスを作成するものとします。This assumes a class is created for EmbedConfig and TileEmbedConfig. これらのサンプルは、Models\EmbedConfig.cs および Models\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 を使用して、Web ページの 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 Sample」(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」(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