了解如何使用 C# 和 Power BI API 以及一些 JavaScript 程式碼,將儀表板整合或內嵌到 Web 應用程式。

若要遵循此逐步解說進行整合,您需要一個 Power BI 帳戶。 若您沒有帳戶,請參閱 註冊 Power BI

若要將儀表板整合到 Web 應用程式,請使用 Power BI API 和 Azure Active Directory (AD) 授權存取權杖,以取得儀表板。 然後,您將儀表板載入到使用相同存取語彙基元的 div 項目。 Power BI API 為特定 Power BI 資源提供程式設計存取。 如需詳細資訊,請參閱 Overview of Power BI REST API (Power BI REST API 概觀) 和 Power BI JavaScript API

下載範例

本文示範在 GitHub 上整合儀表板範例中所使用的程式碼。 若要依照本逐步解說進行,您應該下載範例。

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

若要使用 Power BI API,您必須向 Azure Active Directory 租用戶註冊應用程式。 您必須先執行此作業,以便取得用戶端識別碼和在 Azure AD 中識別您 Web 應用程式的用戶端密碼。 若沒有用戶端識別碼用戶端密碼,Azure AD 便無法驗證您的 Web 應用程式。 若您已經下載整合儀表板範例,就能使用註冊後取得的用戶端識別碼用戶端密碼來設定範例,以便向 Azure AD 驗證。

我們已經建立頁面以協助您進行註冊。 您可以瀏覽至 dev.powerbi.com/apps 來執行這個步驟。

  1. 請前往 dev.powerbi.com/apps

  2. 選取 [使用現有的帳戶登入],然後登入 Power BI 帳戶。

  3. 輸入應用程式名稱。 針對此逐步解說,輸入整合儀表板範例

  4. 在 [應用程式類型] 中,從下拉式清單選取 [伺服器端 Web 應用程式](Server-side Web app)。

  5. 輸入 重新導向 URL。 此逐步解說中,Azure AD 會重新導向回到預設頁面,因此請輸入 http://localhost:13526。 Azure Active Directory (AD) 將以一個授權碼來重新導向至此頁面。 若要了解如何使用授權碼來取得存取權杖 以存取 Power BI 儀表板,請參閱取得驗證存取權杖

  6. 輸入首頁。 此逐步解說中,輸入本範例的首頁 http://localhost:13526。

  7. 針對 [選擇要存取的 API] (Choose APIs to access),選取 [讀取所有儀表板](Read All Dashboards)。 關於所有 Power BI 應用程式權限,請參閱應用程式權限

  8. 選取 [註冊應用程式],並儲存產生的用戶端識別碼用戶端密碼用戶端識別碼用戶端密碼會識別 Azure AD 中的應用程式。

設定範例應用程式

若您已經下載整合儀表板範例,就能使用註冊後取得的用戶端識別碼用戶端密碼來設定範例,以便向 Azure AD 驗證。 若要設定範例,請在 web.config 中變更用戶端識別碼用戶端密碼

步驟 2 - 取得儀表板

若要取得 Power BI 儀表板,請使用 取得儀表板 作業以查看 Power BI 儀表板清單。 您可以從儀表板清單中取得儀表板識別碼。

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 的範例,請參閱 ARYAPIARY 上的 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
PIARY 上的 Power BI REST API
有其他問題嗎? 試試 Power BI 社群