:5 分钟完成 Wyn iframe 集成,支持 Token 与参数传递)
前言对于 ERP、MES、CRM、SaaS 等业务系统来说数据分析已经成为产品的重要组成部分。但很多团队第一次做 BI 集成时都会遇到 Token、参数传递、权限控制等问题。本文将以 Wyn 为例介绍企业项目中最常用的iframe 嵌入方案并结合真实项目经验讲解 Token 获取、参数传递以及 BI 与业务系统联动的实现方式帮助你快速完成第一个嵌入式BIEmbedded BI项目。一、那些年我们绕不开的数据分析大坑做过 ERP、MES、CRM或 SaaS 产品的朋友对下面这些需求一定不会陌生• 客户今天想看柱状图明天又改成折线图• 领导临时要求增加同比、环比分析• 财务希望导出 Excel运营希望展示仪表板;• 同一个分析页面不同部门还要看到不同的数据。这些需求看起来都不复杂但每一次变化都意味着研发重新修改SQL、接口和前端页面。真正麻烦的不是开发而是分析需求永远在变化。这也是越来越多企业开始采用嵌入式Bl的原因—它不是替代开发而是把数据分析能力从业务代码中解耦出来。研发团队负责一次集成业务人员负责持续配置后续新增仪表板、调整分析维度不需要再次开发页面大大降低了维护成本。传统 BI 开发 VS 嵌入式BI对于大多数企业来说真正需要的并不是重新开发一套 BI而是**让 BI 成为自己业务系统的一部分。**这也是嵌入式BI越来越受欢迎的原因。二、为什么 iframe 是企业项目最常见的集成方式目前主流的 BI 产品一般都会提供多种嵌入方式例如 iframe、SDK、API 等。其中**iframe 是开发成本最低、上线速度最快的一种方案。**它最大的特点就是无需修改 Wyn 页面无需引入额外 SDK支持 Dashboard 和 ReportVue、React、ASP.NET、Java 等项目都可以直接使用。对于下面这些场景iframe 基本都可以满足需求✅ ERP 数据分析模块✅ CRM 客户分析✅ OA 经营驾驶舱✅ MES 生产看板✅ SaaS 产品快速集成 BI当然它也有自己的局限。例如页面样式无法完全融合交互能力有限如果后续希望与业务系统深度联动更推荐使用DIV集成下一篇文章会详细介绍。对于大部分项目来说iframe 往往都是嵌入式BI的第一步。三、实战5 分钟完成 iframe 集成下面我们以 Wyn 为例完成一个最简单的嵌入过程。整个过程只需要四步。第一步设计仪表板或报表登录 Wyn新建一个 Dashboard仪表板或 Report报表。通过拖拽组件即可完成图表设计不需要编写任何代码。设计完成后点击保存一个可供嵌入的分析文档仪表板/报表就已经准备好了。第二步复制嵌入链接设计完成后选中对应的文档仪表板/报表点击**更多 → 复制链接**系统会自动生成当前 Dashboard 或 Report 的访问地址。例如http://your-wyn-server/dashboards/view/dashboardId这个地址就是后续 iframe 加载的页面地址。第三步获取用户 Token为了保证访问安全Wyn 支持使用 Token 验证当前用户身份。系统管理员可以为指定用户生成对应 Token。后续 iframe 访问时只需要把 Token 拼接到 URL 后面即可。例如http://your-wyn-server/dashboards/view/dashboardId?themedefaultlngzh-CNtokenxxx项目经验实际项目中建议由业务系统后台动态生成 Token再返回给前端使用而不是直接写死在页面中。第四步在业务系统中嵌入 iframe获取文档仪表/报表 地址和 用户Token 后就可以开始嵌入到自己的业务系统了。下面以最简单的 HTML 页面为例只需要一个 iframe 即可完成集成。!DOCTYPE html html langzh-CN head titleWyn Embedded BI Demo/title /head body iframe idwynFrame srchttp://your-wyn-server/reports/view/reportId?themedefaultlngzh-CNtokenxxxxxxxxxxxxxxxx frameborder0 stylewidth:100%;height:100vh; /iframe /body /html说明如果你的项目使用的是 Vue、React、Angular 或 ASP.NET MVC本质上也是加载同一个 URL只是写法略有区别。刷新页面后你会发现 文档仪表板/报表 已经和业务系统显示在同一个页面中。整个过程无需额外开发接口也无需引入 SDK这也是 iframe 成为企业项目中最常见嵌入方式的原因。四、参数传递真正实现千人千面完成嵌入后还有一个企业项目几乎都会遇到的问题同一张仪表板/报表如何让不同用户看到不同的数据比如同一张销售看板华东销售只想看华东、华南销售只看华南。如果为每个用户都制作一份仪表板/报表不仅维护成本高而且几乎不可维护。更好的做法是给仪表板/报表加一个仪表板参数/报表参数再通过 dp 参数传入不同的值同一份文档就能展示不同的数据——这就是千人千面。iframe 的本质就是一个 URLWyn 提供的dp 参数就是专门用来传递仪表板 / 报表参数的。dp 是什么dp 是用于指定仪表板或报表的参数值为一段 JSON格式为 {“参数名”:[“参数值”]}。把它拼在 iframe 的 src 后面加载这个url时,Wyn会把这个值传递给对应的仪表板参数或报表参数只要仪表板/报表按这个参数做数据过滤就能实现“参数值不同→显示的数据不同”。Wyn 支持通过 URL 传递参数实现动态过滤。例如http://your-wyn-server/dashboards/view/dashboardId?themedefaultlngzh-CNtokenxxxdp{参数名称: [参数值]}这种方式不仅能够减少文档数量也方便后续统一维护分析逻辑。⚠️注意URL 参数更适合用于业务筛选。如果涉及真正的数据权限控制如行级权限、多租户隔离建议结合 SSO 或 Security Provider通过后台传递用户上下文实现更加安全可靠。五、项目经验企业项目中几个实用建议在实际项目中我们已经完成过多个 Embedded BI 项目总结下来有几点经验值得分享。 建议一POC 项目优先选择 iframe如果只是快速验证或者希望尽快上线分析模块iframe 是开发成本最低的方案。通常几个小时即可完成集成。 建议二Token 建议后台动态生成不要将 Token 固定写在前端代码中。推荐由业务系统后台根据当前登录用户生成 Token再返回前端提高安全性。 建议三参数用于筛选不建议直接做权限控制URL 参数容易被修改。真正涉及数据权限时更推荐使用 SSO、Security Provider 或用户上下文控制。 建议四提前规划后续扩展如果未来希望去掉 iframe 边框页面样式完全统一与业务系统深度交互自定义工具栏建议后续直接升级到DIV 集成。下一篇我们就会介绍这一部分。六、总结iframe 是 嵌入式BI 最简单、最快速的集成方式也是绝大多数企业项目的第一步。本文介绍了 Wyn 最常见的嵌入流程包括✅ 创建 Dashboard / Report✅ 获取嵌入链接✅ Token 身份验证✅ iframe 页面集成✅ 参数传递千人前面对于大多数 ERP、MES、CRM 和 SaaS 产品来说这套方案已经能够满足快速集成 BI 的需求。下一篇预告虽然 iframe 集成简单但它始终存在一个问题它只是嵌进去却还没有真正融进去。如果希望 BI 与业务系统拥有统一的页面风格、更丰富的交互能力以及更高的定制化程度就需要使用 DIV集成。下一篇我们将介绍如何通过 DIV集成实现BI 与业务系统的深度交互。扩展链接嵌入式BI工具让数据分析无处不在