Metabase 嵌入你的产品模块化 SDK 三步上手【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase如果你的 SaaS 产品需要让客户看自己的数据把 Metabase 嵌入到自己的 Web 应用是最省事的路线。Metabase 的模块化嵌入 SDK 让你不用重写一套图表组件仪表盘、单张图表、甚至查询构建器都能以 React 组件形式直接放进你的页面而且每个组件可以单独控制权限、参数和外观。下面这套流程是我们实际用过的先讲问题再给步骤最后聊聊容易翻车的点。先看你会遇到什么麻烦做嵌入式分析时大多数人踩过两个坑一是给每个客户单独建库、单独出报表客户一多运维直接爆炸二是把整个 Metabase 用 iframe 塞进来导航栏、登录页全露在外面像个贴上去的补丁。Metabase 把嵌入拆成了三种粒度对应三种典型场景嵌入方式适合场景认证要求模块化嵌入单个仪表盘、图表、查询构建器嵌进你的 UISSO 或 Guest 二选一整应用嵌入完整 Metabase 塞进 iframe让用户自助探索需要账号体系公开链接把图表分享给任何拿到链接的人不需要大多数团队最后都选了模块化嵌入因为粒度最细、最好控制。三种方式的能力差异对照表在 docs/embedding/start.md 里选型前先花两分钟看完那张表。三步把仪表盘嵌进你的应用官方快速上手只要求三件事在 Metabase 管理后台开启 SDK、创建一个 API key、在你的 React 项目里装包。装包时注意版本 tag 要和服务器主版本对齐npm install metabase/embedding-sdk-react60-stable然后在组件里引用一个现成的组件即可下面是最小可用的仪表盘嵌入import { EmbeddedDashboard } from metabase/embedding-sdk-react; export default function Page() { return EmbeddedDashboard url{METABASE_URL} contentId{2} apiKeyxx /; }跑起来之后页面里就是一张和 Metabase 后台一模一样的仪表盘过滤器和图表下钻都能交互。完整的步骤、示例工程以及各组件的属性说明都在 docs/embedding/sdk/quickstart.md。多客户场景一套模板各看各的数如果你的产品是 SaaS上面那套 API key 方式就不够用了——key 对应的身份是全局的所有访客看到的都是同一份数据。上生产要做两件事用 JWT SSO 替代 API key让你的应用登录用户和 Metabase 用户一一对应再启用 Tenants把每个客户的数据隔离开。Tenant 的思路是内部用户负责搭建仪表盘租户用户也就是你的客户只能通过嵌入组件看到自己租户的数据行。同一套仪表盘模板可以给所有租户复用不用每个客户都单独建一份内容。具体怎么建租户、怎么给租户组配数据权限docs/embedding/tenants.md 写得很细核心就是一份内容 按租户过滤的数据权限。容易踩的坑包版本和服务器版本不对齐。npm 上的 SDK 按主版本打 tag60-stable对应 Metabase 60。装错版本时 TypeScript 类型和组件行为可能对不上报错很隐蔽装之前先确认你服务器上跑的是哪个主版本。API key 只能当本地调试用。快速上手里的 API key 方式只在 localhost 生效而且它不区分最终用户是谁谁拿到 key 谁就是管理员。要上线就必须接 JWT SSO这需要 Pro 或 Enterprise 计划OSS 版本用不了。一个页面只能混用一种认证方式。同一页面上 SSO 组件和 Guest 组件不能共存规划页面结构时就把组件按认证方式分区别写的时候才想起来。Guest 嵌入是只读的。没有下钻、没有查询构建器、没有 AI 对话但好处是不用给每个访客建 Metabase 账号OSS 版本也能用。对外分享场景用它最省事。接下来看什么想改嵌入组件的外观、隐藏顶栏或侧栏从 docs/embedding/appearance.md 入手想彻底搞清楚谁能看什么数据直接进 docs/permissions/embedding.md。如果你打算长期维护这个集成仓库里的frontend/src/embedding-sdk-bundle/是整个 SDK 的前端源码组件的行为、事件和插件机制都能在里面找到答案。把第一个仪表盘嵌进去跑通剩下的事情就只是按自己的场景往模板上加权限和主题了。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Metabase 嵌入你的产品：模块化 SDK 三步上手
Metabase 嵌入你的产品模块化 SDK 三步上手【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase如果你的 SaaS 产品需要让客户看自己的数据把 Metabase 嵌入到自己的 Web 应用是最省事的路线。Metabase 的模块化嵌入 SDK 让你不用重写一套图表组件仪表盘、单张图表、甚至查询构建器都能以 React 组件形式直接放进你的页面而且每个组件可以单独控制权限、参数和外观。下面这套流程是我们实际用过的先讲问题再给步骤最后聊聊容易翻车的点。先看你会遇到什么麻烦做嵌入式分析时大多数人踩过两个坑一是给每个客户单独建库、单独出报表客户一多运维直接爆炸二是把整个 Metabase 用 iframe 塞进来导航栏、登录页全露在外面像个贴上去的补丁。Metabase 把嵌入拆成了三种粒度对应三种典型场景嵌入方式适合场景认证要求模块化嵌入单个仪表盘、图表、查询构建器嵌进你的 UISSO 或 Guest 二选一整应用嵌入完整 Metabase 塞进 iframe让用户自助探索需要账号体系公开链接把图表分享给任何拿到链接的人不需要大多数团队最后都选了模块化嵌入因为粒度最细、最好控制。三种方式的能力差异对照表在 docs/embedding/start.md 里选型前先花两分钟看完那张表。三步把仪表盘嵌进你的应用官方快速上手只要求三件事在 Metabase 管理后台开启 SDK、创建一个 API key、在你的 React 项目里装包。装包时注意版本 tag 要和服务器主版本对齐npm install metabase/embedding-sdk-react60-stable然后在组件里引用一个现成的组件即可下面是最小可用的仪表盘嵌入import { EmbeddedDashboard } from metabase/embedding-sdk-react; export default function Page() { return EmbeddedDashboard url{METABASE_URL} contentId{2} apiKeyxx /; }跑起来之后页面里就是一张和 Metabase 后台一模一样的仪表盘过滤器和图表下钻都能交互。完整的步骤、示例工程以及各组件的属性说明都在 docs/embedding/sdk/quickstart.md。多客户场景一套模板各看各的数如果你的产品是 SaaS上面那套 API key 方式就不够用了——key 对应的身份是全局的所有访客看到的都是同一份数据。上生产要做两件事用 JWT SSO 替代 API key让你的应用登录用户和 Metabase 用户一一对应再启用 Tenants把每个客户的数据隔离开。Tenant 的思路是内部用户负责搭建仪表盘租户用户也就是你的客户只能通过嵌入组件看到自己租户的数据行。同一套仪表盘模板可以给所有租户复用不用每个客户都单独建一份内容。具体怎么建租户、怎么给租户组配数据权限docs/embedding/tenants.md 写得很细核心就是一份内容 按租户过滤的数据权限。容易踩的坑包版本和服务器版本不对齐。npm 上的 SDK 按主版本打 tag60-stable对应 Metabase 60。装错版本时 TypeScript 类型和组件行为可能对不上报错很隐蔽装之前先确认你服务器上跑的是哪个主版本。API key 只能当本地调试用。快速上手里的 API key 方式只在 localhost 生效而且它不区分最终用户是谁谁拿到 key 谁就是管理员。要上线就必须接 JWT SSO这需要 Pro 或 Enterprise 计划OSS 版本用不了。一个页面只能混用一种认证方式。同一页面上 SSO 组件和 Guest 组件不能共存规划页面结构时就把组件按认证方式分区别写的时候才想起来。Guest 嵌入是只读的。没有下钻、没有查询构建器、没有 AI 对话但好处是不用给每个访客建 Metabase 账号OSS 版本也能用。对外分享场景用它最省事。接下来看什么想改嵌入组件的外观、隐藏顶栏或侧栏从 docs/embedding/appearance.md 入手想彻底搞清楚谁能看什么数据直接进 docs/permissions/embedding.md。如果你打算长期维护这个集成仓库里的frontend/src/embedding-sdk-bundle/是整个 SDK 的前端源码组件的行为、事件和插件机制都能在里面找到答案。把第一个仪表盘嵌进去跑通剩下的事情就只是按自己的场景往模板上加权限和主题了。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考