嵌入式分析 SDK - 快速入门
本指南将引导您如何使用 API 密钥在您的应用程序中设置 Metabase 嵌入式分析 SDK。
此设置
- 仅用于评估(以便您了解 SDK 的工作方式)。
- 仅在开发您的应用时在 localhost 上工作(尽管您的 Metabase 无需在本地运行)。
- 适用于 Metabase 的企业版和开源版,无论是自托管还是 Metabase 云版。
但是,如果您想在生产环境中使用 SDK,您还需要设置 JWT SSO 身份验证,这需要专业版或企业版计划。如果您是自托管 Metabase,要启用 JWT SSO,您需要运行企业版 Docker 镜像或 JAR,并激活您的许可证。
先决条件
- Metabase 52 或更高版本(开源版或企业版)。请参阅安装 Metabase。
- 使用 React 17 或 18 的应用程序。(您也可以使用示例 React 应用程序)
如果您没有运行中的 Metabase,请查看CLI 快速入门。
如果您不想使用自己的应用程序代码,请查看我们的示例应用程序快速入门。
概览
要使用 SDK 在您的应用中嵌入仪表板,您需要
1. 在 Metabase 中启用 SDK
在 Metabase 中,点击右上角的齿轮图标,导航到管理员设置 > 设置 > 嵌入,然后启用嵌入式分析 SDK。
2. 在 Metabase 中创建 API 密钥
仍在管理员设置选项卡中,导航到侧边栏的身份验证部分,点击API 密钥选项卡。创建新的 API 密钥。
- 密钥名称:“嵌入式分析 SDK”(仅为方便识别密钥)。
- 组:选择“管理员”(因为这仅用于本地测试)。
3. 在您的应用中安装 SDK
安装 NPM 包时,务必使用与您的 Metabase 主版本对应的 npm dist-tag。例如,如果您的 Metabase 是 1.53.x 版本,您将运行 53-stable
。请参阅SDK 版本控制。
通过 NPM
npm install @metabase/embedding-sdk-react@53-stable
通过 Yarn
yarn add @metabase/embedding-sdk-react@53-stable
4. 在您的应用中嵌入 SDK 组件
在您的应用中,导入 SDK 组件,如下所示
import {
InteractiveDashboard,
MetabaseProvider,
defineMetabaseAuthConfig,
} from "@metabase/embedding-sdk-react";
/**
* This creates an auth config to pass to the `MetabaseProvider` component.
* You'll need to replace the `metabaseInstanceUrl` and the `apiKey` values.
*/
const authConfig = defineMetabaseAuthConfig({
metabaseInstanceUrl: "https://metabase.example.com",
apiKey: "YOUR_API_KEY",
});
/**
* Now embed your first dashboard. In this case, we're embedding the dashboard with ID 1.
* On new Metabases, ID 1 will be the example dashboard, but feel free to use a different dashboard ID.
*/
export default function App() {
return (
<MetabaseProvider authConfig={authConfig}>
<InteractiveDashboard dashboardId={1} />
</MetabaseProvider>
);
}
5. 查看您的嵌入式 Metabase 仪表板
运行您的应用并访问包含嵌入式仪表板的页面。
下一步
- 探索主题设置以更改外观和感觉。
- 通过在 Metabase 和您的应用中设置 JWT SSO 来继续,以便用户登录、管理权限并在生产环境中部署您的应用。
阅读其他Metabase 版本的文档。