使用PowerBI_Embed实现Web访问报表 part 3

  • Post author:
  • Post category:其他


这是使用微软Power BI Embed功能,在自定义WEB应用中嵌入报表的系列入门指南。系列文章共分为三篇,这是第三篇。


第一篇 背景和准备工作


第二篇 在PBI Desktop中开发和发布报表


第三篇 嵌入报表到自定义WEB应用中

获取嵌入PBI的参数

在自定义应用内访问PBIE,调用JavaScript API的过程中,需要三个参数,分别是


  • embedToken

    嵌入令牌,用于鉴权

  • embedURL

    报表的URL地址

  • reportId

    报表的唯一标志

最重要的步骤是通过账户安全性认证,从 Azure AD 获取访问令牌和嵌入令牌,然后才能够调用API嵌入报表。目前微软提供了两种方式来获取Token,分别是 .Net SDK 和 REST接口。

本案例中使用Python调用REST接口来获取令牌(在实际生产环境中,建议使用其他更安全的方式来获取令牌),并构造三个参数,整个过程描述如下。

获取Access Token

def getAccessToken (username, password, clientId):
    """
    获取Access Token,这是下一步获取EmbedTokken的前提条件
    :username Power BI Pro账户名称
    :password Power BI Pro账户密码
    :clientId 是在Azure中注册应用得到的"应用程序ID"
    :return 字符串格式的AccessToken
    """
    url =  'https://login.microsoftonline.com/common/oauth2/token'

    headers = { 'Content-Type' : 'application/x-www-form-urlencoded' }

    body = {
          'grant_type':'password',
          'client_id': clientId,
          'resource':'https://analysis.windows.net/powerbi/api',
          'scope':'openid',
          'username':username,
          'password':password
        }

    response = requests.post(url=url, headers=headers, data=body)    
    return response.json()['access_token']   
复制代码

获取Embed Token

def getEmbedToken(accessToken, groupId, reportId):
    """
    结合AccessToken,报表组ID,报表ID信息,获取EmbedToken
    :accessToken 上一步得到的访问令牌
    :groupId 报表组ID
    :reportId 报表ID
    :return 字符串格式的嵌入令牌
    """
    url = "https://api.powerbi.com/v1.0/myorg/groups/{0}/reports/{1}/GenerateToken"\
        .format(groupId, reportId)
        
    headers = {
        'Content-Type' : 'application/x-www-form-urlencoded',
        'authorization' : "Bearer {0}".format(accessToken)
    }
    
    body = {'accessLevel':'View'}
    
    response = requests.post(url=url, headers=headers, data=body)   
    return response.json()['token']
复制代码

构造访问参数

def getPowerBIEmbedParam(username, password, clientId, groupId, reportId):
    accessToken = getAccessToken(username, password, clientId)
    embedToken = getEmbedToken(accessToken, groupId, reportId)
    embedURL = "https://app.powerbi.com/reportEmbed?reportId={0}&groupId={1}".format(reportId, groupId)
    
    print(embedToken)
    print(embedURL)
    print(reportId)
复制代码

获取报表信息

下面介绍如何获得报表组ID,报表ID。当我们发布一个报表之后,通过PBI门户来访问这个报表,在浏览器地址栏就可以看到这两个参数。如下图

生成三个参数

# 这三个参数是全局生效,不需要修改
username = 'bi***er@da*******ft.com'
password = '******'
clientId = 'c14***********************e7a9ef'

# 这三个参数是报表级别的
groupId = '7fd***********************d00b5'
reportId = '4088***********************4a4e0'

getPowerBIEmbedParam(username, password, clientId, groupId, reportId)
复制代码

生成的三个参数片段如下

H4sIAAAAAAAEADVWNQ7****sCBa8y0-9kplWmsDMzM7M2G4zjfbu2xpp0Wfnnv3
    
https://app.powerbi.com/reportEmbed?reportId=40***4a4e0&groupId=7fd***b5
    
40******4a4e0
复制代码

自定义应用嵌入PBIE

微软在线演示工具

为了便于大家开发和测试,微软提供了一个

在线工具

,使用这个工具,我们可以直接填入三个参数测试报表,也可以把样例JS代码集成到自己的应用程序中。这里我们演示一下直接使用在线demo的方式。

如下图,在演示页面填入三个参数之后,点击【Run】即可显示嵌入报表。

JS – 调用PBIE

参考官方提供的样例和手册,我们很容易实现一个用JavaScript调用PBIE接口的应用。首先从

这里

获取SDK(powerbi.js),然后编写一个简单的html文件。

<html>
<head>
  <title>PBIE Test</title>
  <meta charset="utf-8"> 
  <script src="scripts/powerbi.js"></script>
</head>
<body>
  <div id="captionArea">
    <h1>Power BI Embed 测试</h1>
  </div>
  <button onclick="show_default()">展示默认报表</button>
  <div id="embedContainer" style="height:90%">
  </div>
  <script>
    // 用于访问PBIE的三个参数,仅供测试,正式环境下不能明文写在这里!!!
    var txtAccessToken = 'H4sIAA***AAA==';
    var txtEmbedUrl =
    'https://app.powerbi.com/reportEmbed?reportId=40**0b5';
    var txtEmbedReportId = '408**a4e0';
      
    // 默认方式,不做特殊处理直接显示报表  
    function show_default () {
      var models = window['powerbi-client'].models;
      var permissions = models.Permissions.All;
      var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
        permissions: permissions,
        settings: {
          filterPaneEnabled: true,
          navContentPaneEnabled: true
        }
      };
 
      var embedContainer = document.getElementById('embedContainer');
      var report = powerbi.embed(embedContainer, config);
    }
  </script>
</body>
</html>
复制代码

运行这个html文件的效果如下图,可以看到整个PBI报表被嵌入到自定义的网页中了。

JS – 设置过滤器

嵌入PBIE的一个常见场景是,根据当前登录人员对数据集进行过滤,实现行级别数据权限的控制。SDK中提供了设置全局过滤器的方法,和前面演示的代码相比,有两个变化

  • 创建一个filter对象,这里使用的是basic类型(这里没有演示的另一种过滤器是advanced类型,可以支持多个条件组合)
  • 在config中指定要使用这个filter对象

如下代码片段,我们对PBI模型中的

人力成本

表中的

部门

字段进行了筛选,可以简单的理解为在特定表上执行了一个过滤条件。

    // 对报表数据进行筛选之后再展示,可以用来控制行级别的数据权限  
    function show_pre_filter () {
        // 设置一个过滤器
		const filter = {
		  $schema: "http://powerbi.com/product/schema#basic",
		  target: {
		    table: "人力成本",
		    column: "部门"
		  },
		  operator: "In",
		  values: ["研发中心"]
		};      

      var models = window['powerbi-client'].models;
      var permissions = models.Permissions.All;
      var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
        permissions: permissions,
        // 使用过滤器  
        filters: [filter],
        settings: {
          filterPaneEnabled: true,
          navContentPaneEnabled: true
        }
      };
 
      var embedContainer = document.getElementById('embedContainer');
      var report = powerbi.embed(embedContainer, config);
    }
复制代码

运行这个带有前置过滤器的效果如下图,可以看到PBI报表中和部门相关的数据发生了变化。

在岗人数

这个指标从默认条件下的131变成了11。

总结

微软提供的PBIE功能,使我们可以用比较低的成本把Power BI报表集成到我们已有的Web应用中。采用这种方案的好处包括但不限于费用的降低(更详细的费用方案请参考本文末的参考资料定价部分),更灵活的权限处理方式,更炫酷的数据可视化效果,等等。

本文用一个简单常见的案例,从头到尾演示了采用PBIE集成方案的各个环节。因为篇幅和时间的原因,我们没有涉及到PBIE提供的更多复杂功能,这部分内容请参考官方文档资料。

参考资料


获取令牌的流程和方法


Power BI JavaScript Libarary,Wiki,及样例源码


Power BI Embedded文档


Power BI JavaScript 演示


Power BI REST API


Power BI Premium 常见问题解答


Power BI Embedded 定价

转载于:https://juejin.im/post/5b1f7c7b6fb9a01e6b2c1e77