INTASTELLAR SOLUTIONSHelp Center
Versionv1

Deze handleiding legt uit hoe je Intastellar Sign-In in de browser toevoegt met het officiële React-pakket of dezelfde ideeën in platte JavaScript (zie het aparte artikel Platte HTML, CSS en JavaScript).

Belangrijk: Elke codevoorbeeld gebruikt placeholders (your-client-id, https://app.example.com, voorbeeld-endpoints). Kopieer geen cookienamen, paden of env-variabelen van de site van een ander bedrijf.

Authoritatieve pakketdetails: @intastellar/signin-sdk-react op npm — installatiestappen, IntastellarButton, useIntastellar, configuratie.

Hulp voor Intastellar-producten staat op help.intastellarsolutions.com. Als oude links nog naar eerdere developer-hostnames wijzen, gebruik HTTPS-redirects hier en werk toegestane login- / redirect-URI’s op je Intastellar-client bij zodat ze overeenkomen met echte URL’s.

Wat je nodig hebt

  • HTTPS in productie.
  • Pop-ups toegestaan voor je site (de SDK opent Intastellar in een venster).
  • Een geregistreerde client ID (en andere velden die je registratie vereist).
  • Een plan voor wie het onderhoudt (npm install, updates).

Hoe het werkt (kort)

Aanmelden is meestal pop-up-gebaseerd: Intastellar toont de login-UI, daarna ontvangt je pagina een resultaat en kan de SDK first-party-cookies op jouw domein zetten. Dat is niet hetzelfde als handmatig de OAuth-authorization code-redirect en token-POST opbouwen; daarvoor zie Authorization code flow.

Veelgestelde vragen

Hebben we React nodig?

Nee. Voor alleen HTML/CSS/JS gebruik je Platte HTML, CSS en JavaScript — hetzelfde onderliggende gedrag.

Pop-up geblokkeerd of leeg venster

Browsers blokkeren window.open vaak tot de gebruiker met je pagina interacteert, of als je site geen pop-ups mag openen. Zie Afmelden, fouten en probleemoplossing.

Waar zetten we de client ID?

In configuratie die je build of runtime levert (publieke env, configbestand, enz.). Vermijd echte ID’s in openbare broncode te committen.

We hebben server-rendered pagina’s én de SDK

Nadat de SDK een ingelogde gebruiker meldt, roepen teams vaak hun eigen backend aan om een HttpOnly-sessiecookie aan te maken. Exacte routes en cookienamen zijn jouw ontwerp — zie Sessies, cookies en tokens en het optionele patroon hieronder.

Ingelogde tools op deze helpsite

Een site met deze stack kan extra tools na aanmelding aanbieden (bijvoorbeeld API-sleutels). Hoe dat wordt opgeslagen en beveiligd is omgevingsspecifiek en hoort in jouw runbooks, niet in dit artikel.

Voor ontwikkelaars — React (@intastellar/signin-sdk-react)

Installeer (zie de npm readme):

npm install @intastellar/signin-sdk-react

Knopcomponent (voorbeeld)

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 (voorbeeld)

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>
  );
}

Optioneel: je eigen serversessie (patroon)

  1. Nadat de SDK-callback draait, roep jouw backend aan (alleen voorbeeld: POST https://api.example.com/v1/session) met een minimaal profielpayload dat je server accepteert.
  2. De server vestigt vertrouwen volgens jouw securitymodel (bijv. tokens verifiëren als dat voor je product is gedocumenteerd).
  3. De server zet een opaque, HttpOnly, Secure-sessiecookie voor je app.

Cookies op jouw origin

De SDK kan first-party-cookies op de origin van je site zetten. Namen en levensduur komen uit de SDK en de technische referentie van Intastellar — gebruik de npm readme en je integratiedocs, geen waarden van niet-gerelateerde sites.

Volgende stappen

Last updated