Power BI本身已經(jīng)提供了很好的互動(dòng)報(bào)表操作,但是在很多情況下我們會(huì)需要把報(bào)表嵌入到網(wǎng)頁或者app里涂炎,和公司現(xiàn)有的辦公應(yīng)用集成在一起并且互相交互脏里,這時(shí)候我們就可以通過SDK或者RESTAPI的方式在App里調(diào)用操作報(bào)表了。
Power BI目前提供C#的SDK已經(jīng)封裝好了可以直接調(diào)用吸耿。有興趣的可以移步https://docs.microsoft.com/zh-cn/power-bi/developer/embed-sample-for-your-organization參考
其他語言沒有封裝好的SDK也還是可以使用Power BI RESTAPI來進(jìn)行調(diào)用制妄,本文主要使用測(cè)試工具Postman來進(jìn)行RESTAPI的測(cè)試掸绞,一旦RESTAPI跑通了,后續(xù)的開發(fā)也就容易了耕捞。
在 Azure Active Directory (Azure AD) 中注冊(cè)應(yīng)用程序
要使用SDK調(diào)用Power BI, 首先我們需要一個(gè) Power BI Pro 帳戶(作為主帳戶)和 Microsoft Azure 訂閱衔掸。
- 如果未注冊(cè) Power BI Pro,請(qǐng)?jiān)陂_始之前注冊(cè)以獲得免費(fèi)試用俺抽。
- 如果沒有 Azure 訂閱敞映,請(qǐng)?jiān)陂_始之前先創(chuàng)建一個(gè)免費(fèi)帳戶。
- 你需要具有自己的 Azure Active Directory 租戶磷斧。
首先我們需要在Azure AD里注冊(cè)一個(gè)應(yīng)用振愿,并且賦上相應(yīng)的權(quán)限。
-
登陸http://portal.azure.com弛饭,找到Azure Active Directory
-
點(diǎn)擊新應(yīng)用程序注冊(cè)
-
創(chuàng)建完成冕末,依次如下圖選擇,設(shè)置孩哑,所需權(quán)限栓霜,添加
-
依次添加如下權(quán)限
-
新建一個(gè)密鑰
這個(gè)時(shí)候我們的程序注冊(cè)已經(jīng)完成翠桦,接下來可以在Postman進(jìn)行Rest API的調(diào)用了
Power BI 用戶OAuth2.0認(rèn)證
要用RESTAPI訪問我們的Power BI報(bào)表資源横蜒,首先要通過前面我們注冊(cè)的應(yīng)用程序在Azure AD上進(jìn)行用戶認(rèn)證胳蛮。AAD使用的認(rèn)證方式是OAuth2.0,我們可以使用Postman來進(jìn)行
-
打開Postman丛晌, Authorization里面Type選擇OAuth 2.0仅炊,點(diǎn)擊Get New Access Token.
填寫相應(yīng)信息,點(diǎn)擊Request Token
Callback URL: http://localhost:15236 (要和前面在AAD注冊(cè)應(yīng)用的callback url一致)
Auth URL: https://login.windows.net/common/oauth2/authorize?resource=https://analysis.windows.net/powerbi/api
Access Token URL: https://login.windows.net/common/oauth2/authorize?resource=https://analysis.windows.net/powerbi/api
Client ID: 前面步驟3圖中的應(yīng)用程序ID
Client Secret: 前面步驟5中創(chuàng)建的密鑰
獲得了Access Token之后就可以進(jìn)行Power BI RESTAPI的調(diào)用了
Power BI RESTAPI調(diào)用
按照下圖所示我們調(diào)用了https://api.powerbi.com/v1.0/myorg/groups 獲取該用戶下所有的workspace
把Power BI報(bào)表嵌入現(xiàn)有網(wǎng)頁應(yīng)用
首先需要獲得報(bào)表的Group ID澎蛛,登陸Power BI Pro抚垄,打開想嵌入的報(bào)表,下圖URL里紅圈內(nèi)即為Group ID和Report ID(report id在后面有用).
使用 https://api.powerbi.com/v1.0/myorg/groups/{groupId}/reports 獲得report的具體信息谋逻,記下embedUrl呆馁。
接下來可以使用Power BI Javascript SDK來把報(bào)表嵌入html了。首先去https://github.com/Microsoft/PowerBI-JavaScript/releases下載最新的release毁兆,在dist目錄找到powerbi.js文件浙滤。按照下圖建立文件把powerbi.js放到scripts目錄,編輯pbiembed.html气堕,修改對(duì)應(yīng)的embedUrl和accessToken參數(shù)纺腊,用瀏覽器打開pbiembed.html即可看到報(bào)表成功嵌入了。
<!DOCTYPE html>
<title>Power BI - Web sample</title>
<html lang="en">
<body>
<script type="text/javascript" src="scripts/powerbi.js"></script>
<div id="reportContainer" style="width: 900px; height: 500px">
</div>
<script type="text/javascript">
var embedUrl = "前面獲得的EmbedURL"
// get the access token.
accessToken = "前面獲得的Access Token"
var models = window['powerbi-client'].models;
var permissions = models.Permissions.All;
// 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: 'report',
tokenType: models.TokenType.aad,
accessToken: accessToken,
embedUrl: embedUrl,
id: "03d9a889-c26c-4268-a2cc-91af00eb2ab8",
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
// Grab the reference to the div HTML element that will host the report.
var reportContainer = document.getElementById('reportContainer');
// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);
</script>
</body>
</html>
參考資源
https://docs.microsoft.com/zh-cn/azure/active-directory/develop/v1-protocols-oauth-code
https://docs.microsoft.com/en-us/rest/api/power-bi/