如何将 Looker 与 Embed SDK 嵌入

1. 准备工作

在此 Codelab 中，我们将使用 Looker Embed SDK 将 Looker 信息中心嵌入网页。您将调用一系列 SDK 方法，这些方法会自动创建 iframe、将 Looker 内容嵌入其中，并设置 iframe 与网页之间的通信。

前提条件

  • 拥有正在运行的 Looker 实例
  • 拥有想要嵌入到 Web 应用或网页中的 Looker 信息中心
  • 熟悉 JavaScript 和 JavaScript promise。

学习内容

  • 如何使用 Embed SDK 私密地嵌入 Looker 内容
  • 如何使用 Embed SDK 通过嵌入式 Looker 内容发送和接收消息（操作和事件）

所需条件

  • 对前端代码的 HTML 和 JavaScript 的访问权限
  • 对 Looker 实例中的管理员嵌入设置的访问权限

2. 准备工作

您需要先准备好 HTML 和 Looker 实例，然后才能使用嵌入 SDK 进行嵌入。

添加嵌入 iframe 的容器元素

在网页的 HTML 中，创建一个 div 元素，并在其中定义一个 id 属性。

<div id="looker-embed" />

将嵌入内容的网域列入 Looker 实例的许可名单

您需要在 Looker 实例中将嵌入内容的网域列入许可名单。

确定托管嵌入式 Looker 内容的网页的网域。假设网页的网址为 https://mywebsite.com/with/embed，则网页的网域为 https://mywebsite.com。

前往 Looker 实例的管理部分中的嵌入页面。https://your_instance.looker.com/admin/embed

在嵌入式网域许可名单字段中，输入嵌入式网域。输入完毕后，按 Tab 键，使网域显示在方框中。请勿添加尾部斜杠 /。

选择更新按钮。

3. 构建嵌入

现在，我们来创建并配置 SDK 的嵌入构建器，以“构建”嵌入式 Looker 内容。

初始化 SDK

首先，导入 SDK，然后使用 Looker 实例的网域初始化 SDK。

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

创建嵌入构建器

接下来，确定要嵌入的 Looker 信息中心的 ID。如果您的信息中心位于 instance_name.looker.com/dashboard/12345，则信息中心的 ID 为 12345。

使用信息中心 ID 调用 SDK createDashboardWithId() 方法以创建嵌入构建器。此方法将返回嵌入构建器。

LookerEmbedSDK.createDashboardWithId(12345)

配置并构建嵌入构建器

现在，我们来配置嵌入构建器，然后再让它构建嵌入式 iframe。将以下代码示例直接添加到上一个代码示例的 createDashboardWithId() 方法调用之后。

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

嵌入构建器的每种方法都会返回嵌入构建器本身，因此我们将方法调用链接在一起。我们来了解一下每种方法：

  1. appendTo() 方法用于确定 iframe 的父元素。我们传入了之前在准备步骤中定义的 HTML 元素的 ID。
  2. withFrameBorder() 方法用于在 iframe 上设置 frame-border 属性。这是在 iframe 上定义 HTML 属性的多种方法之一。
  3. build() 方法会创建具有已配置 HTML 属性的 iframe

最终检查

完成上述步骤后，您的代码应如下所示：

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

现在，您已使用 Embed SDK 将 Looker 信息中心嵌入到网页中！

4. 发送和接收嵌入消息

现在，我们来看看如何使用 Embed SDK 通过嵌入式 Looker 内容收发消息。我们将应用发送到 iframe 的消息称为操作，将应用从 iframe 接收的消息称为事件。

接收事件

我们来使用之前的代码。为了监听事件，我们在调用 build() 方法之前调用嵌入构建器的 on() 方法。

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

在此示例中，我们调用 on() 方法，以便在构建 iframe 时为来自 iframe 的 dashboard:run:complete 事件设置事件监听器。该事件会告知我们信息中心何时完成加载。查看事件参考，了解要监听的其他事件。

发送操作

我们继续使用之前的代码。如需向 iframe 发送操作，我们会在调用 build() 方法以初始化与 iframe 的消息发送和接收后，调用嵌入构建器的 connect() 方法。

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

我们来了解一下此代码示例：

  1. 我们调用 connect() 方法，该方法会返回一个 promise。在消息发送和接收机制初始化后，相应 promise 会解析为表示嵌入式 iframe 的嵌入对象。
  2. 我们对嵌入对象调用 send() 方法来发送 dashboard:run 操作。如需了解要发送的其他操作，请参阅操作参考。
  3. 我们添加了一个 catch() 方法，以防在初始化期间出现任何错误。

最终检查

完成上述步骤后，您的代码现在应如下所示：

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

您现在可以与嵌入式 Looker 信息中心进行对话了！

5. 其他信息

恭喜！您现在可以使用 Embed SDK 私密地嵌入 Looker 信息中心，并从 iframe 发送和接收消息。如需了解详情，请参阅以下资源：