嵌入式分析 SDK - 示例应用快速入门

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

先决条件

• Node.js 20.x LTS 或更高版本（用于示例应用程序）。
• Metabase 版本 v1.51 或更高版本.

快速入门概述

我们将在 Metabase 和示例应用程序中进行一些设置。

设置 Metabase 以进行嵌入

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

启动示例应用程序

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

然后尝试调整样式。

开始吧。

安装 Metabase 企业版

您可以通过 免费试用 在云计划上运行 Metabase Pro。

或在本地运行。这是一个 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 将在 http://localhost:3000 上运行。

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

激活您的许可证

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

在 Metabase 中启用嵌入

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

开启

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

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

启用使用 JWT 的 SSO

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

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

JWT 身份提供程序 URI

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

localhost:9090/sso/metabase

或将您的 Cloud URL 替换为 /localhost。

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

设置应用程序环境

在示例应用程序的主目录中，将 .env.example 模板复制到 .env。

cp .env.example .env

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

您的 .env 文件将如下所示

# FRONTEND
PORT=3100
REACT_APP_METABASE_INSTANCE_URL="http://localhost:3000"
REACT_APP_AUTH_PROVIDER_URI="http://localhost:9090/sso/metabase"

# BACKEND
BACKEND_PORT=9090
METABASE_INSTANCE_URL="http://localhost:3000"
METABASE_JWT_SHARED_SECRET="TODO"

设置应用服务器

切换到 server 目录

cd server

安装软件包

npm install

启动服务器

npm start

设置客户端应用程序

切换到 client 目录。

安装软件包

npm install

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

启动客户端

在另一个终端中，切换到 client 目录

cd client

安装依赖项

npm install

启动客户端应用

npm start

您的浏览器应自动打开该应用。默认情况下，该应用在 http://localhost:3100 上运行。

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

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

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

尝试更改 客户端应用 中的一些 theme 选项来设置组件样式。