SocialHub.AI
Sumber · Pembangun

Benamkan Portal Ahli

Benamkan portal ahli kesetiaan SocialHub terus ke laman web anda sendiri — dengan daftar masuk tunggal. Pelawat yang log masuk melihat mata, kupon dan peringkat mereka di dalam iframe, tanpa log masuk kedua.

Bahagian belakang anda menandatangani JWT jangka pendek (HS256) yang membawa e-mel pengguna; SDK menjatuhkan iframe yang disahkan oleh SocialHub dan menghubungkan ke sesi ahli. Sesi menggunakan token pembawa (tiada kuki), jadi penyekatan kuki pihak ketiga tidak akan merosakkannya.

Gambaran Keseluruhan

Cara ia berfungsi

  1. 1

    Daftar klien benam

    Dalam SocialHub, daftarkan pelanggan untuk laman web anda. SocialHub mencipta akaun awam client_id dan rahsia kongsi sekali sahaja (ditunjukkan sekali sahaja). Rahsia itu hanya terdapat di bahagian belakang anda.

  2. 2

    Tandatangani JWT jangka pendek pada bahagian belakang anda

    Selepas pengguna log masuk ke tapak anda, tandatangani JWT HS256 ≤5 minit dengan rahsia kongsi, yang mengandungi e-mel pengguna (iss = client_id). Rahsia itu tidak boleh sampai ke pelayar.

  3. 3

    Buang skrip SDK pada halaman anda

    Tambah tag <script> dengan token data yang ditetapkan pada JWT. SDK membina iframe, mengesahkan token, menghubungkan ke sesi ahli dan mengubah saiz bingkai secara automatik kepada kandungannya.

Daftarkan pelanggan anda dalam aplikasi

Konfigurator benam interaktif langsung berjalan di dalam SocialHub — ia memerlukan anda log masuk ke pasukan anda. Di sana ia mendaftarkan klien benam dan menjana coretan yang ditandatangani untuk anda: client_id anda dan rahsia kongsi sekali sahaja. Rahsia dipaparkan hanya sekali, jadi simpannya di bahagian belakang anda dengan segera. Halaman ini ialah rujukan statik; pengkonfigurasi melakukan persediaan sebenar.

Dari manakah datangnya client_id dan rahsia itu?

Daripada konfigurasi dalam aplikasi — SocialHub menjana kedua-duanya. Rahsia kongsian menandatangani JWT benam anda dan berasingan daripada kunci REST API anda dan daripada rahsia sesi SocialHub sendiri. Setiap pelanggan mempunyai rahsianya sendiri, jadi kebocoran diasingkan ke satu tapak.

Sediakan benam dalam SocialHub

1. Lepaskan SDK pada halaman anda

Tampal coretan yang dijana oleh pengkonfigurasi — ia kelihatan seperti ini. Atribut pilihan: data-base-url (lalai https://flash.socialhub.ai), data-min-height (lalai 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. Tandatangani JWT pada bahagian belakang anda

JWT mesti ditandatangani pada bahagian belakang anda — rahsia yang dikongsi tidak boleh sampai ke pelayar. Token adalah jangka hayat yang singkat dan hanya untuk sekali guna.

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

Bersedia untuk disiarkan secara langsung?

Daftarkan klien benam anda dan dapatkan client_id dan rahsia kongsi sebenar anda dalam konfigurasi SocialHub, kemudian tampal coretan yang dijana di atas.