--- type: tutorial title: Ajouter un jeu depuis le Marketplace summary: Parcours le Marketplace, installe un jeu sur ta clé de site, rends-le obligatoire, puis échange un élément pour que les visiteurs résolvent une vraie épreuve de jeu jouable. --- Le formulaire de contact de BananaSeed a déjà un widget fonctionnel de la [leçon précédente](/docs/getting-started/add-the-widget). Dans cette dernière leçon, on remplace la simple case à cocher par un vrai jeu jouable que chaque visiteur doit résoudre. Pourquoi se donner cette peine si la case à cocher fonctionne déjà ? La case à cocher est le minimum discret. Un jeu transforme le moment inévitable « prouve que tu es un humain » en quelque chose qu'un visiteur apprécie au lieu d'endurer, et c'est la partie qui tient bon face aux attaquants raffinés. L'IA d'aujourd'hui sait cliquer une case et résoudre des grilles d'images, mais un vrai jeu est l'unique épreuve où elle ne peut pas tricher, parce qu'aucune machine ne joue comme un humain. 💪 Cette leçon est un peu plus consistante que la pose du widget : tu choisis un jeu, tu l'installes sur ta clé de site et tu actives le gate qui le rend obligatoire. La récompense, c'est que le jeu devient la vraie chose qui se dresse entre un bot et ton formulaire, pas une déco qu'on peut sauter. La mécanique des tokens en dessous est identique, donc ton backend ne change pas du tout. Tout ici fonctionne sur l'offre gratuite. ## Ce que tu auras à la fin - Un jeu du Marketplace, installé sur ta clé de site. - Ce jeu rendu obligatoire pour vérifier, de sorte qu'une simple case à cocher ne passe plus. - Le même formulaire de contact, maintenant gardé par le jeu, avec ta vérification backend inchangée. ## 1. Choisis un jeu dans le Marketplace Le [Marketplace](/marketplace) est le catalogue public dans lequel tu choisis. Ouvre-le et parcours : filtre par catégorie ou par ce qu'un jeu prend en charge (tactile, clavier, lecteur d'écran, son), pour accorder un jeu à ton public. Chaque jeu a sa propre page avec un aperçu et un id comme `caputchin/games/leaf-memory`. Le parcours est ouvert, sans file d'approbation : chaque jeu du catalogue est prêt à l'emploi. Choisis-en un et copie son id. On prend **Leaf Memory** (`caputchin/games/leaf-memory`) pour le reste de cette leçon. ## 2. Installe le jeu sur ta clé de site Avant qu'un jeu puisse garder une clé, tu l'installes sur cette clé. L'installation demande à Caputchin de prendre un instantané épinglé et vérifié du jeu, pour que la version exacte que tes visiteurs jouent soit celle que Caputchin pourra rejouer plus tard en vérifiant un résultat. Dans le tableau de bord, ouvre ton équipe, ouvre ta clé de site et va sur sa page **Jeux**. Dans le panneau **Ajouter un jeu**, cherche le jeu dans le champ **Jeu du Marketplace** et choisis-le dans la liste (ou clique **Ouvrir**). Caputchin enregistre le jeu, prend son instantané et te place sur la page de réglages du jeu. Le jeu apparaît maintenant sous **Jeux enregistrés** de retour sur la page Jeux, prêt à garder la clé. Presque chaque jeu du Marketplace est opérationnel dès que tu l'enregistres, les jeux maison toujours ; si un jeu rare affiche ici un badge **Non rejouable**, il ne peut pas gater tant que l'auteur n'a pas livré un build rejouable. Tu peux ajouter plus d'un jeu. Ajoute-les sur une seule clé de site, ou ajoute-les une fois sur l'équipe pour partager le même ensemble entre chaque clé qu'elle contient. Ta clé de site a maintenant un jeu installé et vérifié. Ensuite, on le rend obligatoire. 🎉 ## 3. Rends un jeu obligatoire pour vérifier Installer un jeu le rend disponible ; ça ne force encore personne à le jouer. C'est le gate qui fait ça. Sur ta clé de site, ouvre sa page **Sécurité** et active **Exiger un jeu pour vérifier**. Désormais, chaque visiteur de cette clé doit jouer l'un de ses jeux installés pour passer, et résoudre une simple case à cocher ne suffit plus. (Tu ne peux pas activer le gate tant qu'au moins un jeu n'est pas installé, c'est pourquoi l'étape 2 vient d'abord.) Avec le gate activé, Caputchin choisit quel jeu installé reçoit chaque visiteur, et le délivre via un ticket signé à usage unique. Un visiteur, ou un bot, ne peut pas choisir le jeu, le sauter ni l'échanger contre un plus facile : le choix se fait du côté de Caputchin, frais pour chaque session. C'est exactement ce qui fait du jeu une vraie protection plutôt qu'un agrément. Tu gères tout un ensemble de clés ? Une équipe a sa propre page **Sécurité** avec **Exiger un jeu sur chaque clé de site**, ce qui active le gate sur chaque clé de l'équipe d'un coup. ## 4. Échange l'élément Maintenant la page. Les jeux s'affichent sur un autre élément, ``. Le `import "@caputchin/widget"` que tu as déjà ajouté l'enregistre aussi, donc il n'y a rien de nouveau à installer. Parce que la clé exige maintenant un jeu, le `` à case-seule ne passe plus dessus, donc cet échange est la dernière étape obligatoire. Dans ton formulaire de contact, change l'unique ligne : ```jsx // before // after ``` Tu ne passes aucun id de jeu. Parce que la clé exige un jeu, Caputchin en délivre un de tes jeux installés et le choisit à chaque visite. Tu préfères en épingler un précis ou limiter la rotation à un sous-ensemble ? Nomme-les (chacun doit être installé sur la clé) : ```jsx // always Leaf Memory // a random one of these two per visit ``` Nommer un jeu qui n'est pas installé sur la clé ne le charge pas : le widget signale que le gate n'a pas un tel jeu, plutôt que de laisser passer le visiteur. Pour contrôler comment le jeu se place dans ta page (un panneau inline, un modal, ou fullscreen) et à quelle taille il s'affiche, voir [Taille et mise en page](/docs/references/widget-sizing). ## 5. Essaie-le Recharge ton app. La case à cocher a disparu : le visiteur joue maintenant le jeu dans un iframe en bac à sable. Quand il gagne, le widget ajoute au formulaire le même champ caché `caputchin-token`, donc ta lecture de `FormData` et ta vérification backend `/siteverify` restent toutes deux inchangées par rapport à la leçon précédente. Ouvre les statistiques de ta clé de site, et tu vois les sessions traverser le même entonnoir qu'avant. Tu peux filtrer toute la vue sur un seul jeu pour en comparer un à un autre. Le formulaire de contact de BananaSeed est maintenant gardé par un vrai jeu jouable que chaque visiteur doit résoudre, et chaque envoi est toujours vérifié sur ton serveur. Tu l'as livré. 🎉 Tu es passé d'un compte vide à un formulaire vérifié et gardé par un jeu. ## Ce qui vient de se passer | Étape | Où | Résultat | |---|---|---| | Choisir un jeu | Marketplace | Tu as un id de jeu comme `caputchin/games/leaf-memory`. | | L'installer sur la clé | Tableau de bord, la page Jeux de la clé | Caputchin épingle un instantané vérifié ; le jeu apparaît sous Jeux enregistrés, prêt à gater (jeux maison immédiatement). | | Exiger un jeu | Tableau de bord, la page Sécurité de la clé | Chaque visiteur doit résoudre un jeu installé, et Caputchin choisit lequel. | | Échanger pour `` | Ta page | Le jeu charge dans un iframe en bac à sable et ajoute le même `caputchin-token`, donc ton backend reste inchangé. | ## Ce qui vient ensuite Voici les domaines vers lesquels tu te tournes le plus probablement à partir d'ici : - [Personnaliser les jeux](/docs/game-customization/overview) : règle la langue, le skin et la difficulté de tes jeux. - [Sécurité](/docs/site-keys/security) : le gate de jeu, la difficulté du proof of work, les origines et le reste de la protection d'une clé. - [Statistiques et sessions](/docs/site-keys/statistics) : lis l'entonnoir et compare un jeu à un autre. - [Gestion du compte](/docs/account-management/overview) : connexion, jetons d'accès, facturation et sièges. - [Équipes](/docs/troops/overview) : organise tes clés de site et invite, sur une offre payante, ton équipe.