本頁將逐步說明如何設定私人嵌入功能。私人嵌入選項需要直接管理 <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 內容網址。
上方程式碼範例中的內嵌內容網址如下所示:
嵌入內容網址包含三個部分:
- 主機名稱:Looker 執行個體的主機名稱
- 路徑:Looker 內容網址路徑前置
/embed
(針對查詢圖表有額外步驟) - 參數:指定篩選器和主題設定的網址參數
通訊協定一律必須是 https://
。讓我們詳細建立每個部分。
第 1 部分:主機名稱
- 前往 Looker 內容。以下是 Looker 內容網址範例:
https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
。 - 嵌入內容網址主機名稱為
instance.looker.com
。
第 2 部分:路徑
嵌入內容網址路徑取決於您嵌入的 Looker 內容。
嵌入所有 Looker 內容 (查詢視覺化內容除外)
- 前往 Looker 內容。以下是 Looker 內容網址範例:
https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
- 找出 Looker 內容網址的路徑:
/dashboards/4
。 - 將
/embed
前置於 Looker 內容網址的路徑中。嵌入內容網址的路徑為/embed/dashboards/4
。
嵌入查詢圖表
- 前往查詢視覺化資料。網址範例:
instance.looker.com/explore/my_model/my_explore?qid=1234567890abcdefghij12
- 找出查詢用戶端 ID。
qid
參數:1234567890abcdefghij12
是查詢的用戶端 ID,代表查詢和圖表設定。 - 您的嵌入內容網址路徑會附加查詢用戶端 ID
/embed/query-visualization/
。嵌入內容網址的路徑範例為/embed/query-visualization/1234567890abcdefghij12
第 3 部分:參數
嵌入內容網址參數可控制嵌入內容的篩選器和主題設定。
篩選器
- 前往 Looker 內容網址。
- 手動調整內容的篩選器,以符合需求。在本例中,產生的 Looker 內容網址為:
https://instance.looker.com/dashboards/4?Timeframe=14+day
- 嵌入內容網址參數是 Looker 內容網址參數,例如
Timeframe=14+day
在這個範例中,參數 Timeframe=14+day
會設定資訊主頁的 Timeframe
篩選器值。
主題設定
請參閱主題設定指南,瞭解如何控管嵌入內容的外觀。
2. 測試嵌入內容網址
在瀏覽器中開啟內嵌內容網址,預覽內嵌內容的行為和外觀。
3. 建立 iframe
- 在主機應用程式中建立 iframe 元素。
- 將
src
屬性設為嵌入內容網址。 - 定義
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。
使用者瀏覽器 Cookie 政策
Looker 會使用 Cookie 進行使用者驗證和工作階段儲存。如果使用者存取的 Looker 執行個體嵌入內容網址主機名稱位於主機應用程式的不同網域,則使用者的瀏覽器必須啟用第三方 Cookie。
有些瀏覽器 (例如 Firefox 和 Safari) 預設採用 Cookie 政策,禁止使用第三方 Cookie。如果使用者的瀏覽器無法允許第三方 Cookie,您可以在 Looker 執行個體中新增自訂網域,讓主機應用程式和嵌入內容網址的主機名稱 Looker 執行個體位於相同網域下。
5. 與 iframe 互動
後續步驟
開始使用我們的 Embed SDK 進行已簽署的嵌入,並查看範例,瞭解如何使用 Looker 嵌入功能。