SocialHub.AI
جرّب CWMاحجز عرضًا توضيحيًا
الموارد · المطورون

تضمين بوابة الأعضاء

قم بتضمين بوابة أعضاء برنامج الولاء SocialHub مباشرةً في موقعك الإلكتروني - مع تسجيل دخول موحد. يرى الزوار المسجلون نقاطهم وقسائمهم ومستوى عضويتهم داخل إطار iframe، دون الحاجة إلى تسجيل دخول ثانٍ.

يقوم خادمك الخلفي بتوقيع رمز JWT قصير الأجل (HS256) يحمل بريد المستخدم الإلكتروني؛ ثم يقوم SDK بإنشاء إطار iframe يتحقق منه SocialHub ويربطه بجلسة العضو. تستخدم الجلسات رمزًا مميزًا (بدون ملفات تعريف ارتباط)، لذا فإن حظر ملفات تعريف الارتباط من جهات خارجية لا يؤثر عليها.

إعداد التضمين في SocialHubمركز المطورين
نظرة عامة

كيف يعمل

  1. 1

    تسجيل عميل تضمين

    في SocialHub، قم بتسجيل عميل لموقعك. يقوم SocialHub بإنشاء حساب عام client_id وسرٌّ يُشارك لمرة واحدة (يُعرض مرة واحدة فقط). يبقى السرّ محفوظاً في نظامك الخلفي فقط.

  2. 2

    وقّع رمز JWT قصير الأجل على لوحة التحكم الخاصة بك.

    بعد تسجيل دخول المستخدم إلى موقعك، قم بتوقيع رمز JWT HS256 لمدة لا تتجاوز 5 دقائق باستخدام السر المشترك، والذي يحمل بريد المستخدم الإلكتروني (iss = client_id). يجب ألا يصل السر إلى المتصفح مطلقًا.

  3. 3

    أضف سكربت SDK إلى صفحتك

    أضف الوسم <script> مع ضبط رمز البيانات على JWT. يقوم الوسم SDK بإنشاء الإطار المضمن (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 على خادمك backend - يجب ألا يصل السر المشترك إلى المتصفح أبدًا. الرموز قصيرة الأجل وتُستخدم لمرة واحدة فقط.

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 CodeREST API المرجع ↗العودة إلى مركز المطورين