如何将 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 实例，然后才能使用 Embed 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 的嵌入构建器，并将其配置为“build”嵌入 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 上设置框架边框属性。这是在 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 收到的消息称为事件。

接收事件

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

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

下面，我们将调用 on() 方法，在构建 iframe 时针对来自 iframe 的 dashboard:run:complete 事件设置事件监听器。该事件会告诉我们信息中心何时完成加载。查看事件参考，了解要监听的其他事件。

发送操作

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

...  
  .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 发送和接收消息。如需了解详情，请参阅以下资源：