Anmeldestand des Portal-Accounts in eigenem HTML/JS nutzen

Manche Portale binden im HTML-Body eigene Elemente ein, die den aktuellen SSO-Anmeldestand des Portal-Accounts anzeigen sollen. Ein typisches Beispiel ist eine externe Topbar (etwa die KSC-Topbar), die den Namen des angemeldeten Nutzers oben in der Seite darstellen soll.

Damit das dynamisch funktioniert, stellt FSC im Portal-Layout ein globales JavaScript-Objekt bereit: window.FscPortalAccount . Es enthält den aktuellen Anmeldestand, die Basisdaten des eingeloggten Portal-Accounts sowie die wichtigsten FSC-URLs und ist bereits vor dem eigenen Custom-HTML/JS des Kunden verfügbar.

Verfügbare Felder

Bei eingeloggtem Portal-Account:

loggedIn : true
fullname : Vorname + Nachname, zusammengesetzt
email : E-Mail-Adresse des Portal-Accounts
firstname : Vorname
lastname : Nachname

Ohne eingeloggten Portal-Account (anonymer Besuch):

loggedIn : false

Zusätzlich immer verfügbar (auch ohne Login), für die Verknüpfung zu den FSC-eigenen Portalseiten:

myDataUrl : URL zur FSC-Seite "Mein Konto" (dort werden die Portal-Account-Stammdaten, Buchungsvorlagen etc. verwaltet)
signInUrl : URL, die den SSO-Login-Flow über FSC startet
signOutUrl : URL, die den FSC-Portal-Account abmeldet (HTTP-Methode DELETE). Wenn der IdP zentrales Logout unterstützt, wird die Abmeldung dort ebenfalls ausgelöst.

Wo pflegen

Die Einbindung geschieht in den Portal-Design-Einstellungen unter Einstellungen → Portaldesign → HTML Code für BODY und optional Eigener Javascript (JS) Code.

FSC-eigene SSO-Box ausblenden

Wenn die eigene externe Topbar den Anmeldestand bereits anzeigt, ist die FSC-eigene SSO-Box rechts oben doppelt. Sie lässt sich über Einstellungen → Single Sign-On mit der Option "FSC-eigene SSO-Box im Portal ausblenden" komplett unterdrücken.

Wichtig: Sobald die SSO-Box ausgeblendet ist, sind die FSC-spezifischen Links Mein Konto und Abmelden nirgendwo mehr sichtbar. Sie müssen dann selbst in die externe Topbar eingebunden werden. Dafür stehen die drei URLs unter window.FscPortalAccount.myDataUrl , window.FscPortalAccount.signInUrl und window.FscPortalAccount.signOutUrl bereit.

Der folgende Code-Block wird in HTML Code für BODY eingetragen. Er lädt die externe Topbar und übergibt anschließend die aktuellen Nutzerdaten aus window.FscPortalAccount . Das Polling ist ein einfacher Fallback für den Fall, dass das Topbar-Script asynchron lädt und beim ersten Aufruf noch nicht bereit ist.

<div id="ksc-topbar"></div>
<script src="https://fanshop.ksc.de/ksc-topbar/ksc-topbar-loader.js"
        data-sso-domain="account.ksc.de"
        data-sso-login="/portal/sso/auth/start"
        data-sso-logout="/portal/sso/auth"
        data-lato="false"></script>
<script>
  (function poll() {
    if (window.KscTopbar) {
      window.KscTopbar.setCustomer(window.FscPortalAccount);
    } else {
      requestAnimationFrame(poll);
    }
  })();
</script>

Bei anonymen Besuchern erhält die Topbar automatisch { loggedIn: false } und zeigt ihre eigene Login-UI. Nach einem Login-Redirect steht beim nächsten Seitenaufruf der volle Anmeldestand zur Verfügung.

Wenn die FSC-eigene SSO-Box ausgeblendet ist, kann per Custom-JS ein Menüeintrag "Mein Konto" und ein "Abmelden"-Formular in die externe Topbar injiziert werden. Prinzip:

<script>
  // Mein-Konto-Link
  var myDataLink = document.createElement("a");
  myDataLink.href = window.FscPortalAccount.myDataUrl;
  myDataLink.textContent = "Mein Konto";
  document.querySelector("#ksc-topbar .user-menu").appendChild(myDataLink);

  // Abmelden per DELETE (Rails-CSRF-Token einlesen)
  var csrfToken = document.querySelector("meta[name=csrf-token]").content;
  var logoutForm = document.createElement("form");
  logoutForm.method = "post";
  logoutForm.action = window.FscPortalAccount.signOutUrl;
  logoutForm.innerHTML =
    <input type="hidden" name="_method" value="delete"> +
    <input type="hidden" name="authenticity_token" value=" + csrfToken + "> +
    <button type="submit">Abmelden</button>;
  document.querySelector("#ksc-topbar .user-menu").appendChild(logoutForm);
</script>

Die konkreten Selektoren (#ksc-topbar .user-menu ) hängen von der jeweiligen Topbar ab. Der Logout läuft über ein Formular mit _method=delete , weil Rails den DELETE-Endpoint erwartet und den CSRF-Token prüfen muss.

Sicherheitshinweise

Alle Werte in window.FscPortalAccount sind serverseitig JSON-escaped, es besteht kein Injection-Risiko bei der Weitergabe an andere Skripte.
Die Bridge ist ausschließlich für Anzeigezwecke und die Navigation zu bekannten FSC-URLs gedacht. Sicherheitsrelevante Entscheidungen (z.B. wer welche Funktion ausführen darf) dürfen niemals client-seitig auf Basis von window.FscPortalAccount getroffen werden. Die Wahrheit liegt immer beim Server.
Sensible Zusatzdaten (Adresse, Zahlungsdaten, interne IDs) werden bewusst nicht ausgeliefert und sollten auch nicht über Umwege im Frontend verfügbar gemacht werden.

Wann NICHT geeignet

Der Anmeldestand ändert sich nach dem initialen Seitenaufruf (Login/Logout im laufenden Tab, ohne Reload). Für klassische serverseitig gerenderte Portale ist das kein Problem, weil Login/Logout ohnehin einen Redirect auslöst.
Für server-to-server-Integrationen ist die Bridge ungeeignet, hier gibt es separate SSO- und API-Wege.