開始使用私人嵌入功能

本頁將逐步說明如何設定私人嵌入。如要使用私人嵌入選項,您必須直接管理 <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 執行個體的主機名稱
  • 路徑:Looker 內容網址路徑,前置字元為 /embed (查詢資料視覺化需要額外步驟)
  • 參數:指定篩選條件和主題的網址參數

通訊協定一律必須是 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. 嵌入內容網址路徑會附加查詢用戶端 ID /embed/query-visualization/。嵌入內容網址路徑範例:/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 訊息。

後續步驟

使用 Embed SDK 開始進行已簽署的嵌入作業,並查看 Looker 嵌入功能範例。