跳到主要內容 跳至補充內容

遷移 Mashup

並非所有 Mashup 都以相同方式實施。將下列內容視為指南,其中概述了一些涉及 Mashup 遷移流程的考慮事項。確認您在嘗試遷移 Mashup 之前已完成下列事項:

  • 您已部署並設定 Qlik Cloud 租用戶。

  • 使用者可以透過 IdP 驗證,且必要的應用程式已遷移至適當的共用或受管理空間,使用者在此至少擁有「可以檢視」權限。如需關於空間權限的資訊,請參閱在共用空間中管理權限在受管理空間中管理權限

  • 以租用戶管理員角色存取租用戶 (需要建立網頁整合)。

您也應熟悉通常如何使用 JavaScript 和 HTML 實施 Qlik Sense Mashup,是僅搭配 IFrames 的內嵌物件或搭配 Qlik 功能 API。

更清楚來說,新的 Mashup 將參與 Qlik Cloud 中的內容,而舊的 Mashup 將參考 Qlik Sense 用戶端管理 中現有的 Mashup。

網頁整合

Qlik Cloud 中新的 Mashup 將會載入並從 Qlik Cloud 租用戶而非 Qlik Sense 用戶端管理 內嵌內容。您必須設定 Qlik Cloud 中的網頁整合,以便可以識別 Mashup 網站 (原始)。

網頁整合是安全性機制,允許網站 (這些網站呈現與 URL 包含清單相關聯的有效 ID) 轉譯內嵌視覺化。與 Qlik Cloud 互動的任何網頁應用程式需要在租用戶中設定網頁整合。

Qlik Cloud 中建立網頁整合

您必須是 Qlik Cloud 中的租用戶管理員才能建立網頁整合。

請執行下列動作:

  1. 管理主控台 中,前往網頁區段並按一下右上角的新建
  2. 在對話方塊中,為網頁整合命名。

  3. 以下列格式輸入來源位址:https://domain.com。然後按一下新增以將來源新增至允許清單。

    資訊備註您可以新增多個來源。
  4. 按一下建立
建立網頁整合

建立網頁整合後,將會向您提供 ID。此為 Mashup 的 qlik 網頁整合 ID,這是新 Mashup 代碼中的必需屬性或參數。

網頁整合 ID

網頁整合 ID 範例

如需更多關於建立網頁整合的資訊,請參閱管理網頁整合

驗證

Qlik Sense 用戶端管理 中的 Mashup 通常透過虛擬 Proxy 處理驗證,可在此預先設定驗證機制。選項包括標頭、工單、SAML、JWT、OpenID Connect (OIDC) 和匿名等。如需更多資訊,請參閱驗證解決方案 (僅提供英文版)

Qlik Sense 用戶端管理 舊的 Mashup 中,通常會在任何資源之前以代碼處理驗證,包括必要的靜態 Qlik 檔案和物件庫,會透過此虛擬 Proxy 載入。

舉例來說,

  • 透過工單和 JWT,通常會呼叫後端驗證模組,以安全地建立 Qlik 工單或 JWT Token。

  • 透過標頭,有些基礎模組或反向 Proxy 會設定適當的標頭。

  • 對於 OIDC 和 SAML,必須初始重新導向至對應的識別提供者,這會觸發驗證流量,最終透過 Qlik Sense 初始化工作階段,以便載入資源並開始內嵌內容。

Qlik Cloud 不使用虛擬 Proxy。這改用在租用戶中建立的網頁整合。對於驗證,有下列兩個機制可用: 

  • 互動式登入—此機制依賴租用戶對一般存取使用的已設定 IdP。依照預設,此為 Qlik Account IdP,或任何可用選項,例如 Okta、Auth0、ADFS、AzureAD、Salesforce、Generic 和 Keycloak。

  • JSON Web Tokens (JWT)—此驗證機制依賴簽署的 JWT Token,這通常透過後端服務安全地產生。在此情況下,JWT 類型的租用戶中應有已設定的識別提供者。

以功能 API 內嵌 Qlik 物件的 Mashup

使用互動式登入的驗證

HTML 潛在代碼更新

如同使用 Qlik Sense 用戶端管理 Mashup,您必須以 html 在 <head> 區段中載入兩個 Qlik 靜態檔案 (qlik-styles.cssrequire.js)。不過,透過 Qlik Cloud,可直接存取這些檔案,不需要驗證。

HTML 潛在代碼更新

JavaScript 潛在代碼更新

Qlik Sense 用戶端管理 Mashup 正在使用功能 API,以內嵌並與 Qlik Sense 用戶端管理 上的物件互動,請檢閱下列代碼,這在此範例中會使用功能 API Qlik 物件庫內嵌數個視覺化。

JavaScript 潛在代碼更新

require 的設定變數和 baseUrl

透過新的 Qlik Cloud Mashup,設定變數必須反映租用戶主機webIntegrationId。此外,由於沒有虛擬 Proxy,前置詞應僅為 /。您可以設定識別屬性,以免共用工作階段,僅用於此 Mashup 的內容。連接埠必須為 443,這暗示 isSecure 永遠為真。

require 設定應包含 webIntegrationId,而 baseUrl 比較簡單,因為與 Qlik Cloud 的通訊永遠在連接埠 443 經過 https 進行。

require 的設定變數和 baseURL

載入功能 API

透過 require (js/qlik) 載入 Qlik 功能 API 物件庫之前,檢查使用者是否已登入。例如,這可以觸發目前使用者中繼資料端點的 REST API 呼叫來進行。若回應狀態不是 200,代碼必須重新導向至登入畫面,在 URL: returnto (實際 Mashup URL) 和 qlik-web-integration-id 中插入兩個參數。

代碼執行如下:

  • 透過對 /api/v1/users/me REST API 端點的 GET 請求檢查使用者是否已登入。

    • 若為負值 (回應狀態不是 200),重新導向至登入畫面/登入並新增返回和 qlik-web-integration-id 參數。

    • 若為正值 (回應狀態是 200),則透過 require 載入 qlik/js 功能 API 物件庫並繼續使用這組 API。

最終代碼可能看起來像以下範例。透過 JavaScript,沒有寫入完美代碼的唯一方式,因此這只是一種有效代碼選項。

使用 JSON Web Token (JWT) 進行驗證

設定 JWT 識別提供者

JWT Token 是某些裝載使用者中繼資料 (例如名稱、電子郵件、群組、主旨) 的加密結果,這透過憑證私人金鑰安全地簽署。具有相關憑證公用金鑰的任何人都可以驗證 Token 並讀取其中的使用者資訊。

對於 Qlik Cloud,若要驗證已簽署的 JWT Token,您必須在 JWT 類型的 Qlik Cloud 租用戶中設定識別提供者。設定後,租用戶可以接受並驗證包含正確簽署持有人 JWT Token 的 API 請求。

  1. 在管理主控台,從設定區段選取識別提供者以建立新的識別提供者。

    以 JWT 類型建立識別提供者設定

  2. 在以上的憑證方塊中以 PEM 格式貼上憑證公用金鑰

  3. 您也可以指定簽發者金鑰 ID,在各個方式下,都會在建立後向您提供這些值。

    識別提供者設定的簽發者和金鑰 ID

已簽署的 JWT Token 後端服務潛在代碼更新

透過 Qlik Sense 用戶端管理,要產生所需 JWT Token 的裝載僅宣告使用者 ID 和使用者目錄,如 Qlik Sense 中的虛擬 Proxy 對 JWT 驗證的要求。透過 Qlik Cloud,此裝載需要更多不同的宣告屬性。

您將必須調整裝載的 JWT Token 產生後端服務代碼,以及必要的簽署選項,以反映 Qlik Cloud 需要的內容。例如,JWT 識別提供者的簽發者和金鑰 ID 是必要簽署選項。請參閱 Qlik Sense 驗證的 JWT 格式瞭解完整說明。

HTML 潛在代碼更新

如同使用 Qlik Sense 用戶端管理 Mashup,您必須以 html 在 <head> 區段中載入兩個 Qlik 靜態檔案 (qlik-styles.cssrequire.js)。不過,透過 Qlik Cloud,可直接存取這些檔案,不需要驗證。

JavaScript 潛在代碼更新

代碼概念類似於使用互動式登入。不過,在此情況下,不會重新導向至一般登入畫面,您必須對 /login/jwt-session 端點透過 POST 請求初始化 JWT 工作階段,傳遞持有人 JWT Token 的標頭和網頁整合 ID。

  • 透過對 /api/v1/users/me REST API 端點的請求檢查使用者是否已登入。

    • 若為正值 (回應狀態是 200),則透過 require 載入並使用 qlik/js 功能 API 物件庫。

    • 若為負值 (回應狀態不是 200),則觸發 POST 請求以透過給定的簽署 JWT Token 初始化 JWT 工作階段。

      • 若為正值,則透過 require 載入並使用 qlik/js 功能 API 物件庫。

      • 若為負值,可能是因為 JWT 無效、過期或不被接受而讓 JWT 驗證失敗。

以下是上述流程的代碼範例。

Qlik Cloud 中的功能 API 和相容性

雖然使用網頁應用程式的功能 API 時,Qlik CloudQlik Sense 用戶端管理 之間有幾乎完全的相容性,但若您對具有 Qlik Cloud 部署的網站使用此 JavaScript 物件庫,則有幾個細微差異或不可用的方法。例如,全域 API 不可用於 Qlik Cloud

以 IFrames 內嵌 Qlik 物件的 Mashup

除了按 以功能 API 內嵌 Qlik 物件的 Mashup 中的描述處理驗證,您也必須熟悉 Qlik Cloud 如何處理內容安全性政策 (CSP)。

內容安全性政策

Qlik Cloud 中的 CSP 政策會從其他網域封鎖對 Qlik 物件的存取權限。這表示,使用單一 API IFrame 方法內嵌 Qlik 物件時,您將會取得 frame-ancestors ‘self’ 政策錯誤。

政策錯誤: frame-ancestors 'self'

請參閱內容安全性政策以瞭解如何設定 CSP,讓 Mashup 可以使用 IFrames 內嵌 Qlik Cloud 物件。

使用 enigma.js 的 Mashup

enigma.js 物件庫可協助您在 JavaScript 環境中與 Qlik 關聯引擎 通訊。

獨立於所需的網頁整合和使用者驗證處理,您也必須在 Qlik 使用 enigma.js 時考慮跨網站偽造要求 (CSRF) 概念。

跨網站偽造要求 (CSRF)

Qlik Cloud 有對策來防禦跨網站偽造要求 (CSRF)。任何與 Qlik Cloud 互動的網頁解決方案必須在所有非 GET REST 呼叫提供有效的 CSRF Token,包括 WebSocket 連線。

在網頁應用程式中使用 enigma.js 時,無論是後端或前端代碼,都會建立 WebSocket 連線。這表示,需要為 enigma.js 物件庫納入 CRSF Token 作為 WebSocket 連線的參數,以透過 Qlik Cloud 開啟安全工作階段。

使用者登入後,可以對 /api/v1/csrf-token 端點請求有效的 CSRF Token。

以下 enigma.js 的代碼範例 (有已登入的使用者) 用於前端代碼,以開啟應用程式並擷取版面配置。

若要查看完整代碼範例,檢閱下列教學課程:

Visit the discussion forum at community.qlik.com

此頁面是否對您有幫助?

若您發現此頁面或其內容有任何問題——錯字、遺漏步驟或技術錯誤——請告知我們可以如何改善!