Dieses Handbuch gilt für Sites mit nur HTML, CSS und JavaScript (ohne React). Es ersetzt die alten Seiten unter
developers.intastellarsolutions.com/identity/sign-in/web/docs/js-docs.

Das Verhalten entspricht dem veröffentlichten npm-Paket @intastellar/signin-sdk-react (siehe dist/api.js / dist/useIntastellar.js, z. B. api.js auf jsDelivr). Ihr Plain-JS sollte denselben Ablauf nutzen, damit es mit Intastellar Accounts kompatibel bleibt.

Hinweis: Automatisierte Anfragen an die alte js-docs-URL liefern manchmal nur die Site-Hülle, nicht den vollen Artikel. Diese Seite ist die unterstützte Heimat für dieses Material.

Voraussetzungen (Checkliste)

• HTTPS in Produktion (Popups und Cookies).
• Popups erlaubt für Ihre Origin.
• Intastellar-Client-ID und registrierter App-Anzeigename (appName / service).
• Ein kleiner Build-Schritt (esbuild, Vite, Webpack usw.), der @intastellar/signin-sdk-react für den Browser bündelt. Das Paket ist CommonJS und deklariert React als Peer-Dependency; wenn der Bundler React für ein Bundle zieht, das nur IntastellarAPI nutzt, React stubben oder weglassen oder Peers installieren, damit die Auflösung klappt.

Legacy-Script-Tag (nicht verwenden)

Die alte Vorlage nutzte:

<script src="https://account.api.intastellarsolutions.com/insign/client.js"></script>

Diese URL liefert 404. Neue Integrationen sollten IntastellarAPI aus dem npm-Paket (für den Browser gebündelt) nutzen, nicht diese Legacy-URL.

Häufige Fragen

Lieber React?

@intastellar/signin-sdk-react — Intastellar Sign-In — React und JavaScript.

Popup blockiert oder Login-Fenster schließt sofort

Der Flow braucht window.open. Besucher bitten, Popups für Ihre Site zu erlauben. Siehe Abmelden, Fehler und Fehlersuche.

Nach Login im Popup passiert „nichts“

Sie müssen beim Empfang des Tokens sofort eine Nachricht an das Popup senden (siehe Ablauf unten). Ohne diesen Schritt bricht der gehostete Flow ab.

Welcher Cookie-Name?

Bei Erfolg setzt dieser Flow inta_acc (siehe Beispiel unten). Als Teil Ihres Integrationsvertrags mit dem SDK-Verhalten behandeln, nicht von beliebigen Sites kopieren.

Technische Referenz — Konfiguration (wie IntastellarConfig)

Hosted URLs (IntastellarAPI.buildLoginUrl)

The SDK picks the base URL as follows (api.js):

• Default (OAuth chooser):
  https://www.intastellaraccounts.com/signin/v2/ws/oauth/oauthchooser
• Email + sign-in (email set and type === 'signin'):
  https://www.intastellaraccounts.com/signin/v2/ws/oauth/pwd
• Sign-up (type === 'signup'):
  https://www.intastellaraccounts.com/Signup/

Query parameters include (from the implementation): service (app name), continue (login URI), entryFlow (btoa(scopes)), key (client id), access_id (encoded parent-style host, with port if present), passive, flowName, Entry, scope, and optionally identifier (email).

API base URL and HTTP endpoints

• Base: https://apis.intastellaraccounts.com (IntastellarAPI.baseUrl).

Verify token (after popup posts the token string to the opener):

• GET /verify
• Header: Authorization: Bearer <token>
• Content-Type: application/json

Current user (first-party cookie session on your domain):

• GET /usercontent/js/getuser?origin=<window.location.host>
• credentials: 'include', CORS mode cors

Popup-Ablauf und postMessage (wie useIntastellar)

1. Login-URL mit IntastellarAPI.buildLoginUrl(...) bauen.

2. Öffnen mit:

   window.open(url, 'intastellarLogin', 'height=719,width=500,left=100,top=100,resizable=no')

   Copy code

3. Auf window auf message hören.

4. Wenn event.data ein nicht leerer String (das Token) ist, sofort ans Popup senden:

   loginWindow.postMessage("iframe-token-received", event.origin);

   Copy code

   Ohne diesen Schritt bricht der gehostete Flow ab.

5. Listener entfernen, IntastellarAPI.verifyToken(token) aufrufen, Session speichern. Der React-Hook setzt ein First-Party-Cookie:

   • Name: inta_acc
   • Value: the token string
   • Domain: parent-style host derived like the SDK’s getDomain() (strip subdomains when the first label is not numeric, then drop any port for the cookie domain)
   • Path: /
   • Expiry: hook uses ~2 years ahead

6. Schließt der Nutzer ohne erfolgreiche Anmeldung, Intervall und Listener entfernen (das SDK prüft popup.closed jede Sekunde).

In Produktion event.origin gegen die von Intastellar dokumentierten Origins prüfen, bevor Sie event.data vertrauen.

Beispiel: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sign in</title>
    <link rel="stylesheet" href="/css/site.css" />
  </head>
  <body>
    <button type="button" id="inta-signin">Sign in with Intastellar</button>
    <script src="/js/intastellar-signin-bundle.js"></script>
  </body>
</html>

intastellar-signin-bundle.js aus einem Entry bauen, das IntastellarAPI importiert und den Klick-Handler setzt (siehe unten).

Beispiel: Vanilla-Entry (wie signin() in useIntastellar)

Derselbe Ablauf wie signin() in useIntastellar.js, ohne React-State.

import { IntastellarAPI } from "@intastellar/signin-sdk-react";
 
const config = {
  appName: "Your registered app display name",
  clientId: "your-client-id",
  // loginUri: optional — defaults to hostname + port + pathname
  scopes: "profile",
  type: "signin",
};
 
function getDomain() {
  let domain = window.location.hostname || window.location.host;
  const domainParts = domain.split(".");
  if (domainParts.length > 2) domainParts.shift();
  if (isNaN(Number(domainParts[0]))) domain = domainParts.join(".");
  return domain.split(":")[0];
}
 
function setCookie(name, value, domain, expires) {
  let cookieString = `${name}=${value}; domain=${domain}; path=/`;
  if (expires) cookieString += `; expires=${expires.toUTCString()}`;
  document.cookie = cookieString;
}
 
function openIntastellarSignIn(email) {
  const loginUri =
    config.loginUri ??
    `${location.hostname}${location.port ? ":" + location.port : ""}${location.pathname}`;
 
  const loginUrl = IntastellarAPI.buildLoginUrl({
    appName: config.appName,
    clientId: config.clientId,
    loginUri,
    scopes: config.scopes || "profile",
    email,
    type: config.type || "signin",
  });
 
  const loginWindow = window.open(
    loginUrl,
    "intastellarLogin",
    "height=719,width=500,left=100,top=100,resizable=no",
  );
  if (!loginWindow) {
    alert("Please enable popups for this website");
    return;
  }
 
  function onMessage(event) {
    const token = event.data;
    if (!(token && typeof token === "string")) return;
 
    loginWindow.postMessage("iframe-token-received", event.origin);
    window.removeEventListener("message", onMessage);
 
    IntastellarAPI.verifyToken(token)
      .then((account) => {
        const expires = new Date();
        expires.setFullYear(expires.getFullYear() + 2);
        setCookie("inta_acc", token, getDomain(), expires);
        console.log("Signed in:", account.user);
        if (!loginWindow.closed) loginWindow.close();
      })
      .catch((err) => {
        console.error(err);
        if (!loginWindow.closed) loginWindow.close();
      });
  }
 
  window.addEventListener("message", onMessage);
 
  const timer = setInterval(() => {
    if (loginWindow.closed) {
      clearInterval(timer);
      window.removeEventListener("message", onMessage);
    }
  }, 1000);
}
 
document.getElementById("inta-signin")?.addEventListener("click", () => {
  openIntastellarSignIn();
});

Optional: nach erfolgreicher Anmeldung IntastellarAPI.getUsers() aufrufen, analog zur „wer ist angemeldet“-Prüfung des SDK (gleiches Cookie + Origin-Verhalten).

Abmelden (wie der Hook)

Session-Cookie auf der Parent-Domain löschen und neu laden, wie beim SDK-logout:

const domain = getDomain();
document.cookie = `inta_acc=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.${domain};`;
window.location.reload();

Verwandtes

• Erste Schritte
• Sitzungen, Cookies und Tokens
• Abmelden, Fehler und Fehlersuche
• Nach npm install TROUBLESHOOTING.md in node_modules/@intastellar/signin-sdk-react/ für SDK-spezifische Themen.