私密嵌入入门

本页面将向您介绍如何设置私密嵌入。私人嵌入选项要求您直接管理 <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. /embed 作为 Looker 内容网址路径的前缀。您的嵌入内容网址路径为 /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. 定义 widthheight 和其他属性,指定如何充分利用您的嵌入式 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 中的消息功能

后续步骤

开始使用我们的 Embed SDK 实现单点登录嵌入,并查看示例,了解 Looker 嵌入有哪些功能。