了解如何在為 Power BI 使用者 (使用者擁有資料) 內嵌時,使用 REST API 呼叫配合 Power BI JavaScript API 將磚整合或內嵌至 Web 應用程式中。

在 Web 應用程式中內嵌磚

若要遵循此逐步解說進行整合,您需要一個 Power BI 帳戶。 如果您沒有帳戶,可以註冊免費 Power BI 帳戶,或建立您自己的 Azure Active Directory 租用戶用於測試用途。

注意:

想要改用 embedtoken 為非 Power BI 使用者 (應用程式擁有資料) 內嵌磚嗎? 請參閱 Integrate a dashboard, tile, or report into your application (app owns data) (將儀表板、磚或報表整合至您的應用程式 (應用程式擁有資料))。

若要將磚整合至 Web 應用程式,請使用 Power BI REST API 或 Power BI C# SDK,以及 Azure Active Directory (AD) 授權存取權杖,以取得磚。 然後,使用相同的存取權杖載入磚。 Power BI API 為特定 Power BI 資源提供程式設計存取。 如需詳細資訊,請參閱 Overview of Power BI REST API (Power API REST 概觀) 及 Power BI JavaScript API

下載範例

本文顯示了在 GitHub 上,User Owns Data 範例 - integrate-tile-web-app 中所使用的程式碼。 若要依照本逐步解說進行,您可以下載範例。

步驟 1 - 在 Azure AD 中註冊應用程式

您必須在 Azure AD 中註冊應用程式,才能進行 REST API 呼叫。 如需詳細資訊,請參閱註冊 Azure AD 應用程式以內嵌 Power BI 內容

若您已經下載 User Owns Data 範例 - integrate-tile-web-app,請使用註冊後取得的用戶端識別碼用戶端祕密,以便範例向 Azure AD 驗證。 若要設定範例,請在 cloud.config 檔案中,變更用戶端識別碼用戶端祕密

步驟 2 - 從 Azure AD 取得存取權杖

在您的應用程式中,您必須先從 Azure AD 取得存取權杖,才能對 Power BI REST API 進行呼叫。 如需詳細資訊,請參閱 Authenticate users and get an Azure AD access token for your Power BI app (驗證使用者,並為 Power BI 應用程式取得 Azure AD 存取權杖)。

步驟 3 - 取得磚

若要取得 Power BI 磚,請使用取得磚作業,以從提供的儀表板中取得 Power BI 磚的清單。 從磚的清單中,您可以取得磚識別碼及內嵌 URL。

您必須先擷取儀表板識別碼,才能取得磚。 如需如何擷取儀表板的資訊,請參閱將儀表板整合到應用程式 (使用者擁有資料)

使用存取權杖取得磚

有了您在步驟 2 中擷取的存取權杖,即可呼叫取得磚作業。 取得磚作業會傳回磚清單。 您可以從磚清單中取得單一磚。 以下是用於取得磚的完整 C# 方法。 如需有關如何使用 Power BI REST API 的範例,請參閱 ARYAPIARY 上的 Power BI REST API

若要進行 REST API 呼叫,您必須使用 Bearer {access token} 的格式包含 Authorization 標頭。

利用 REST API 取得磚

Default.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 取得磚

您可以使用 .NET SDK 擷取儀表板清單,而不必直接呼叫 REST API。

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

步驟 3 - 使用 JavaScript 載入磚

您可以使用 JavaScript 將磚載入網頁上的 div 元素中。

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

若您已下載並執行 User Owns Data 範例 - integrate-tile-web-app,範例看起來會像下面這樣。

在 Web 應用程式中內嵌磚

使用群組 (應用程式工作區)

若要從群組 (應用程式工作區) 內嵌磚,建議您使用以下 REST API 呼叫取得群組儀表板中所有可用磚的清單。 若要尋找此 REST API 呼叫的詳細資訊,請參閱取得磚。 您必須擁有群組中的權限,要求才能傳回結果。

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

上述 API 會傳回可用磚的清單。 每個磚都有一個已經建構來支援群組內嵌的 EmbedUrl 屬性。

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

後續步驟

GitHub 上有範例應用程式可供您檢閱。 如需詳細資訊,請參閱 User Owns Data 範例 - integrate-tile-web-app

您也可以參閱 Power BI JavaScript API 取得更多 JavaScript API 的資訊。

有其他問題嗎? 嘗試在 Power BI 社群提問