Mitgliederportal einbetten
Binden Sie das SocialHub-Treueportal direkt in Ihre Website ein – mit Single Sign-On. Eingeloggte Besucher sehen ihre Punkte, Coupons und ihren Status in einem iFrame, ohne sich erneut anmelden zu müssen.
Ihr Backend signiert ein kurzlebiges JWT (HS256), das die E-Mail-Adresse des Nutzers enthält; der SDK fügt einen iFrame ein, der von SocialHub verifiziert und mit einer Mitgliedssitzung verknüpft wird. Sitzungen verwenden ein Bearer-Token (keine Cookies), daher beeinträchtigt das Blockieren von Drittanbieter-Cookies die Funktionalität nicht.
So funktioniert es
- 1
Eingebetteten Client registrieren
Registrieren Sie in SocialHub einen Kunden für Ihre Website. SocialHub prägt eine öffentliche client_id und ein einmaliges gemeinsames Geheimnis (wird nur einmal angezeigt). Das Geheimnis lebt nur in Ihrem Backend.
- 2
Signieren Sie ein kurzlebiges JWT in Ihrem Backend.
Nachdem sich ein Benutzer auf Ihrer Website angemeldet hat, signieren Sie ein maximal 5 Minuten gültiges HS256-JWT mit dem gemeinsamen Geheimnis, das die E-Mail-Adresse des Benutzers enthält (iss = client_id). Das Geheimnis darf niemals in den Browser gelangen.
- 3
Legen Sie das SDK-Skript auf Ihrer Seite ab
Fügen Sie das Tag <script> mit dem auf das JWT gesetzten Datentoken hinzu. Das Tag SDK erstellt den iFrame, verifiziert das Token, stellt eine Verbindung zu einer Mitgliedssitzung her und passt die Größe des Frames automatisch an den Inhalt an.
Registrieren Sie Ihren Kunden in der App.
Der interaktive Live-Konfigurator für eingebettete Inhalte läuft in SocialHub – Sie müssen in Ihrem Team angemeldet sein. Dort registriert es einen eingebetteten Client und generiert den signierten Code-Ausschnitt: Ihre client_id und ein einmalig gültiges, gemeinsames Geheimnis. Das Geheimnis wird nur einmal angezeigt, speichern Sie es daher sofort in Ihrem Backend. Diese Seite dient als statische Referenz; die eigentliche Einrichtung erfolgt im Konfigurator.
Woher stammen client_id und das Geheimnis?
Der In-App-Konfigurator generiert beides. Das gemeinsame Geheimnis signiert Ihre eingebetteten JWTs und ist getrennt von Ihren REST- und API-Schlüsseln sowie vom Sitzungsgeheimnis von SocialHub. Jeder Client hat sein eigenes Geheimnis, sodass ein Datenleck auf eine Website beschränkt bleibt.
Richten Sie die Einbettung in SocialHub ein1. Füge SDK auf deiner Seite ein.
Fügen Sie den vom Konfigurator generierten Codeausschnitt ein – er sieht folgendermaßen aus. Optionale Attribute: data-base-url (Standardwert https://flash.socialhub.ai), data-min-height (Standardwert 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 im Backend signieren
Das JWT muss auf Ihrem Backend signiert werden – das gemeinsame Geheimnis darf niemals den Browser erreichen. Tokens sind kurzlebig und nur einmal verwendbar.
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");Bereit für den Livegang?
Registrieren Sie Ihren eingebetteten Client und rufen Sie Ihre echte client_id und Ihr gemeinsames Geheimnis im SocialHub-Konfigurator ab. Fügen Sie anschließend den oben generierten Code-Schnipsel ein.