嵌入 SDK 與建立已簽署嵌入網址端點

Looker 非常適合讓所有使用者或客戶存取資料。正如我們常說的,Looker 有助於「普及資料」。使用者不必請分析師手動建立資訊主頁,就能自行查看查詢結果;有了 Looker,使用者甚至可以自行進行分析。其中一種做法是使用 Looker 的簽署嵌入功能。本頁將討論兩種不同的簽署嵌入實作方法:Looker API 和 Looker 嵌入軟體開發套件 (SDK)。

假設您想將查詢結果整合到貴公司的應用程式或內部系統,但不想為所有使用者提供 Looker 憑證,您可以使用 Looker 的簽署嵌入功能達成此目的。這與 LDAP 或 SAML 等 SSO 工作流程的一般參照不同,後者也可以整合至 Looker 執行個體。

已登入已簽署嵌入表示建立嵌入網址並從瀏覽器傳送要求後,使用者的 Looker 工作階段已啟動,且使用者已登入。這些網址已簽署,只能使用一次。這些網址會建立 iframe,讓開發人員將探索、Look 和資訊主頁等內容嵌入貴公司的網站或應用程式。使用網址時,如果使用者沒有現有帳戶,系統會根據傳遞至網址的參數為他們建立帳戶。

開發人員可以運用 Looker API 或 Looker API SDK,動態建立這些 iframe。您可以套用主題並自訂內容,以符合貴公司或特定使用者群組的需求。如要進一步瞭解在內容中嵌入 Looker 的潛力,請參閱完整示範,並瞭解如何套用這些概念。

如何開始使用?

假設您已觀看示範,並想瞭解如何將這些 iframe 新增至應用程式,您應該從何處著手,以及哪種方法適合您的用途?

Looker 提供多個主要選項,可產生這類內容並放在應用程式或網站中:

  • Looker 的範例存放區,內含以各種程式語言 (C#、Python、Node.js、Python、Ruby、PHP) 編寫的指令碼
  • REST API 隨附的 Create Signed Embed Url 端點,可透過 HTTP 要求或其中一個 SDK 存取
  • Looker 的 Embed SDK

一般來說,我們建議客戶使用 Embed SDK 和 REST API 端點,而不是範例指令碼,因為開發人員會經常更新 SDK 和 REST API,而且與指令碼相比,這兩者通常會建立較短的網址。(網址越短越容易管理)。此外,Embed SDK 和 REST API 端點也提供一些實用的安全性功能,詳情請參閱本頁後續內容。

假設我們希望應用程式使用者能在客戶應用程式的資料頁面中,查看 Looker 的資訊主頁。常見的嵌入工作流程可能如下所示:

  1. 使用者登入應用程式。他們可以使用 SAML 服務,或直接透過電子郵件和密碼登入應用程式。
  2. 應用程式會確認憑證是否正確,使用者即可順利存取內容。
  3. 根據登入工作流程的回應,系統會將使用者資訊傳遞至函式,該函式可能會使用其中一個範例指令碼建立已簽署的嵌入網址。這些指令碼需要使用者權限、群組 ID、嵌入密鑰、主機網址、使用者屬性 (例如名字和姓氏)、存取篩選器、工作階段長度,以及我們希望使用者能夠存取的網址。所有這些資訊都會傳送至 Looker,並建立已簽署的網址。
  4. 使用者前往應用程式中的資料頁面,該頁面會將已簽署網址放在 iframe 中;接著,瀏覽器會對 iframe 網址發出要求。資訊主頁會提供個人化體驗,使用者可以在應用程式中存取 Looker 資料。

Create Signed Embed Url 端點

開發人員可以使用 Looker 的 REST API 或其中一個 SDK,根據一組參數產生已編碼的簽署網址。這是 POST 要求。API 要求來源伺服器必須能夠透過管理員權限驗證 Looker。使用這個端點的主要優點之一,就是不需要嵌入密鑰;端點已設定為擷取目前的嵌入密鑰。此外,呼叫這個端點也不會計入 API 頻率限制。一般來說,與嵌入密鑰相比,API 憑證更容易輪替。您可以同時啟用多個 API 3 憑證,但一個執行個體一次只能使用一個嵌入密碼。這樣一來,您就能更輕鬆地替換憑證,而不會中斷服務。與簽署的嵌入網址指令碼範例存放區中的範例指令碼相比,Create Signed Embed Url 端點也會建立更短、更簡潔的網址。

以下是使用 Create Signed Embed Url 端點的工作流程範例:

  1. 使用者嘗試登入應用程式,通常是透過使用者名稱和密碼組合,也可能透過身分識別提供者 (IdP)。
  2. 如果使用者成功登入應用程式,系統會執行 Create Signed Embed Url 端點。開發團隊建立的函式會將該使用者的特定憑證傳遞至這個端點,而 Looker 會將簽署的網址傳回伺服器。
  3. 使用者或許可以點選應用程式中的資料分頁標籤。當使用者前往資料分頁時,這個頁面會向伺服器要求已簽署的網址,並將該網址放在頁面的 iframe 中。
  4. 使用者會看到 Looker 資訊主頁,該資訊主頁已無縫 iframe 嵌入應用程式,並顯示即時資料。

嵌入 SDK

Looker 的 Embed SDK 是一組 JavaScript 函式,經過封裝後,開發人員可以更輕鬆地嵌入 Looker 內容。您可以使用 Embed SDK,將 Looker 內容新增至應用程式或網站的網頁,不必建立特定的 HTML 元素。開發人員可透過 SDK 在 HTML 網頁和 Looker 內容之間建立安全的點對點通訊。嵌入 SDK 現在會封裝 iframe,因此客戶不必建立或管理 iframe。嵌入 SDK 僅適用於瀏覽器應用程式,但包含用來產生已簽署網址的輔助公用程式函式。TypeScript 和 Python 都提供這兩種方法。雖然 Embed SDK 位於 nmpjs 登錄檔,但您不必使用 Node.js 網路伺服器。

Embed SDK 的獨特功能之一,就是可讓您運用 Looker 元件,這是一組可重複使用的程式碼區塊,旨在協助實作 Looker 的設計系統。

Embed SDK 的另一項優點是內建許多函式,可大幅減少開發團隊的工作量。其中一個主要例子是取消點擊。Embed SDK 使用 MessageChannel API,而非 postMessage。也就是說,在同一網頁上執行的兩個指令碼可以使用 postMessage API 相互通訊。這可讓其他函式與 iframe 通訊,或讓其他函式與 iframe 通訊

Embed SDK 的工作流程範例如下:

  1. 使用者嘗試登入您的應用程式。
  2. 如果登入成功,系統會將資訊傳送至執行應用程式的伺服器上 Node.js 輔助公用程式。這會將必要資訊傳遞至 Looker 執行個體,並傳回已簽署的網址。
  3. 使用者在應用程式中前往資料頁面,並使用 Embed SDK 放置 iframe。由於 Embed SDK 是以 JavaScript 編寫,因此我們可以運用 LookerEmbedSDK.createDashboardWithId,並指定網頁上的特定 DOM 元素 (通常是 span 或 div),將 iframe (已簽署的網址) 附加至該元素。
  4. 頁面載入後,簽署的網址會從 Looker 執行個體載入資訊主頁。

那麼,哪種方法最好?

開發團隊會使用哪種方法,取決於您的特定用途:

維恩圖:醒目顯示「建立已簽署的嵌入網址」和「Embed SDK」方法之間的相似與差異處。

如上圖所示,Create Signed Embed Url 端點方法和先前說明的 Embed SDK 方法,都能讓開發團隊專注於產品,而非 Looker 與應用程式的整合方式。這兩種方法也能在原生應用程式中提供豐富的資料體驗。

Create Signed Embed Url 端點方法與 Embed SDK 方法的差異如下:

  • 不需要嵌入密鑰。
  • 這項程序與使用其他 REST API 類似。
  • 這個端點必須在伺服器端呼叫。

Embed SDK 方法具有下列功能:

  • 這項功能以 JavaScript 為基礎,可指定特定 DOM 元素。
  • 與 Looker 元件互動,協助設定 UI 樣式。
  • 這項功能會與輔助公用程式函式整合,且開發作業可在用戶端完成。

如對開發或架構需求有具體疑問,請與 Looker 的專業服務團隊或其中一位開發合作夥伴聯絡。

此外,支援團隊也能協助您解決任何高階問題或非預期行為。如要提出支援要求,請前往 Looker 的說明中心,然後按一下「與我們聯絡」

如需其他資源,請參閱「已簽署的嵌入工具和疑難排解資源」社群貼文。