INTASTELLAR SOLUTIONSHelp Center
Versionv1

Ce manuel explique comment ajouter Intastellar Sign-In dans le navigateur avec le paquet React officiel ou les mêmes principes en JavaScript brut (voir l’article dédié HTML, CSS et JavaScript bruts).

Important : Chaque extrait de code utilise des espaces réservés (your-client-id, https://app.example.com, exemples de points de terminaison). Ne copiez pas les noms de cookies, chemins ou variables d’environnement depuis le site d’une autre entreprise.

Détails faisant autorité sur le paquet : @intastellar/signin-sdk-react sur npm — étapes d’installation, IntastellarButton, useIntastellar, configuration.

L’aide pour les produits Intastellar se trouve sur help.intastellarsolutions.com. Si d’anciens liens pointent encore vers d’anciens hôtes développeur, utilisez des redirections HTTPS ici et mettez à jour les URI de connexion / de redirection autorisées sur votre client Intastellar pour qu’elles correspondent aux URL réelles.

Ce dont vous avez besoin

  • HTTPS en production.
  • Fenêtres contextuelles autorisées pour votre site (le SDK ouvre Intastellar dans une fenêtre).
  • Un client ID enregistré (et tout autre champ exigé par votre enregistrement).
  • Un plan pour qui maintient la dépendance (npm install, mises à jour).

Comportement (version courte)

La connexion est en général par fenêtre contextuelle : Intastellar affiche l’interface de connexion, puis votre page reçoit un résultat et le SDK peut définir des cookies first-party sur votre domaine. Ce n’est pas la même chose que de construire à la main la redirection OAuth code d’autorisation et le POST de jeton ; pour cela, voir Flux du code d’autorisation.

Questions fréquentes

Avons-nous besoin de React ?

Non. Pour HTML/CSS/JS uniquement, utilisez HTML, CSS et JavaScript bruts — même comportement sous-jacent.

Fenêtre contextuelle bloquée ou fenêtre vide

Les navigateurs bloquent souvent window.open tant que l’utilisateur n’a pas interagi avec votre page, ou si votre site n’est pas autorisé à ouvrir des fenêtres contextuelles. Voir Déconnexion, erreurs et dépannage.

Où mettons-nous le client ID ?

Dans la configuration fournie par votre build ou runtime (env publique, fichier de config, etc.). Évitez de committer de vrais identifiants dans un dépôt public.

Nous avons besoin de pages rendues côté serveur et du SDK

Après l’exécution du rappel du SDK, les équipes appellent souvent leur propre backend pour créer un cookie de session HttpOnly. Les routes et noms de cookies exacts relèvent de votre conception — voir Sessions, cookies et jetons et le modèle optionnel ci-dessous.

Outils connectés sur ce site d’aide

Un site utilisant cette pile peut proposer des outils supplémentaires après connexion (par exemple des clés API). La façon dont cela est stocké et sécurisé est spécifique à l’environnement et relève de vos runbooks, pas de cet article.

Pour les développeurs — React (@intastellar/signin-sdk-react)

Installation (voir le readme npm) :

npm install @intastellar/signin-sdk-react

Composant bouton (exemple)

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

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

Optionnel : votre propre session serveur (modèle)

  1. Après l’exécution du rappel du SDK, appelez votre backend (exemple uniquement : POST https://api.example.com/v1/session) avec une charge minimale de profil que votre serveur accepte.
  2. Le serveur établit la confiance selon votre modèle de sécurité (par ex. vérifier les jetons si c’est documenté pour votre produit).
  3. Le serveur définit un cookie de session opaque, HttpOnly, Secure pour votre application.

Cookies sur votre origine

Le SDK peut définir des cookies first-party sur l’origine de votre site. Les noms et durées de vie viennent du SDK et de la référence technique d’Intastellar — utilisez le readme npm et vos documents d’intégration, pas des valeurs copiées depuis des sites sans rapport.

Étapes suivantes

Last updated