Denne artikel er til sites bygget med kun HTML, CSS og JavaScript (uden React). Den erstatter de gamle sider på
developers.intastellarsolutions.com/identity/sign-in/web/docs/js-docs.

Adfærden matcher den publicerede npm-pakke @intastellar/signin-sdk-react (se dist/api.js / dist/useIntastellar.js, f.eks. api.js på jsDelivr). Din vanilla JS bør følge samme flow, så den forbliver kompatibel med Intastellar Accounts.

Bemærk: Automatiserede forespørgsler til den ældre js-docs-URL får undertiden kun site-skalen, ikke hele artiklen. Denne side er det understøttede hjem for det materiale.

Hvad du skal bruge (tjekliste)

• HTTPS i produktion (popups og cookies).
• Tilladte popups for dit origin.
• Intastellar client ID og registreret app display name (appName / service).
• Et lille build-trin (esbuild, Vite, Webpack osv.) der bundler @intastellar/signin-sdk-react til browseren. Pakken er CommonJS og deklarerer React som peer dependency; hvis bundleren trækker React ind i et bundle der kun bruger IntastellarAPI, stub eller udelad React eller installér peers så opløsning lykkes.

Legacy script-tag (brug det ikke)

Den gamle skabelon brugte:

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

Den URL returnerer 404. Nye sites bør bruge IntastellarAPI fra npm-pakken (bundlet til browseren), ikke den ældre URL.

Ofte stillede spørgsmål

Foretrækker du React?

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

Popup blokeret eller login-vinduet lukker med det samme

Flowet kræver window.open. Bed besøgende om at tillade popups for dit site. Se Log ud, fejl og fejlfinding.

«Intet sker» efter login i popup’en

Du skal poste en besked tilbage til popup’en når du modtager tokenet (se flowet nedenfor). At springe det trin over ødelægger det hostede flow.

Hvilket cookie-navn?

Dette flow sætter inta_acc ved succes (se eksempel nedenfor). Betragt det som en del af din integrationskontrakt med SDK-adfærden, ikke som en værdi at kopiere fra tilfældige sites.

Teknisk reference — konfiguration (samme som IntastellarConfig)

Hosted URLs (IntastellarAPI.buildLoginUrl)

SDK’en vælger basis-URL som følger (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-parametre omfatter (fra implementeringen): service (app-navn), continue (login-URI), entryFlow (btoa(scopes)), key (client id), access_id (kodet parent-style-vært, med port hvis den findes), passive, flowName, Entry, scope, og valgfrit identifier (e-mail).

API base URL og HTTP-endepunkter

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

Verificer token (efter popup poster token-strengen til opener):

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

Aktuel bruger (first-party cookie-session på dit domæne):

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

Popup-flow og postMessage (samme som useIntastellar)

1. Byg login-URL med IntastellarAPI.buildLoginUrl(...).

2. Åbn den med:

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

   Copy code

3. Lyt på window efter message.

4. Når event.data er en ikke-tom streng (tokenet), send straks til popup’en:

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

   Copy code

   At udelade dette ødelægger det hostede flow.

5. Fjern din lytter, kald IntastellarAPI.verifyToken(token), og gem sessionen. React-hook’en sætter en first-party-cookie:

   • Navn: inta_acc
   • Værdi: token-strengen
   • Domæne: parent-style-vært udledt som SDK’ens getDomain() (fjern underdomæner når det første label ikke er numerisk, og fjern eventuel port for cookie-domænet)
   • Sti: /
   • Udløb: hook’en sætter ca. 2 år frem

6. Hvis brugeren lukker popup’en uden at fuldføre logind, ryd intervallet og fjern lytteren (SDK’en tjekker popup.closed hvert sekund).

I produktion skal du validere event.origin mod de origins Intastellar dokumenterer for dit miljø, før du stoler på event.data.

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

Byg intastellar-signin-bundle.js fra en entry-fil der importerer IntastellarAPI og tilføjer click-handleren (se nedenfor).

Eksempel: vanilla entry-modul (spejler useIntastellar logind)

Samme kontrolflow som signin() i useIntastellar.js, uden 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();
});

Valgfrit: efter vellykket logind, kald IntastellarAPI.getUsers() for at matche SDK’ens tjek af «hvem er logget ind» (samme cookie- og origin-adfærd).

Log ud (samme idé som hook’en)

Ryd session-cookien på dit parent-domæne og genindlæs, i tråd med SDK’ens logout:

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

Relateret

• Kom godt i gang
• Sessioner, cookies og tokens
• Log ud, fejl og fejlfinding
• Efter npm install, se TROUBLESHOOTING.md i node_modules/@intastellar/signin-sdk-react/ for SDK-specifikke problemer.