如何将 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 的嵌入构建器，以便“构建”嵌入式 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()

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

4. 发送和接收嵌入消息

现在，我们来看看如何使用嵌入 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. 其他信息

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