會員入口網站嵌入
將 SocialHub 會員忠誠度入口網站直接嵌入到您自己的網站中—支援單一登入。已登入的訪客無需再次登入即可在 iframe 中查看他們的積分、優惠券和會員等級。
您的後端會對一個包含使用者信箱位址的短期 JWT（HS256）進行簽名；SDK 會釋放一個 iframe，SocialHub 會驗證該 iframe 並將其橋接到會員會話。會話使用 bearer token（不使用 cookie），因此第三方 cookie 攔截不會影響會話。
工作原理
- 1
註冊嵌入式客戶端
在 SocialHub 中，為您的網站註冊一個用戶端。 SocialHub 鑄造一個公用 client_id 和一個一次性共享金鑰（只顯示一次）。這個秘密只存在於您的後端。
- 2
在您的後端簽署一個短期 JWT。
使用者登入您的網站後，使用共用金鑰對包含使用者信箱位址（iss = client_id）的有效期限≤5分鐘的HS256 JWT進行簽署。此密鑰絕對不能到達瀏覽器。
- 3
將 SDK 腳本拖曳到您的頁面上
新增 <script> 標籤，並將 data-token 設定為 JWT。 SDK 標籤用於建立 iframe、驗證令牌、連接到會員會話，並自動調整 iframe 的大小以適應其內容。
在應用程式中註冊您的客戶
即時互動式嵌入式配置器在 SocialHub 內部運作—您需要登入您的團隊才能使用。它會在此處註冊一個嵌入客戶端，並為您產生簽名代碼段：您的 client_id 和一個一次性共享金鑰。此密鑰僅顯示一次，因此請立即將其儲存在您的後端。此頁面是靜態參考；配置器負責實際設定。
client_id 和金鑰來自哪裡？
SocialHub 透過應用程式內配置器產生兩者。共用金鑰用於簽署您的嵌入式 JWT，並且與您的 REST API 金鑰以及 SocialHub 自身的會話金鑰相互獨立。每個客戶端都有自己的金鑰，因此洩漏僅限於單一網站。
設定 SocialHub 嵌入1. 將 SDK 新增到您的頁面
貼上配置器生成的程式碼片段——它看起來像這樣。可選屬性：data-base-url（預設為 https://flash.socialhub.ai），data-min-height（預設為 600）。
<div id="flash-loyalty"></div>
<script src="https://flash.socialhub.ai/sdk/flash-portal.js"
data-token="<JWT signed by your backend>"
data-target="#flash-loyalty"></script>2. 在後端簽署 JWT
JWT 必須在您的 後端 上簽署 — 共用金鑰絕對不能到達瀏覽器。令牌是短期且一次性的。
import jwt from "jsonwebtoken";
const token = jwt.sign(
{
email: user.email,
name: user.name,
marketing_consent: user.optedInMarketing === true,
},
process.env.FLASH_EMBED_SECRET, // your shared_secret
{ algorithm: "HS256", issuer: "<client_id>", expiresIn: "5m" }
);
// Render `token` into the script tag's data-token, or hand it
// to the browser via your own endpoint.use Firebase\JWT\JWT;
$token = JWT::encode([
"iss" => "<client_id>",
"email" => $user->email,
"name" => $user->name,
"marketing_consent" => false,
"iat" => time(),
"exp" => time() + 300,
], $sharedSecret, "HS256");準備好上線了嗎？
在 SocialHub 配置器中註冊您的嵌入式用戶端並取得您的真實 client_id 和共用金鑰，然後貼上上面產生的程式碼片段。