Caputchin
Premiers pas

Crée ton compte et ta première clé de site

C'est la première de trois courtes leçons. Ensemble, elles te mènent d'un compte vide à une vraie épreuve de jeu protégeant un formulaire en ligne.

Tu travailles chez BananaSeed, et le formulaire de contact de ton site croule sous le spam : des bots et des agents IA scriptés y tirent des envois indésirables 24 heures sur 24. Tu veux Caputchin posté devant ce formulaire pour que seuls de vrais humains passent.

Voici comment Caputchin fait ça. Quand quelqu'un ouvre ton formulaire de contact, Caputchin lui donne une épreuve rapide dans le navigateur (une simple case à cocher, ou un court jeu). La réussir donne un token à usage unique, que la page envoie avec l'envoi du formulaire. Ton serveur vérifie ensuite ce token auprès de Caputchin avant de faire confiance à la requête. Un bot qui POSTe directement vers ton endpoint n'a jamais réussi d'épreuve, donc il n'a pas de token valide, et ton serveur le refuse.

Le site de BananaSeed est un frontend React avec un backend Node.js tournant sous Express, donc les deux prochaines leçons te donnent du code fonctionnel pour exactement cette stack. Les mêmes étapes se transposent à n'importe quel framework ou langage ; seule la syntaxe change.

D'abord, BananaSeed a besoin d'un compte et d'une clé de site. Environ deux minutes, pas de carte bancaire, rien à installer pour l'instant.

Ce que tu auras à la fin

  • Un compte Caputchin.
  • Une clé de site, qui est en réalité une paire de valeurs :
    • une clé publique (cpt_pub_...) qui va dans ta page,
    • un secret (cpt_sec_...) qui reste sur ton serveur.

1. Connecte-toi (ça crée aussi ton compte)

Va sur caputchin.com/login. Il n'y a pas d'étape d'inscription séparée : ta première connexion avec un e-mail est ce qui crée le compte. Choisis ce que tu préfères :

  • Recevoir un lien de connexion par e-mail, puis clique le lien dans l'e-mail, ou
  • Continuer avec GitHub, ou
  • Continuer avec Google.

Nous ne lisons jamais que ton adresse e-mail vérifiée.

Une fois entré, remarque que la barre d'adresse affiche /app/troops. Caputchin te dépose directement dans tes équipes.

2. Ouvre ton équipe Personnelle

Avant de créer une clé de site, il aide de savoir où elle vit. Presque tout dans Caputchin se trouve dans une équipe. Une équipe est un espace de travail, et c'est ce qui possède tes clés de site, la personnalisation des jeux que ces clés partagent, et (sur les offres payantes) les coéquipiers que tu invites à les gérer avec toi. Caputchin est bâti autour des équipes à dessein : une clé de site appartient toujours à une équipe, jamais à ton compte directement, et c'est ce qui permet plus tard à toute une équipe de gérer les mêmes clés sans partager un identifiant. La facturation et les sièges se trouvent au niveau du compte, au-dessus de tes équipes, pas à l'intérieur d'aucune d'elles.

Chaque compte démarre avec une équipe nommée Personal, qui n'est que toi. C'est tout ce dont tu as besoin pour ce guide. Quand tu la dépasses, tu crées des équipes partagées et tu invites des membres, mais rien plus bas ne change.

Clique Personal pour l'ouvrir. Une équipe s'ouvre directement sur ses Clés de site, donc c'est là que tu atterris. Remarque la barre d'adresse : /app/troops/<id>/site-keys. La clé que tu t'apprêtes à créer est imbriquée sous l'équipe, exactement la relation de propriété qu'on vient de décrire.

3. Crée ta première clé de site

Clique Créer une clé de site, donne-lui un nom comme My site, et clique Créer. Un nom est tout ce qu'il demande.

Caputchin te montre deux valeurs :

ValeurRessemble àOù elle va
Clé publiquecpt_pub_...Dans ta page, sur l'élément du widget. Sans danger à livrer au navigateur.
Secretcpt_sec_...Sur ton serveur uniquement. Ne le mets jamais dans du code côté client.

Remarque le bandeau : « Copie le secret maintenant. Nous ne le montrerons plus jamais. » Copie le secret et garde-le quelque part où ton serveur peut le lire (une variable d'environnement, ton gestionnaire de secrets). Tu peux toujours revoir la clé publique sur la page Intégration de la clé, mais le secret n'est montré qu'une seule fois. Si tu le perds, tu le fais tourner plutôt que de le récupérer.

Une clé toute neuve n'a encore aucune restriction d'origine, et c'est exactement ce qui permet à ta page de test de fonctionner en local dans la prochaine leçon. Plus sur les paramètres d'une clé dans Clés de site.

Ce qui vient de se passer

ÉtapeRésultat
Première connexionNavigateurTon compte est créé et une équipe Personnelle est prête.
Créer une clé de siteTableau de bordUne clé publique pour la page et un secret pour ton serveur.

Tu as un compte et ta première clé de site, la fondation sur laquelle tout le reste se construit. Bien joué. 🎉

Suite

Tu as tes clés. Il est temps de poser le widget sur une page et d'assister à une vraie vérification.

Continue vers Ajouter le widget à ton site.

Sur cette page