Deze handleiding is voor sites die alleen HTML, CSS en JavaScript gebruiken (geen React). Hij vervangt de oude pagina’s op
developers.intastellarsolutions.com/identity/sign-in/web/docs/js-docs.

Het gedrag komt overeen met het gepubliceerde npm-pakket @intastellar/signin-sdk-react (zie dist/api.js / dist/useIntastellar.js, bijv. api.js op jsDelivr). Je platte JS moet dezelfde flow volgen om compatibel te blijven met Intastellar Accounts.

Opmerking: Geautomatiseerde requests naar de legacy-js-docs-URL krijgen soms alleen de siteshell, niet het volledige artikel. Deze pagina is de ondersteunde plek voor die inhoud.

Wat je nodig hebt (checklist)

• HTTPS in productie (pop-ups en cookies).
• Pop-ups toegestaan voor je origin.
• Intastellar-client ID en geregistreerde app display name (appName / service).
• Een kleine buildstap (esbuild, Vite, Webpack, enz.) die @intastellar/signin-sdk-react voor de browser bundelt. Het pakket is CommonJS en declareert React als peer dependency; als de bundler React meeneemt voor een bundle die alleen IntastellarAPI gebruikt, stub of laat React weg of installeer peers zodat resolutie slaagt.

Legacy script-tag (niet gebruiken)

De oude template gebruikte:

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

Die URL geeft 404. Nieuwe sites moeten IntastellarAPI uit het npm-pakket gebruiken (gebundeld voor de browser), niet die legacy-URL.

Veelgestelde vragen

Liever React?

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

Pop-up geblokkeerd of aanmeldvenster sluit meteen

De flow vereist window.open. Vraag bezoekers pop-ups voor je site toe te staan. Zie Afmelden, fouten en probleemoplossing.

“Er gebeurt niets” na login in de pop-up

Je moet een bericht terugposten naar de pop-up wanneer je de token ontvangt (zie de flow hieronder). Die stap overslaan breekt de gehoste flow.

Welke cookienaam?

Deze flow zet bij succes inta_acc (zie voorbeeld hieronder). Behandel dat als onderdeel van je integratiecontract met het SDK-gedrag, niet als iets om van willekeurige sites over te nemen.

Technische referentie — configuratie (zelfde als IntastellarConfig)

Gehoste URL’s (IntastellarAPI.buildLoginUrl)

De SDK kiest de basis-URL als volgt (api.js):

• Standaard (OAuth-kiezer):
  https://www.intastellaraccounts.com/signin/v2/ws/oauth/oauthchooser
• E-mail + aanmelden (email gezet en type === 'signin'):
  https://www.intastellaraccounts.com/signin/v2/ws/oauth/pwd
• Registreren (type === 'signup'):
  https://www.intastellaraccounts.com/Signup/

Queryparameters omvatten (uit de implementatie): service (appnaam), continue (login-URI), entryFlow (btoa(scopes)), key (client id), access_id (gecodeerde parent-style host, met poort indien aanwezig), passive, flowName, Entry, scope, en optioneel identifier (e-mail).

API-basis-URL en HTTP-endpoints

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

Token verifiëren (nadat de pop-up de tokenstring naar de opener post):

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

Huidige gebruiker (first-party-cookiesessie op jouw domein):

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

Pop-upflow en postMessage (zelfde als useIntastellar)

1. Bouw de login-URL met IntastellarAPI.buildLoginUrl(...).

2. Open die met:

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

   Copy code

3. Luister op window naar message.

4. Wanneer event.data een niet-lege string is (de token), stuur onmiddellijk naar de pop-up:

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

   Copy code

   Dit weglaten breekt de gehoste flow.

5. Verwijder je listener, roep IntastellarAPI.verifyToken(token) aan, bewaar daarna de sessie. De React-hook zet een first-party-cookie:

   • Naam: inta_acc
   • Waarde: de token-string
   • Domein: parent-style host afgeleid zoals de SDK’s getDomain() (strip subdomeinen als het eerste label niet numeriek is, drop daarna elke poort voor het cookie-domein)
   • Pad: /
   • Vervaldatum: hook gebruikt ongeveer 2 jaar vooruit

6. Als de gebruiker de pop-up sluit zonder aanmelding af te ronden, wis het interval en verwijder de listener (de SDK controleert elke seconde op popup.closed).

Valideer in productie event.origin tegen de origins die Intastellar voor jouw omgeving documenteert voordat je event.data vertrouwt.

Voorbeeld: 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>

Bouw intastellar-signin-bundle.js vanuit een entrybestand dat IntastellarAPI importeert en de klikhandler koppelt (zie hieronder).

Voorbeeld: vanilla entrymodule (spiegelt useIntastellar aanmelden)

Zelfde controlflow als signin() in useIntastellar.js, zonder 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();
});

Optioneel: na een geslaagde aanmelding IntastellarAPI.getUsers() aanroepen om aan te sluiten bij de SDK-check “wie is ingelogd” (zelfde cookie- en origingedrag).

Afmelden (zelfde idee als de hook)

Wis de sessiecookie op je parent-domein en herlaad, gelijk aan de SDK-logout:

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

Gerelateerd

• Aan de slag
• Sessies, cookies en tokens
• Afmelden, fouten en probleemoplossing
• Na npm install, zie TROUBLESHOOTING.md in node_modules/@intastellar/signin-sdk-react/ voor SDK-specifieke problemen.