Démonstration phare : connexion avec Scrydon + Chat API

Cette démo est celle à présenter lorsque vous souhaitez montrer à quelqu'un — un prospect, un intervenant interne, un nouveau développeur dans votre équipe — que l'IdP Scrydon fait réellement quelque chose d'utile. Elle couvre l'ensemble de la boucle :

1. Un utilisateur accède à une application externe (pas Scrydon).
2. L'application le redirige vers Scrydon pour se connecter.
3. Scrydon émet un jeton d'accès scopé à chat.
4. L'application utilise ce jeton pour dialoguer avec un déploiement de chat Scrydon au nom de l'utilisateur connecté, avec une isolation complète par tenant et espace de travail.

Si tout fonctionne, l'IdP, le flux de consentement, l'application des scopes, le binding d'espace de travail et le serveur de ressources Chat sont tous correctement câblés.

Ce que vous allez construire

Une application React monopage avec trois écrans :

• Connexion — un bouton qui démarre le flux OIDC.
• Tableau de bord connecté — affiche le nom et l'e-mail de l'utilisateur depuis le jeton d'identité.
• Panneau de chat — diffuse en streaming les réponses d'un déploiement de chat Scrydon en utilisant le jeton d'accès de l'utilisateur.

L'application tourne sur http://localhost:3000 en développement. Vous pouvez la déployer sur n'importe quel hébergeur statique par la suite.

Prérequis

• Un espace de travail Scrydon avec au moins un déploiement de chat publié. Si vous n'en avez pas, créez-en un depuis apps → chat → Nouveau chat et publiez le déploiement.
• Une Mini App enregistrée avec le scope chat activé et l'URI de redirection définie sur http://localhost:3000/callback. Voir Enregistrer un client OAuth.
• Node.js 20+ et un gestionnaire de paquets (bun / pnpm / npm).

Option A — Utiliser le prompt de boilerplate intégré

Lorsque vous cliquez sur Enregistrer une Mini App, le panneau « Démarrer » de Scrydon vous propose un prompt prêt à l'emploi que vous pouvez coller dans Lovable, v0 ou Bolt pour créer une application fonctionnelle. C'est le chemin le plus rapide — le prompt inclut déjà l'ID client correct, l'URI de redirection, les scopes et l'URL de base.

Option B — Scaffold manuel (implémentation de référence)

Si vous souhaitez comprendre ce que fait le boilerplate — ou si vous intégrez dans une application existante — voici l'implémentation minimale viable.

1. Installer les dépendances

bun create vite@latest scrydon-demo --template react-ts
cd scrydon-demo
bun add oidc-client-ts

oidc-client-ts est une bibliothèque OIDC bien maintenue qui gère PKCE, le rafraîchissement silencieux et le stockage d'état pour vous. Toute autre bibliothèque OIDC (p. ex. openid-client pour les backends Node) fonctionne de manière équivalente.

2. Configurer le client OIDC

// src/auth.ts
import { UserManager, WebStorageStateStore } from "oidc-client-ts";

const AUTH_URL = import.meta.env.VITE_AUTH_URL; // p. ex. https://staging.api-platform.scrydon.com
const CLIENT_ID = import.meta.env.VITE_CLIENT_ID;

export const userManager = new UserManager({
  authority: AUTH_URL + "/api/auth",
  client_id: CLIENT_ID,
  redirect_uri: "http://localhost:3000/callback",
  response_type: "code",
  scope: "openid profile email chat",
  userStore: new WebStorageStateStore({ store: window.sessionStorage }),
  // PKCE est le comportement par défaut pour les clients publics
});

L'URL authority est le chemin de base d'authentification Scrydon — la bibliothèque ajoute .well-known/openid-configuration elle-même.

3. Câbler les routes de connexion + callback

// src/App.tsx
import { useEffect, useState } from "react";
import { userManager } from "./auth";
import type { User } from "oidc-client-ts";
import { ChatPanel } from "./ChatPanel";

export function App() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    // Gérer le callback OAuth sur /callback
    if (window.location.pathname === "/callback") {
      userManager.signinRedirectCallback().then((u) => {
        setUser(u);
        window.history.replaceState({}, "", "/");
      });
      return;
    }
    userManager.getUser().then(setUser);
  }, []);

  if (!user) {
    return (
      <button onClick={() => userManager.signinRedirect()}>
        Se connecter avec Scrydon
      </button>
    );
  }

  return (
    <div>
      <header>
        <p>Connecté en tant que {user.profile.email}</p>
        <button onClick={() => userManager.signoutRedirect()}>Se déconnecter</button>
      </header>
      <ChatPanel accessToken={user.access_token} />
    </div>
  );
}

4. Appeler l'API Chat avec le jeton d'accès

// src/ChatPanel.tsx
import { useState } from "react";

const AGENTIC_URL = import.meta.env.VITE_AGENTIC_URL; // p. ex. https://staging.agentic.scrydon.com
const DEPLOYMENT_ID = import.meta.env.VITE_DEPLOYMENT_ID;

export function ChatPanel({ accessToken }: { accessToken: string }) {
  const [messages, setMessages] = useState<
    Array<{ role: "user" | "assistant"; content: string }>
  >([]);
  const [input, setInput] = useState("");

  async function send() {
    const next = [...messages, { role: "user" as const, content: input }];
    setMessages(next);
    setInput("");

    const res = await fetch(
      `${AGENTIC_URL}/api/chat/deployments/${DEPLOYMENT_ID}/messages`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        },
        body: JSON.stringify({ messages: next }),
      },
    );
    const data = await res.json();
    setMessages([...next, { role: "assistant", content: data.reply }]);
  }

  return (
    <div>
      <ul>
        {messages.map((m, i) => (
          <li key={i}>
            <strong>{m.role}:</strong> {m.content}
          </li>
        ))}
      </ul>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && send()}
      />
      <button onClick={send}>Envoyer</button>
    </div>
  );
}

5. Variables d'environnement

Créez .env.local :

VITE_AUTH_URL=https://staging.api-platform.scrydon.com
VITE_AGENTIC_URL=https://staging.agentic.scrydon.com
VITE_CLIENT_ID=coller-depuis-les-apps-enregistrees
VITE_DEPLOYMENT_ID=coller-depuis-votre-deploiement-de-chat

Copiez les URLs depuis l'onglet Identity de Paramètres → Plateforme → Identité, l'ID client depuis le panneau « Démarrer » des Apps enregistrées, et l'ID de déploiement depuis la page de détail du déploiement de chat.

6. Lancer

bun dev

Ouvrez http://localhost:3000, cliquez sur Se connecter avec Scrydon, complétez le flux et essayez un message de chat.

Ce qu'il faut montrer lors d'une démo en direct

Argumentaire pour un prospect externe

« Votre portail de support permet aux clients de se connecter avec leur identité Scrydon. Comme nous sommes l'IdP, vous ne stockez pas de mots de passe, vous ne gérez pas le MFA, et vous ne maintenez pas votre propre table d'utilisateurs. Chaque token que nous émettons porte l'espace de travail et l'environnement auquel appartient l'utilisateur, de sorte que le chat avec lequel il interagit est exactement celui que l'administrateur de son tenant a configuré — pas de fuite inter-tenant, appliqué à la frontière de l'API. »

Dépannage

L'utilisateur se connecte mais l'app ne peut pas appeler l'API Chat

• Assurez-vous que le scope chat figure dans la liste des Scopes autorisés de votre Mini App et que votre client OIDC l'a demandé. openid profile email seul ne suffit pas pour appeler les API de ressources.
• Décodez le jeton d'accès (s'il s'agit d'un JWT) ou appelez /oauth2/introspect pour confirmer que chat est présent dans la revendication scope.

401 depuis le déploiement de chat

• L'en-tête Authorization: Bearer ... doit utiliser le jeton d'accès, pas le jeton d'identité. Le jeton d'identité identifie l'utilisateur auprès du client ; le jeton d'accès autorise les appels aux API de ressources.

Erreur CORS lors de l'appel à l'app agentic

• La liste d'autorisations CORS de l'app agentic est dérivée des URIs de redirection enregistrées. Votre origine locale (http://localhost:3000) doit figurer sur votre Mini App ; si ce n'est pas le cas, ajoutez-la à la liste des URIs de redirection (c'est la partie origine que CORS applique).

L'écran de consentement apparaît à chaque fois, pour chaque utilisateur

• C'est le comportement attendu pour les clients non approuvés. Seule l'application agentic Scrydon de première partie est dans l'ensemble des clients approuvés par défaut. Si vous souhaitez que votre propre Mini App ignore le consentement (par exemple, un outil interne d'entreprise), contactez le support Scrydon pour l'ajouter à l'ensemble approuvé pour votre tenant.