嵌入式分析 SDK - 快速入门

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

此设置

• 仅用于评估（以便您了解 SDK 的工作原理）。
• 在开发应用程序时仅在 localhost 上运行（尽管您的 Metabase 不需要本地运行）。
• 适用于 Metabase 的企业版和开源版，包括自托管和 Metabase Cloud。

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

先决条件

• Metabase 52 版本或更高版本（OSS 或 EE）。请参阅安装 Metabase。
• 确保您的React 版本兼容。（您也可以使用示例 React 应用。）

如果您没有运行 Metabase，请查看快速入门 CLI。

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

概述

要在您的应用程序中使用 SDK 嵌入仪表板，您需要

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

1. 在 Metabase 中启用 SDK

在 Metabase 中，点击右上角的齿轮图标，然后导航到管理员设置 > 嵌入 > 模块化并启用React SDK。

2. 在 Metabase 中创建 API 密钥

仍在管理员控制台中，转到设置 > 身份验证并点击API 密钥选项卡。创建一个新的 API 密钥。

• 密钥名称：“Embedded analytics SDK”（仅为方便识别密钥）。
• 组：选择“管理员”（因为这仅用于本地测试）。

3. 在您的应用中安装 SDK

安装 npm 包时，使用与您的 Metabase 主版本对应的 npm dist-tag 至关重要。例如，如果您的 Metabase 版本是 1.56.x，您将运行 56-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以登录用户、管理权限并在生产环境中部署您的应用程序。