嵌入式分析 SDK - 样本应用快速入门

本指南使用 样本 React 应用 设置嵌入式分析 SDK，但您也可以使用自己的应用程序进行操作。

先决条件

• Node.js 20.x LTS 或更高版本（用于样本应用程序）。
• Metabase 版本 v1.52 或更高.
• Metabase 专业版或企业版许可证（如果您没有许可证，请查看 此快速入门，它缺少付费 JWT SSO 设置。）
• （可选）：Docker

两种使用 Metabase 设置样本应用的方法

• 使用 Docker 快速设置（包括一个样本 Metabase）
• 详细设置（自带 Metabase，或启动一个新的 Metabase）

使用 Docker 快速设置

此快速设置将运行一个 Docker 容器，其中包含样本应用和样本 Metabase。

1. 将 .env.docker.example 复制到 .env.docker。
2. 在 .env.docker 文件中，将 <your_enterprise_token> 替换为您的高级嵌入令牌。
3. 在顶层目录中，运行

   yarn start
   

此脚本将

• 拉取 Metabase Docker 镜像并在容器中运行。
• 在 Metabase 中设置 JWT SSO。
• 构建并运行包含嵌入式交互式问题的样本应用程序。

应用程序将在 https://:4400 启动。

就是这样！您应该已经 启动并运行。

如果您想登录此命令设置的样本 Metabase，请访问 https://:4300。您可以使用 Rene Descartes 的电子邮件和密码登录

• 电子邮件：rene@example.com
• 密码：foobarbaz

详细设置

我们将在 Metabase 中进行一些设置，然后在样本应用程序中进行设置。您也可以自带 Metabase，在这种情况下可以跳过安装步骤。

以下是您将要做的事情的快速概述

设置 Metabase 以进行嵌入

1. 安装 Metabase 企业版（如果您尚未安装）
2. 激活您的许可证
3. 启用嵌入
4. 使用 JWT 启用 SSO

启动样本应用程序

1. 获取样本应用程序.
2. 设置应用程序环境.
3. 运行应用服务器 以处理 JWT 身份验证并提供嵌入式 Metabase 组件。
4. 运行客户端应用程序，它将包含使用 SDK 构建的 Metabase 组件。

然后调整样式。

开始吧。

安装 Metabase 企业版

您可以使用 免费试用 在云计划上运行 Metabase 专业版。

或者在本地运行。这是一个 Docker 一行命令

docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest

您还可以 下载 JAR，并像这样运行它

java --add-opens java.base/java.nio=ALL-UNNAMED -jar metabase.jar

默认情况下，Metabase 将在 https://:3000 运行。

如果您遇到困难，请查看我们的 安装文档。

激活您的许可证

要在自托管时使用 JWT 启用 SSO，您需要 激活您的许可证。云上的 Metabase 专业版计划会为您处理此问题。

在 Metabase 中启用嵌入

从任何 Metabase 页面，点击右上角的齿轮图标，然后选择管理设置 > 设置 > 嵌入。

打开

• 嵌入式分析 SDK
• 静态嵌入

否则，这一切都将毫无希望。

使用 JWT 启用 SSO

我们还需要在 Metabase 中更新 JWT 提供商 URI。默认情况下，此 URI 是 SDK 重定向登录请求的地方。

从任何 Metabase 页面，点击右上角的齿轮图标，然后选择管理设置 > 设置 > 身份验证。

在标有 JWT 的卡片上，点击设置按钮。

JWT 身份提供商 URI

在 JWT 身份提供商 URI 字段中，粘贴

https://:9090/sso/metabase

或将您的云 URL 替换为 https://。

JWT 签名密钥使用的字符串

点击生成密钥按钮。

复制密钥并将其粘贴到您的 .env 文件中的环境变量 METABASE_JWT_SHARED_SECRET 中。

应用程序服务器将使用此密钥签署令牌，以便 Metabase 知道应用程序的内容请求已获授权。

保存并启用 JWT

请务必点击保存并启用按钮，否则一切都将无效。

设置样本应用程序

克隆 Metabase Node JS React SDK 嵌入式样本应用。

git clone git@github.com:metabase/metabase-nodejs-react-sdk-embedding-sample.git

检出与您的 Metabase 版本对应的分支

在 metabase-nodejs-react-sdk-embedding-sample 仓库中检出与您的 Metabase 版本对应的分支。

例如，如果您运行的是 Metabase 1.53，请确保样本应用仓库在 53-stable 分支上。您可以在 Metabase UI 中点击右上角的齿轮图标并选择关于 Metabase 来查找您的 Metabase 版本。

要切换到另一个分支，请运行 git checkout <branch-name>，例如。

git checkout 52-stable

设置应用程序环境

在样本应用的主目录中，将 .env.example 模板复制到 .env。

cp .env.example .env

在 .env 中，确保 VITE_METABASE_INSTANCE_URL 和 METABASE_INSTANCE_URL 指向您的 Metabase 实例 URL，例如 https://:3000。

您的 .env 将如下所示

# FRONTEND
CLIENT_PORT=3100
VITE_METABASE_INSTANCE_URL="https://:3000"

# BACKEND
AUTH_PROVIDER_PORT=9090
METABASE_INSTANCE_URL="https://:3000"
METABASE_JWT_SHARED_SECRET="TODO"

设置应用程序服务器

进入 server 目录

cd server

安装包

npm install

启动服务器

npm start

设置客户端应用程序

在另一个终端中，进入 client 目录

cd client

安装依赖项

npm install

此命令将安装 Metabase 嵌入式分析 SDK，以及应用程序的其他依赖项。

您也可以安装 不同版本的 SDK。只需确保 SDK 的主要版本与您使用的 Metabase 的主要版本匹配。

启动客户端应用程序

npm start

您的浏览器应该会自动打开应用程序。默认情况下，应用程序在 https://:3100 运行。

至此，您应该已经启动并运行

在您的应用程序中，您将看到一个嵌入式 InteractiveQuestion 组件。

<MetabaseProvider authConfig={authConfig} theme={theme}>
  <InteractiveQuestion questionId={questionId} />
</MetabaseProvider>

后续步骤

要设置组件样式，请尝试更改客户端应用程序 client/src/App.jsx 中的一些 theme 选项。有关主题的更多信息，请查看 外观。