会员门户嵌入
将 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 和共享密钥，然后粘贴上面生成的代码片段。