회원 포털 삽입
SocialHub 로열티 회원 포털을 웹사이트에 직접 통합하세요. 단일 로그인으로 간편하게 이용할 수 있습니다. 로그인한 방문자는 별도의 로그인 없이 iframe 내에서 포인트, 쿠폰, 등급을 확인할 수 있습니다.
백엔드에서 사용자의 이메일 주소를 담은 단기 JWT(HS256)에 서명하면, SDK가 SocialHub에서 검증하고 회원 세션에 연결하는 iframe을 드롭합니다. 세션은 베어러 토큰(쿠키 없음)을 사용하므로, 타사 쿠키 차단 정책의 영향을 받지 않습니다.
작동 방식
- 1
임베디드 클라이언트를 등록하세요
SocialHub에서 귀하의 사이트에 대한 클라이언트를 등록하십시오. SocialHub는 공개 client_id와 일회성 공유 비밀(한 번만 표시됨)을 생성합니다. 비밀은 백엔드에만 있습니다.
- 2
백엔드에서 단기 JWT에 서명하세요.
사용자가 사이트에 로그인하면 사용자의 이메일 주소(iss = client_id)가 포함된 공유 비밀 키로 5분 이내의 HS256 JWT를 생성하세요. 비밀 키는 브라우저에 절대 노출되어서는 안 됩니다.
- 3
페이지에 SDK 스크립트를 삭제하세요.
<script> 태그를 추가하고 데이터 토큰을 JWT로 설정하세요. SDK 태그는 iframe을 생성하고, 토큰을 검증하고, 회원 세션에 연결하고, 프레임 크기를 콘텐츠에 맞게 자동으로 조정합니다.
앱에 고객을 등록하세요
실시간 대화형 임베드 구성 도구는 SocialHub 내에서 실행되므로 팀에 로그인해야 합니다. 여기서 임베드 클라이언트를 등록하고 서명된 스니펫(client_id 및 일회용 공유 비밀 키)을 생성합니다. 비밀 키는 한 번만 표시되므로 백엔드에 즉시 저장해야 합니다. 이 페이지는 정적 참조 페이지이며, 실제 설정은 구성 도구에서 수행합니다.
client_id와 secret은 어디에서 가져오나요?
앱 내 설정 도구에서 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 및 공유 비밀 키를 가져온 다음 위에 생성된 코드 조각을 붙여넣으세요.