リソース · 開発者

メンバーポータルの埋め込み

シングルサインオンを使用して、SocialHub ロイヤルティメンバーポータルを独自の Web サイトに直接埋め込みます。ログインした訪問者は、2 回目のログインをしなくても、iframe 内で自分のポイント、クーポン、ティアを確認できます。

バックエンドは、ユーザーのメールアドレスを含む有効期限の短いJWT（HS256）に署名します。SDKはiframeをドロップし、SocialHubはそのiframeを検証してメンバーセッションにブリッジします。セッションはベアラートークンを使用するため（Cookieは使用しません）、サードパーティCookieのブロックによってセッションが中断されることはありません。

SocialHub で埋め込みをセットアップする開発者センター

概要

仕組み

1
埋め込みクライアントを登録する
SocialHub で、サイトのクライアントを登録します。 SocialHub は、パブリック client_id と 1 回限りの共有シークレット (1 回のみ表示) を作成します。秘密はバックエンドにのみ存在します。
2
バックエンドで有効期間の短い JWT に署名する
ユーザーがサイトにログインしたら、ユーザーの電子メール (iss = client_id) を含む共有シークレットを使用して 5 分以内の HS256 JWT に署名します。シークレットはブラウザーに決して到達してはなりません。
3
SDK スクリプトをページにドロップします
data-token が設定された <script> タグを JWT に追加します。 SDK は iframe を構築し、トークンを検証し、メンバーセッションにブリッジし、コンテンツに合わせてフレームのサイズを自動変更します。

アプリにクライアントを登録する

ライブのインタラクティブな埋め込みコンフィギュレーターは SocialHub 内で実行されます。チームにサインインする必要があります。そこで埋め込みクライアントが登録され、署名されたスニペット (client_id とワンタイム共有シークレット) が生成されます。シークレットは 1 回だけ表示されるため、すぐにバックエンドに保存してください。このページは静的参照です。コンフィギュレーターが実際のセットアップを行います。

client_id とシークレットはどこから来たのでしょうか?

アプリ内コンフィギュレーターから - SocialHub が両方を生成します。共有シークレットは埋め込み JWT に署名し、REST API キーや SocialHub 独自のセッションシークレットとは別のものです。各クライアントには独自のシークレットがあるため、リークは 1 つのサイトに隔離されます。

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 は バックエンド で署名する必要があります。共有シークレットがブラウザーに到達してはなりません。トークンの有効期間は短く、使い捨てです。

Node.js

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.

PHP (firebase/php-jwt)

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");

ライブの準備はできましたか?

埋め込みクライアントを登録し、実際の client_id と共有シークレットを SocialHub コンフィギュレーターで取得し、上記の生成されたスニペットを貼り付けます。

SocialHub で埋め込みをセットアップする ↗SoCode の Claude Code REST API 参照 ↗開発者センターに戻る