开始使用不公开嵌入

本页将引导您完成私密嵌入的设置。私密嵌入选项要求您直接管理 <iframe> HTML 元素以嵌入 Looker 内容，并要求用户在托管应用之外单独登录 Looker。

我们将逐步介绍以下私密嵌入代码示例：

<iframe
    src="https://instance.looker.com/embed/dashboards/4?Timeframe=14+day"
    width="600"
    height="300"
    frameborder="0">
</iframe>

1. 构建嵌入内容网址

以网址 https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day 中的 Looker 内容为例。我们将根据此 Looker 内容网址构建嵌入内容网址，并将 iframe 的 src 属性设置为该网址。在完成这些步骤的过程中，您可以随意使用自己的 Looker 内容网址。

上述代码示例中的嵌入内容网址如下所示：

https://instance.looker.com/embed/dashboards/4?theme=red&Timeframe=14+day

嵌入内容网址由三部分组成：

  • 主机名：Looker 实例的主机名
  • 路径：以 /embed 为前缀的 Looker 内容网址路径（对于查询可视化图表，需要执行额外的步骤）
  • 参数：用于指定过滤条件和主题的网址参数

协议必须始终为 https://。下面我们来详细构建每个部分。

第 1 部分：主机名

  1. 前往 Looker 内容。以下是 Looker 内容网址示例：https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day。
  2. 您的嵌入内容网址主机名为 instance.looker.com。

第 2 部分：路径

嵌入内容的网址路径取决于您嵌入的 Looker 内容。

嵌入所有 Looker 内容（查询可视化图表除外）

  1. 前往 Looker 内容。以下是 Looker 内容网址示例：https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
  2. 确定 Looker 内容网址的路径：/dashboards/4。
  3. 在 Looker 内容网址的路径前添加前缀 /embed。您的嵌入内容网址的路径为 /embed/dashboards/4。

嵌入查询可视化图表

  1. 前往查询可视化图表。示例网址：instance.looker.com/explore/my_model/my_explore?qid=1234567890abcdefghij12
  2. 确定您的查询客户端 ID。qid 参数：1234567890abcdefghij12 是查询的客户端 ID，表示查询和可视化设置。
  3. 您的嵌入内容网址路径是 /embed/query-visualization/，并附加了您的查询客户端 ID。嵌入内容网址的示例路径为 /embed/query-visualization/1234567890abcdefghij12

第 3 部分：参数

嵌入内容的网址参数可控制嵌入内容的过滤条件和主题。

过滤条件

  1. 前往 Looker 内容网址。
  2. 手动将内容的滤镜调整为所需效果。在此示例中，生成的 Looker 内容网址为：https://instance.looker.com/dashboards/4?Timeframe=14+day
  3. 嵌入内容网址参数是 Looker 内容网址参数，例如 Timeframe=14+day

在此示例中，参数 Timeframe=14+day 设置了信息中心的 Timeframe 过滤器的值。

主题

请参阅主题设置指南，了解如何控制嵌入式内容的外观。

2. 测试嵌入内容网址

在浏览器中打开嵌入内容网址，预览嵌入内容的行为和外观。

3. 创建 iframe

  1. 在宿主应用中创建 iframe 元素。
  2. 将 src 属性设置为您的嵌入内容网址。
  3. 根据需要定义 width、height 和其他属性，以便以最佳方式显示嵌入式 Looker 内容。

4. 考虑用户访问权限问题

用户必须登录 Looker 才能查看嵌入式内容。如果用户未登录，iframe 将显示 401 错误页面。

用户登录选项

用户可以通过以下两种方式之一登录 Looker：

1. 提前登录 Looker

用户必须先在同一浏览器中登录 Looker，然后才能查看嵌入式内容。

2. 启用可选的嵌入式 Looker 登录界面

在嵌入内容网址参数中添加 allow_login_screen=true，以便在用户未登录时在 iframe 中显示 Looker 登录界面。我们的嵌入内容网址示例变为：https://instance_name.looker.com/embed/dashboards/4?Timeframe=14+day&allow_login_screen=true

请注意以下两点：

  • 您必须停用“Looker 登录页面的同源保护”设置，才能在 iframe 嵌入中启用 Looker 登录界面。
  • 如果您的 Looker 实例使用单点登录 (SSO) 通过身份提供方对用户进行身份验证，则身份提供方可能会阻止 iframe 中的登录界面。如果发生这种情况，您需要使用选项 1。

Looker 使用 Cookie 进行用户身份验证和会话存储。如果用户的浏览器访问的 Looker 实例嵌入内容网址的主机名与宿主应用位于不同的网域下，则用户的浏览器必须启用第三方 Cookie。

某些浏览器（例如 Firefox 和 Safari）默认采用会屏蔽第三方 Cookie 的 Cookie 政策。如果用户的浏览器不允许使用第三方 Cookie，您可以向 Looker 实例添加自定义网域，以便您的宿主应用和嵌入内容网址的主机名 Looker 实例位于同一网域下。

5. 与 iframe 互动

开始使用 Looker 嵌入 iframe post 消息传递。

后续步骤

使用我们的 Embed SDK 开始进行签名嵌入，并查看 Looker 嵌入的示例，了解您可以实现哪些功能。