開始使用私人嵌入功能

本頁將逐步說明如何設定私人嵌入功能。私人嵌入選項需要直接管理 <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. /embed 前置於 Looker 內容網址的路徑中。嵌入內容網址的路徑為 /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. 定義 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 嵌入功能。