新增功能

交互式嵌入

交互式嵌入仅在Pro和企业计划（自托管和Metabase Cloud）上提供。

交互式嵌入是如果您想提供多租户、自助分析所需要的东西。

交互式嵌入是唯一一种可以与您的权限和SSO集成，以给人提供正确的查询和钻取数据访问级别的嵌入方式。

交互式嵌入演示

要了解您可以如何使用交互式嵌入，请查看我们的交互式嵌入演示。

要查看查询构建器的实际效果，请点击报告 > + 新建 > 问题。

快速入门

查看交互式嵌入快速入门。

交互式嵌入的先决条件

确保您有许可证令牌以激活Pro或企业计划。
将人员组织到Metabase 组中。
为每个组设置权限。
设置SSO以自动应用权限并在登录时显示正确的数据。通常，我们建议使用JWT SSO。

如果您正在处理一个多租户情况，请查看我们为配置不同客户模式的权限的建议。

如果您在本地上运行应用程序，并使用专业云版本，或者在不同的域名中托管Metabase和您的应用程序，您需要将Metabase环境会话cookie的samesite选项设置为“none”。

在Metabase中启用交互式嵌入

转到设置 > 管理设置 > 嵌入。
点击启用。
点击交互式嵌入。
在授权源下，添加您想要嵌入Metabase的网站或Web应用程序的URL（例如https://*.example.com）。

在您的网站上设置嵌入

创建一个具有src属性的iframe，设置为
- URL，您要嵌入的Metabase页面，或者
- 认证端点，该端点将重定向到您的Metabase URL。
可选：根据您的Web应用程序的设置，设置环境变量以
可选：启用使用支持的postMessage消息与嵌入的Metabase通信
- 从Metabase
- 到Metabase
可选：设置参数以显示或隐藏Metabase UI组件。

一旦您准备推出交互式嵌入，请确保人们允许浏览器从Metabase接收cookie，否则他们将无法登录。

将iframe指向Metabase URL

转到您的Metabase实例，并找到您想要嵌入的页面。

例如，要嵌入您的Metabase主页，将src属性设置为您的站点URL，例如

http://metabase.yourcompany.com/

要嵌入特定的Metabase仪表板，使用仪表板的URL，例如

http://metabase.yourcompany.com/dashboard/1

将iframe指向认证端点

如果您想直接将人们发送到您的SSO登录屏幕（即跳过带有SSO按钮的Metabase登录屏幕），并在认证后自动重定向到Metabase，请使用此选项。

您需要将src属性设置为您的认证端点，其中包含一个return_to参数，该参数指向编码的Metabase URL。例如，要将人们发送到您的SSO登录页面，并自动将他们重定向到http://metabase.yourcompany.com/dashboard/1

https://metabase.example.com/auth/sso?return_to=http%3A%2F%2Fmetabase.yourcompany.com%2Fdashboard%2F1

如果您正在使用JWT，您可以使用重定向的相对路径（即，不带站点URL的Metabase URL）。例如，要将人们发送到/dashboard/1的Metabase页面

https://metabase.example.com/auth/sso?jwt=<token>&return_to=%2Fdashboard%2F1

您必须对重定向链接中的所有参数进行URL编码（或根据您的网络设置进行双重编码），包括过滤参数（例如，filter=value）和UI设置（例如，top_nav=true）。例如，如果您在上面的JWT示例中添加了两个过滤参数，则您的src链接将变为

https://metabase.example.com/auth/sso?jwt=<token>&redirect=%2Fdashboard%2F1%3Ffilter1%3Dvalue%26filter2%3Dvalue

跨浏览器兼容性

为确保嵌入的Metabase在所有浏览器中工作，请将Metabase和嵌入应用程序放在同一顶级域名（TLD）中。顶级域名由网络地址的最后部分表示，如.com或.org。

请注意，您的交互式嵌入必须与Safari兼容，才能在iOS中的任何浏览器（例如iOS上的Chrome）上运行。

在不同域名中嵌入Metabase

如果您的Metabase和嵌入应用程序已经在同一顶级域名（TLD）中，请跳过本节。

如果您想在另一个域名中嵌入Metabase（例如，如果Metabase托管在metabase.yourcompany.com，但您想在yourcompany.github.io中嵌入Metabase），您可以告诉Metabase将会话cookie的SameSite值设置为“none”。

您可以在管理设置 > 嵌入 > 交互式嵌入 > SameSite cookie设置中设置会话cookie的SameSite值。

SameSite值包括

Lax（默认值）：允许当有人从外部网站（如跟随链接时）导航到原始站点时发送cookie。
None：允许所有跨站请求。与大多数Safari和iOS浏览器（如iOS上的Chrome）不兼容。如果您将此环境变量设置为“None”，则必须在Metabase中使用HTTPS以防止浏览器拒绝请求。
Strict（不建议）：从不允许在跨站请求中发送cookie。警告：这将阻止用户通过外部链接访问Metabase。

您还可以设置MB_SESSION_COOKIE_SAMESITE环境变量。

如果您使用Safari，您需要允许跨站跟踪。根据浏览器不同，在查看隐私/隐身标签中的嵌入项时，您可能会遇到问题。

了解更多关于SameSite cookie的信息。

保护交互式嵌入

Metabase使用HTTP cookie对用户进行身份验证并保持他们在嵌入的Metabase上登录，即使有人关闭浏览器会话也是如此。如果您喜欢图表化的认证流程，请查看使用SSO的交互式嵌入。

要限制用户保持登录的时间，请将MAX_SESSION_AGE设置为以分钟为单位的数字。默认值为20,160（两周）。

例如，要使人们最多保持24小时登录

MAX_SESSION_AGE=1440

要自动在用户结束浏览器会话时清除用户的登录cookie

MB_SESSION_COOKIES=true

要手动将某人从Metabase注销，请加载以下URL（例如，在应用程序注销页面的隐藏iframe中）

https://metabase.yourcompany.com/auth/logout

如果您使用JWT进行单点登录（SSO），我们建议将exp（过期时间）属性设置为较短的时间（例如，1分钟）。

支持从嵌入的Metabase发送的postMessage消息

为了跟踪嵌入的Metabase URL的变化（例如，应用过滤器时），请设置您的应用程序以监听来自嵌入的Metabase的“location”消息。如果您想使用此消息进行深度链接，请注意“location”与“window.location”相同。

{
  "metabase": {
    "type": "location",
    "location": LOCATION_OBJECT_OR_URL
  }
}

要使嵌入的Metabase页面（如问题）填充应用程序中的整个iframe，请设置您的应用程序以监听来自Metabase的“frame”消息，并使用“normal”模式。

{
  "metabase": {
    "type": "frame",
    "frame": {
      "mode": "normal"
    }
  }
}

要指定iframe的大小以匹配嵌入的Metabase页面（如仪表板），请设置您的应用程序以监听来自Metabase的“frame”消息，并使用“fit”模式。

{
  "metabase": {
    "type": "frame",
    "frame": {
      "mode": "fit",
      "height": HEIGHT_IN_PIXELS
    }
  }
}

支持发送到嵌入的Metabase的postMessage消息

要更改嵌入的URL，请从您的应用程序发送“location”消息到Metabase。

{
  "metabase": {
    "type": "location",
    "location": LOCATION_OBJECT_OR_URL
  }
}

使用沙箱分组策略

如果您想让来自单个客户账户的多人共同协作处理问题和仪表板，您需要为每个客户账户设置一个组。

您可以使用一个单独的、独立的组来处理数据沙箱，该组仅沙箱您的数据。例如，每个人都可以成为设置数据权限并通过某些适用于所有客户账户的属性进行沙箱的客户组的一部分。

此外，单个客户账户中的每个人也可以是特定于该客户账户的组的成员。这样，他们可以在他们的组织中的其他人一起协作收集，而不会看到来自其他客户账户的人创建的内容。

显示或隐藏Metabase UI组件

要更改交互式嵌入的界面，您可以在嵌入URL的末尾添加参数。如果您想更改嵌入中的颜色或字体，请参阅自定义外观。

例如，您可以通过以下方式禁用Metabase的顶部导航栏和侧导航菜单

your_embedding_url?top_nav=false&side_nav=false

Top nav and side nav disabled

选项包括

操作按钮
附加信息
面包屑
标题
语言
标志
新按钮
搜索
侧导航
顶部导航

`action_buttons`

默认情况下在启用了标题的问题页面上可见。

要隐藏如筛选、汇总、查询构建器按钮等操作按钮

header=false&action_buttons=false

Action buttons

`additional_info`

默认情况下在问题和仪表板页面上可见，当启用了标题时。

要隐藏灰色文本“由FirstName LastName X天前编辑”，以及包含收集、数据库和表名称的面包屑

header=false&additional_info=false

Additional info

`breadcrumbs`

默认情况下在顶部导航栏中显示。集合面包屑显示项目（即项目所在的集合（s））的路径。要隐藏面包屑

breadcrumbs=false

`header`

默认情况下在问题和仪表板页面上可见。

要隐藏问题或仪表板的标题、附加信息和操作按钮

header=false

`locale`

您可以通过参数本地化用户界面。例如，要将区域设置设置为西班牙语

locale=es-ES

查看Metabase支持的语言环境（点击此处）。了解更多关于本地化的信息。

`logo`

是否显示打开和关闭侧边栏导航的logo。默认为true。Metabase如何显示logo取决于side_nav设置。以下是这两个参数交互的大致说明

如果logo=true并且

side_nav=true：看起来像是常规的Metabase（显示您设置的任何logo）。
side_nav=false：没有侧边栏，因此鼠标悬停在logo上时不会发生任何事情。

如果logo=false并且

side_nav=true：Metabase显示通用的侧边栏图标，正常状态下为灰色，鼠标悬停时为品牌颜色。
side_nav=false：没有侧边栏也没有logo，因此面包屑会移动到屏幕的左侧。

`new_button`

默认隐藏。要显示用于创建查询或仪表板的+ 新建按钮

top_nav=true&new_button=true

`search`

默认隐藏。要显示顶部导航中的搜索框

top_nav=true&search=true

`side_nav`

导航侧边栏在/collection和主页路由上显示，默认情况下在所有其他位置隐藏。

允许人们最小化侧边栏

top_nav=true&side_nav=true

`top_nav`

默认显示。要隐藏顶部导航栏

top_nav=false

search、new_button和breadcrumbs都取决于top_nav设置为true。如果这三个子项（search、new_button和breadcrumbs）都是false，则Metabase将隐藏顶部导航栏。

参考应用

要使用JWT通过SSO构建一个示例交互式嵌入，请查看我们的参考应用

Node.js + Express（带快速入门指南）
Node.js + React

进一步阅读

阅读其他Metabase版本的文档。

自助式分析

嵌入式分析

文档

学习

分析

嵌入

管理

其他资源