全部产品
云市场

如何把群空间中的报表嵌入到第三方系统

更新时间:2020-07-06 19:34:21

本文为您介绍如何获取access Token,并将Quick BI中的报表嵌入第三方系统。目前仅支持在群空间下为用户开通报表外嵌权限。

步骤1:通过HTTPS接口获取accessToken

步骤1.1:获取如下请求地址中参数的AccessID、AccessKey、AliyunID

https://das.base.shuju.aliyun.com/api/ac3rdservice/token.json?accessId=xxx&accessKey=xxx&aliyunId=xxx&validityTime=60 

  1. 获取AccessID和AccessKey。
    1. 登录Quick BI控制台
    2. 我的页签下,找到目标群空间并单击图标。

    3. 在空间设置页面,单击组织管理 > 识别码,获取AccessID和AccessKey。
    4. 其中Quick BI AccessKey ID为AccessID,Quick BI AccessKey Secret为AccessKey。
  2. 获取AliyunID。
    • 如果您使用的是主账号,则登录账号为AliyunID。获取方法请参见获取阿里云账号

       

    • 如果您使用的是子账号,则可以通过如下操作:

      1.登录阿里云控制台首页
      2.将鼠标移动至右上角头像,可以获取到子账号。
       
    3.请联系主账号管理员获取该子账号对应的主账号。
      则AliyunID的格式为主账号的账号名:子账号
      假设主账号的账号名为test,子账号为zhangsan@sdf123.onaliyun.com,则AliyunID的格式为test:zhangsan
 结果示例:

https://das.base.shuju.aliyun.com/api/ac3rdservice/token.json?accessId=xxxxxxxxxxxxxxxxxxxxxxx&accessKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&aliyunId=136***59:yuan_sub1&validityTime=60

    •  

说明:如果开通仪表板接入权限的账号拥有开发或分析权限,则只能开通该账号创建的仪表板。

如果该账号拥有管理权限,则可以开通该工作空间所有报表。

步骤1.2:发送get请求获取Token

  1. 发送get请求获取Token。
    将步骤1中获取的参数拼接到如下请求地址中,并发送get请求获取Token。
    https://das.base.shuju.aliyun.com/api/ac3rdservice/token.json?accessId=xxx&accessKey=xxx&aliyunId=xxx&validityTime=60
    248token.png
    successtrue时,表示获取token成功,此时accessToken的值即为token。
说明:若在accessToken有效期内再次发送请求获取或者访问报表,都会自动延迟默认设置的token有效时长。
例如,第一次获取validityTime设置为10分钟,在10分钟之内再次发送请求,会在此基础上续期10分钟;只有在token失效后再次获取,token内容才会改变;若想立即取消token时效,可以发送如下post请求,并适配对应的参数值。https://das.base.shuju.aliyun.com/api/ac3rdservice/tokenInvalid.json?aliyunId=XXX&accessToken=XXX

步骤2:添加需要嵌入的仪表板

  1. 在Quick BI首页,单击顶部开放服务
  2. 开放服务页面,选择分享中心中的报表嵌入
  3. 在报表嵌入页面,单击+新增嵌入报表。
  4. 新增嵌入报表页面,选择相应的群空间和空间下要嵌入的报表,单击确定

   

步骤3:拼接免登URL

  1. 在Quick BI首页,单击工作空间 > 仪表板。
  2. 在仪表板管理页面,找到目标仪表板并单击左侧导航栏的图标。
    仪表板查看.PNG
    此时,在仪表板预览页面的地址栏中看到的地址即为访问报表的地址。
    假设预览地址域名为:das.base.shuju.aliyun.com,支持将域名修改为:bi.aliyun.com。
  3. 将步骤1中生成的accessToken拼接到报表的URL后面,即可免登查看报表。
    URL为http://das.base.shuju.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=703d6621-7aa0-4716-bcc1-515e3da794c2&accessToken=XXXXX

具体示例

HTML代码模式

<body>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" src="https://bi.aliyun.com/dashboard/view/pc.htm?spm=a2c10.10637826.0.0.1e6a4666IqoH1q&pageId=9f489954-8154-476b-a4a7-22e2aed48115&accessToken=81000c719xxxxxx9bf874d4578c5f836"></iframe>
</body>

JS代码模式

(function setIframe(){
 var frame = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" src="'
       + '//bi.aliyun.com/dashboard/view/pc.htm?spm=a2c10.10637826.0.0.1e6a4666IqoH1q&pageId=9f489954-8154-476b-a4a7-22e2aed48115&accessToken=81000c7197ca93xxxxxx4d4578c5f836'
             + '"></iframe>';
 var newNode = document.createElement('div');
 newNode.innerHTML = frame;
 newNode.style.height = '1600px';
 var htmlBody = document.getElementsByTagName('body')[0];
 htmlBody.insertBefore(newNode, htmlBody.firstChild);
})();