SocialHub.AI
ลองใช้ CWMนัดชมเดโม
แหล่งข้อมูล · นักพัฒนา

ฝังพอร์ทัลสมาชิก

ฝังพอร์ทัลสมาชิกสมาชิก SocialHub ลงในเว็บไซต์ของคุณเองโดยตรง ด้วยการลงชื่อเพียงครั้งเดียว ผู้เยี่ยมชมที่เข้าสู่ระบบจะเห็นคะแนน คูปอง และระดับของตนภายใน iframe โดยไม่ต้องเข้าสู่ระบบครั้งที่สอง

ระบบแบ็กเอนด์ของคุณจะสร้าง JWT (HS256) ที่มีอายุสั้นซึ่งบรรจุอีเมลของผู้ใช้ SDK จะสร้าง iframe ที่ SocialHub ตรวจสอบและเชื่อมต่อเข้ากับเซสชันของสมาชิก เซสชันใช้โทเค็นแบบ Bearer (ไม่ใช่คุกกี้) ดังนั้นการบล็อกคุกกี้ของบุคคลที่สามจึงไม่ทำให้ระบบเสียหาย

ตั้งค่าการฝังใน SocialHubศูนย์นักพัฒนา
ภาพรวม

วิธีการทำงาน

  1. 1

    ลงทะเบียนไคลเอ็นต์แบบฝัง

    ใน SocialHub ให้ลงทะเบียนลูกค้าสำหรับเว็บไซต์ของคุณ SocialHub สร้าง client_id สาธารณะและความลับที่แชร์เพียงครั้งเดียว (แสดงเพียงครั้งเดียว) ความลับนี้อยู่บนแบ็กเอนด์ของคุณเท่านั้น

  2. 2

    ลงนาม JWT ที่มีอายุสั้นบนแบ็กเอนด์ของคุณ

    หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ไซต์ของคุณ ให้ลงนาม HS256 JWT ความยาว ≤5 นาทีด้วยความลับที่แชร์ โดยถืออีเมลของผู้ใช้ (iss = client_id) ความลับจะต้องไม่เข้าถึงเบราว์เซอร์

  3. 3

    วางสคริปต์ SDK บนเพจของคุณ

    เพิ่มแท็ก <script> โดยตั้งค่า data-token เป็น 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 ต้องได้รับการลงนามบน backend ของคุณ — รหัสลับที่ใช้ร่วมกันต้องไม่ส่งไปถึงเบราว์เซอร์ โทเค็นมีอายุสั้นและใช้ได้เพียงครั้งเดียว

โหนด 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 CodeREST API ข้อมูลอ้างอิง ↗กลับไปที่ศูนย์นักพัฒนา