INTASTELLAR SOLUTIONSHelp Center
Versionv1

Dieses Handbuch zeigt, wie Sie Intastellar Sign-In im Browser mit dem offiziellen React-Paket oder denselben Ideen in reinem JavaScript einbinden (siehe Plain HTML, CSS und JavaScript).

Wichtig: Alle Codebeispiele nutzen Platzhalter (your-client-id, https://app.example.com, Beispiel-Endpunkte). Nicht Cookie-Namen, Pfade oder Umgebungsvariablen von fremden Sites kopieren.

Maßgeblich: @intastellar/signin-sdk-react auf npm — Installation, IntastellarButton, useIntastellar, Konfiguration.

Hilfe zu Intastellar-Produkten liegt auf help.intastellarsolutions.com. Alte Links auf frühere Developer-Hostnames sollten per HTTPS-Weiterleitung hierher zeigen; erlaubte Login-/Redirect-URIs am Client müssen zu echten URLs passen.

Voraussetzungen

  • HTTPS in Produktion.
  • Popups erlaubt für Ihre Site (das SDK öffnet ein Intastellar-Fenster).
  • Registrierte Client-ID (und ggf. weitere Pflichtfelder).
  • Klärung, wer die Abhängigkeit pflegt (npm install, Updates).

Kurz: So funktioniert es

Anmeldung läuft meist per Popup: Intastellar zeigt die Login-Oberfläche, danach erhält Ihre Seite das Ergebnis und das SDK kann First-Party-Cookies auf Ihrer Domain setzen. Das ist nicht dasselbe wie manuelles OAuth-Authorization-Code-Redirect und Token-POST; dafür siehe Authorization-Code-Flow.

Häufige Fragen

Brauchen wir React?

Nein. Nur HTML/CSS/JS: Plain HTML, CSS und JavaScript — gleiches Verhalten.

Browser blockieren window.open oft bis zur Nutzerinteraktion oder ohne Erlaubnis. Siehe Abmelden, Fehler und Fehlersuche.

Wo kommt die Client-ID hin?

In Konfiguration, die Build oder Laufzeit liefert (öffentliche Env, Config). Keine echten IDs öffentlich ins Repository.

Wir brauchen servergerenderte Seiten und das SDK

Nach dem SDK-Callback rufen Teams oft eigenes Backend auf, um ein HttpOnly-Session-Cookie zu setzen. Routen und Cookie-Namen sind Ihr Design — Sitzungen, Cookies und Tokens und das Muster unten.

Angemeldete Tools auf dieser Hilfe-Site

Eine Site mit diesem Stack kann nach Login zusätzliche Tools anbieten (z. B. API-Schlüssel). Speicherung und Absicherung sind umgebungsspezifisch und gehören in Ihre Runbooks, nicht in diesem Artikel.

Für Entwickler — React (@intastellar/signin-sdk-react)

Installation (siehe npm-Readme):

npm install @intastellar/signin-sdk-react

Button-Komponente (Beispiel)

import { IntastellarButton } from "@intastellar/signin-sdk-react";
 
function Example() {
  const handleLogin = (account) => {
    // Use account.user (shape per SDK types) in your app
    console.log("Signed in:", account);
  };
 
  return (
    <IntastellarButton
      clientId="your-client-id"
      loginCallback={handleLogin}
    />
  );
}

Hook (Beispiel)

import { useIntastellar } from "@intastellar/signin-sdk-react";
 
function Example() {
  const { users, isLoading, signin, logout, isSignedIn } = useIntastellar({
    clientId: "your-client-id",
    scopes: "profile,email",
    loginCallback: async (account) => {
      /* optional: sync with your backend */
    },
  });
 
  if (isLoading) return <p>Loading…</p>;
  return isSignedIn ? (
    <button type="button" onClick={logout}>Sign out</button>
  ) : (
    <button type="button" onClick={() => signin()}>Sign in</button>
  );
}

Optional: eigene Server-Session (Muster)

  1. Nach SDK-Callback eigenes Backend aufrufen (nur Beispiel: POST https://api.example.com/v1/session) mit minimalem Profil-Payload.
  2. Server stellt Vertrauen nach Ihrem Modell her (z. B. Token-Prüfung laut Doku).
  3. Server setzt opakes, HttpOnly, Secure Session-Cookie für Ihre App.

Cookies auf Ihrer Origin

Das SDK kann First-Party-Cookies setzen. Namen und Laufzeiten stehen in SDK und technischer Referenz — npm-Readme und Integrationsdoku nutzen, keine Werte von fremden Deployments kopieren.

Nächste Schritte

Last updated