嵌入式分析 SDK - 快速入门

本指南将引导您了解如何使用 API 密钥在您的应用程序中通过 Metabase 设置嵌入式分析 SDK。

此设置

  • 仅用于评估(以便您了解 SDK 的工作原理)。
  • 仅在开发应用程序时在 localhost 上运行(尽管您的 Metabase 不需要本地运行)。
  • 适用于 Metabase 的企业版和开源版,无论是自托管还是在 Metabase Cloud 上。

但是,如果您想在生产环境中使用 SDK,您还需要设置 JWT SSO 身份验证,这需要专业版企业版计划。要在自托管 Metabase 时启用 JWT SSO,您需要运行企业版 Docker 镜像或 JAR,并激活您的许可证

先决条件

如果您没有正在运行的 Metabase,请查看快速入门 CLI

如果您不想使用自己的应用程序代码,请查看我们的使用示例应用程序的快速入门

概述

要使用 SDK 在您的应用中嵌入仪表盘,您需要

  1. 在 Metabase 中启用 SDK
  2. 在 Metabase 中创建 API 密钥
  3. 在您的应用中安装 SDK
  4. 在您的应用中嵌入 SDK 组件
  5. 查看您嵌入的 Metabase 仪表盘

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 仪表盘

运行您的应用并访问带有嵌入式仪表盘的页面。

Embedded example dashboard

后续步骤

阅读其他版本的 Metabase 的文档。

这有帮助吗?

感谢您的反馈!
想改进这些文档吗? 提出更改建议。
© . This site is unofficial and not affiliated with Metabase, Inc.