INTASTELLAR SOLUTIONSHelp Center
Versionv1

Denne artikel forklarer hvordan du tilføjer Intastellar Sign-In i browseren med det officielle React-pakke eller de samme idéer i ren JavaScript (se den dedikerede artikel Ren HTML, CSS og JavaScript).

Vigtigt: Alle kodeeksempler bruger pladsholdere (your-client-id, https://app.example.com, eksempel-endepunkter). Kopiér ikke cookie-navne, stier eller env-variabler fra et andet firms site.

Autoritative pakkedetaljer: @intastellar/signin-sdk-react på npm — installation, IntastellarButton, useIntastellar, konfiguration.

Hjælp til Intastellar-produkter findes på help.intastellarsolutions.com. Hvis gamle links stadig peger på tidligere developer-hostnames, brug HTTPS-omdirigeringer hertil og opdater tilladte login- / omdirigerings-URI’er på din Intastellar-klient så de matcher rigtige URL’er.

Hvad du skal bruge

  • HTTPS i produktion.
  • Tilladte popups for dit site (SDK’en åbner Intastellar i et vindue).
  • Et registreret client ID (og evt. andre felter din registrering kræver).
  • En plan for hvem vedligeholder afhængigheden (npm install, opdateringer).

Sådan fungerer det (kort)

Logind sker som regel via popup: Intastellar viser login-UI’en, derefter modtager din side et resultat, og SDK’en kan sætte first-party-cookies på dit domæne. Det er ikke det samme som manuelt at bygge OAuth-autorisationskode-omdirigering og token-POST; til det, se Autorisationskodeflow.

Ofte stillede spørgsmål

Skal vi bruge React?

Nej. Til kun HTML/CSS/JS, brug Ren HTML, CSS og JavaScript — samme underliggende adfærd.

Browsere blokerer ofte window.open indtil brugeren interagerer med din side, eller hvis dit site ikke må åbne popups. Se Log ud, fejl og fejlfinding.

Hvor placerer vi client ID?

I konfiguration som dit build eller runtime leverer (offentlig env, config-fil osv.). Undgå at committe rigtige ID’er til offentlig kildekontrol.

Vi har både server-renderede sider og SDK’en

Efter SDK-callback kører, kalder teams ofte deres egen backend for at oprette en HttpOnly session-cookie. Præcise routes og cookie-navne er jeres design — se Sessioner, cookies og tokens og det valgfrie mønster nedenfor.

Loggede værktøjer på dette hjælpesite

Et site med denne stack kan tilbyde ekstra værktøjer efter logind (f.eks. API-nøgler). Hvordan det gemmes og sikres er miljøspecifikt og hører til i jeres runbooks, ikke i denne artikel.

For udviklere — React (@intastellar/signin-sdk-react)

Installer (se npm-readme):

npm install @intastellar/signin-sdk-react

Knapkomponent (eksempel)

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

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

Valgfrit: din egen serversession (mønster)

  1. Når SDK-callback kører, kald din backend (kun eksempel: POST https://api.example.com/v1/session) med en minimal profil-payload din server accepterer.
  2. Serveren etablerer tillid efter jeres sikkerhedsmodel (f.eks. verificér tokens hvis dokumenteret for jeres produkt).
  3. Serveren sætter en uigennemsigtig, HttpOnly, Secure session-cookie til din app.

Cookies på dit origin

SDK’en kan sætte first-party-cookies på dit sites origin. Navne og levetider kommer fra SDK’en og Intastellars tekniske reference — brug npm-readme og jeres integrationsdokumentation, ikke værdier kopieret fra urelaterede sites.

Næste skridt

Last updated