一、支持业务场景:
参考连接:概述 - Quick BI - 阿里云
支持的业务场景:
1、嵌入分析:将分析结果以页面或卡片形式嵌入到业务系统中融为一体,进行交互式分析。
2、数据对接(专业版):可接入客户数据源,提供数据查询、分析服务。
3、对接API:可接收系统的事件进行处理,执行资源管理任务。
4、自定义组件平台:可基于组件SDK来创建新的图表或控件,请参见开放组件。
可嵌入报表数量:
二、基础报表嵌入方案:
根据quickBI账号获取Token,在报表url的后面拼接上该token进行授权。
参考连接:报表嵌入的基础方案 - Quick BI - 阿里云
步骤1、生成AccessToken
(1)在控制台-组织信息-识别码,获取AccessKey ID和AccessKey Secret。
(2)在控制台-用户管理,查找要生成Token的Aliyun ID(账号),如果您使用的是子账号,则Aliyun ID为主账号的账号名:子账号。假设主账号的账号名为test,子账号为zhangsan@sdf123.onaliyun.com,则Aliyun ID为test:zhangsan。
(3)调用生成Token接口,将上述步骤获取的AccessKey ID、AccessKey Secret和Aliyun ID参数拼接到如下请求地址中,并发送get请求获取Token。
例:https://bi.aliyun.com/api/ac3rdservice/token.json?accessId=270216e5-9d6e-468a-af3c-035631559849&accessKey=98d376c8-64fc-44cf-b4a2-117d9b01db7e&aliyunId=gongkongsaas:xiaodong.rong&validityTime=60
步骤2、添加需要嵌入的仪表板(仅当仪表板是发布状态时,才支持设置报表嵌入功能)
在开发者中心-报表嵌入,选择要嵌入的报表。
步骤3、拼接免登URL
在开发者中心-嵌入分析,点击查看对应报表的url,将通过步骤1获取的Token加到报表url后面。(注意url是阿里云登录 - 欢迎登录阿里云,安全稳定的云计算服务平台开头,而不是编辑报表时的url)例:https://bi.aliyun.com/dashboard/view/pc.htm?pageId=098abe24-d607-40b3-91da-eac219b3412b&accessToken=1cf29520503c60081df4530a8b6d42d8
三、安全增强方案:
所谓安全增强就是生成AccessTicket(相当于普通方案的AccessToken)的时候可以限定某个报表,报表内的某个组件,报表的调用次数,定义水印,报表过滤条件。
参考连接:报表嵌入数据权限控制和传参的安全增强方案 - Quick BI - 阿里云
生成安全增强方案的Ticket:
阿里云 OpenAPI 开发者门户
拼接后实例:https://bi.aliyun.com/dashboard/view/pc.htm?pageId=098abe24-d607-40b3-91da-eac219b3412b&cmptId=50c6d5b4-bf10-4210-86ac-0bb8825cb2c1&accessTicket=8ea38fae-9f11-4286-b746-e4cc1226d278
四、数据权限控制
可在控制中心-集中授权,对用户进行数据权限设置
五、自研系统应用:
1、在自研系统用户表增加quickBI账号字段,建立自研系统账号和quickBI账号的对应关系,在生成报表Token或Ticket时使用。如果quickBI账号和自研系统账号保持一致则不需要。
2、quickBI账号限定50个,可创建基础的通用账号供自研系统普通用户使用。
3、在自研系统通过<Iframe>标签嵌入生成的免登录url。通过一下2种方案可以使报表自适应Iframe的高度:
(1)主动传递Iframe内容高度给外部页面。
// Quick BI地址,如使用其他地址可自行补充 const quickBIURL = [ 'https://bi.aliyun.com' ]; function messageListener(event) { if (quickBIURL.includes(event.origin)) { // 使用postMessage传出的高度 console.log( 'Quick BI Dashboard Height:' , event.data.height); // 使用postMessage传出的仪表板页面ID console.log( 'Quick BI Dashboard Id:' , event.data.pageId); } } // 在仪表板加载之前进行监听 window.addEventListener( 'message' , messageListener); |
(2)外部页面主动通过postMessage到Iframe页面获取仪表板高度。
其中:Iframe为嵌入Quick BI仪表板的Iframe。message传入的data中必须包含{ getDashboardHeight: true }。
代码块示例如下:
// Quick BI地址,如使用其他地址可自行补充 const quickBIURL = [ 'https://bi.aliyun.com' ]; function messageListener(event) { if (quickBIURL.includes(event.origin)) { // 使用postMessage传出的高度 console.log( 'Quick BI Dashboard Height:' , event.data.height); // 使用postMessage传出的仪表板页面ID console.log( 'Quick BI Dashboard Id:' , event.data.pageId); } } // 在仪表板加载之前进行监听 window.addEventListener( 'message' , messageListener); // 主动请求Quick BI仪表板高度 // 嵌入Quick BI仪表板的Iframe const iframe = document.querySelector( 'iframe' ); // message传入的data中必须包含{ getDashboardHeight: true } iframe.contentWindow.postMessage({getDashboardHeight: true }, '*' ); |
完整实例代码:
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" /> <meta http-equiv= "X-UA-Compatible" content= "ie=edge" /> </head> <body> <iframe class= "quickbi-iframe-demo" //<page_Id>为仪表板页面的ID,access_Token为访问仪表板的准入令牌 src= "https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=<page_Id>&accessToken=<access_Token> scrolling=" no " frameborder=" 0 " width=" 100% " height=" 600"> </iframe> <script> // Quick BI地址,如使用其他地址可自行补充 const quickBIURL = [ 'https://bi.aliyun.com' ]; function messageListener(event) { if (quickBIURL.includes(event.origin)) { // 使用postMessage传出的高度 console.log( 'Quick BI Dashboard Height:' , event.data.height); // 使用postMessage传出的仪表板页面ID console.log( 'Quick BI Dashboard Id:' , event.data.pageId); } } // 在仪表板加载之前进行监听 window.addEventListener( 'message' , messageListener); // 嵌入Quick BI仪表板的Iframe const iframe = document.querySelector( 'iframe' ); // 主动请求Quick BI仪表板高度 // message传入的data中必须包含{ getDashboardHeight: true } iframe.contentWindow.postMessage({getDashboardHeight: true }, '*' ); </script> </body> </html> |