企业官网建设流程全解析

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 把嵌入拆成了三种粒度，对应三种典型场景：

大多数团队最后都选了模块化嵌入，因为粒度最细、最好控制。三种方式的能力差异对照表在 docs/embedding/start.md 里，选型前先花两分钟看完那张表。

三步把仪表盘嵌进你的应用

官方快速上手只要求三件事：在 Metabase 管理后台开启 SDK、创建一个 API key、在你的 React 项目里装包。装包时注意版本 tag 要和服务器主版本对齐：

npm install @metabase/embedding-sdk-react@60-stable

然后在组件里引用一个现成的组件即可，下面是最小可用的仪表盘嵌入：

import { EmbeddedDashboard } from "@metabase/embedding-sdk-react"; export default function Page() { return <EmbeddedDashboard url={METABASE_URL} contentId={2} apiKey="xx" />; }

跑起来之后，页面里就是一张和 Metabase 后台一模一样的仪表盘，过滤器和图表下钻都能交互。完整的步骤、示例工程以及各组件的属性说明，都在 docs/embedding/sdk/quickstart.md。

多客户场景：一套模板，各看各的数

如果你的产品是 SaaS，上面那套 API key 方式就不够用了——key 对应的身份是全局的，所有访客看到的都是同一份数据。上生产要做两件事：用 JWT SSO 替代 API key，让你的应用登录用户和 Metabase 用户一一对应；再启用 Tenants，把每个客户的数据隔离开。

Tenant 的思路是：内部用户负责搭建仪表盘，租户用户（也就是你的客户）只能通过嵌入组件看到自己租户的数据行。同一套仪表盘模板可以给所有租户复用，不用每个客户都单独建一份内容。

具体怎么建租户、怎么给租户组配数据权限，docs/embedding/tenants.md 写得很细，核心就是"一份内容 + 按租户过滤的数据权限"。

容易踩的坑

包版本和服务器版本不对齐。npm 上的 SDK 按主版本打 tag，@60-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