INTASTELLAR SOLUTIONSHelp Center
Versionv1

Ce manuel s’adresse aux sites construits avec uniquement HTML, CSS et JavaScript (sans React). Il remplace les anciennes pages sur
developers.intastellarsolutions.com/identity/sign-in/web/docs/js-docs.

Le comportement correspond au paquet npm publié @intastellar/signin-sdk-react (voir dist/api.js / dist/useIntastellar.js, par ex. api.js sur jsDelivr). Votre JS brut doit suivre le même flux pour rester compatible avec Intastellar Accounts.

Remarque : Les requêtes automatisées vers l’ancienne URL js-docs reçoivent parfois uniquement l’enveloppe du site, pas l’article complet. Cette page est l’emplacement pris en charge pour ce contenu.

Ce dont vous avez besoin (liste de contrôle)

  • HTTPS en production (fenêtres contextuelles et cookies).
  • Fenêtres contextuelles autorisées pour votre origine.
  • Client ID Intastellar et nom d’affichage de l’application enregistré (appName / service).
  • Une petite étape de build (esbuild, Vite, Webpack, etc.) qui bundle @intastellar/signin-sdk-react pour le navigateur. Le paquet est en CommonJS et déclare React comme dépendance pair ; si le bundler inclut React pour un bundle qui n’utilise que IntastellarAPI, stubbez ou omettez React ou installez les pairs pour que la résolution réussisse.

Ancienne balise script (à ne pas utiliser)

L’ancien modèle utilisait :

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

Cette URL renvoie 404. Les nouveaux sites doivent utiliser IntastellarAPI depuis le paquet npm (bundlé pour le navigateur), pas cette URL héritée.

Questions fréquentes

Vous préférez React ?

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

Fenêtre contextuelle bloquée ou fenêtre de connexion qui se ferme tout de suite

Le flux exige window.open. Demandez aux visiteurs d’autoriser les fenêtres contextuelles pour votre site. Voir Déconnexion, erreurs et dépannage.

« Rien ne se passe » après la connexion dans la fenêtre contextuelle

Vous devez renvoyer un message à la fenêtre contextuelle lorsque vous recevez le jeton (voir le flux ci-dessous). Omettre cette étape casse le flux hébergé.

Quel nom de cookie ?

Ce flux définit inta_acc en cas de succès (voir l’exemple ci-dessous). Traitez-le comme partie du contrat d’intégration avec le comportement du SDK, pas comme une valeur à copier depuis des sites au hasard.

Référence technique — configuration (identique à IntastellarConfig)

ChampObligatoireDéfaut / notes
appNameOuiService enregistré / nom d’affichage de l’application.
clientIdOuiClé OAuth envoyée comme paramètre de requête key.
loginUriNonSi omis, le SDK utilise uniquement hostname + port + pathname (sans https://). Utilisé comme paramètre de requête continue.
scopesNonPar défaut dans le hook React : profile. Passé comme scope et encodé dans entryFlow comme btoa(scopes).
typeNon'signin' (défaut) ou 'signup' — modifie l’URL hébergée (voir ci-dessous).
emailNonSi défini avec type: 'signin', ouvre l’URL du flux de saisie mot de passe.

URL hébergées (IntastellarAPI.buildLoginUrl)

Le SDK choisit l’URL de base comme suit (api.js) :

  • Par défaut (sélecteur OAuth) :
    https://www.intastellaraccounts.com/signin/v2/ws/oauth/oauthchooser
  • E-mail + connexion (email défini et type === 'signin') :
    https://www.intastellaraccounts.com/signin/v2/ws/oauth/pwd
  • Inscription (type === 'signup') :
    https://www.intastellaraccounts.com/Signup/

Les paramètres de requête incluent (d’après l’implémentation) : service (nom d’application), continue (URI de connexion), entryFlow (btoa(scopes)), key (client id), access_id (hôte style parent encodé, avec port si présent), passive, flowName, Entry, scope, et éventuellement identifier (e-mail).

URL de base de l’API et points de terminaison HTTP

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

Vérifier le jeton (après que la fenêtre contextuelle a envoyé la chaîne de jeton à l’opener) :

  • GET /verify
  • En-tête : Authorization: Bearer <token>
  • Content-Type: application/json

Utilisateur actuel (session cookie first-party sur votre domaine) :

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

Flux fenêtre contextuelle et postMessage (identique à useIntastellar)

  1. Construire l’URL de connexion avec IntastellarAPI.buildLoginUrl(...).

  2. L’ouvrir avec :

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

  3. Écouter sur window l’événement message.

  4. Lorsque event.data est une chaîne non vide (le jeton), envoyer immédiatement à la fenêtre contextuelle :

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

    Omettre cela casse le flux hébergé.

  5. Retirer votre écouteur, appeler IntastellarAPI.verifyToken(token), puis persister la session. Le hook React définit un cookie first-party :

    • Nom : inta_acc
    • Valeur : la chaîne jeton
    • Domaine : hôte style parent dérivé comme getDomain() du SDK (retirer les sous-domaines lorsque le premier label n’est pas numérique, puis supprimer tout port pour le domaine du cookie)
    • Chemin : /
    • Expiration : le hook utilise environ 2 ans dans le futur

  6. Si l’utilisateur ferme la fenêtre contextuelle sans terminer la connexion, effacez l’intervalle et retirez l’écouteur (le SDK vérifie popup.closed chaque seconde).

En production, validez event.origin par rapport aux origines documentées par Intastellar pour votre environnement avant de faire confiance à event.data.

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

Construisez intastellar-signin-bundle.js à partir d’un fichier d’entrée qui importe IntastellarAPI et attache le gestionnaire de clic (voir ci-dessous).

Exemple : module d’entrée vanilla (reflète useIntastellar pour la connexion)

Même logique de contrôle que signin() dans useIntastellar.js, sans état React.

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

Optionnel : après une connexion réussie, appelez IntastellarAPI.getUsers() pour vous aligner sur la vérification « qui est connecté » du SDK (même comportement cookie + origine).

Déconnexion (même idée que le hook)

Effacez le cookie de session sur votre domaine parent et rechargez, comme logout du SDK :

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

Liens connexes

Last updated