Installer AubeCaptcha sur votre site

Écrit pour quelqu'un qui n'est pas informaticien. Comptez dix minutes, dont une partie que vous pouvez transmettre telle quelle à la personne qui s'occupe de votre site.

Ce que ça demande vraiment

Protéger un formulaire, c'est deux gestes, et il faut les deux.

  1. Dans la page qui affiche le formulaire : coller deux lignes. Ce geste-là est du copier-coller, vous pouvez le faire vous-même.
  2. Dans le programme qui reçoit le formulaire : ajouter trois lignes qui demandent à AubeCaptcha si le visiteur a bien passé le test. Ce geste demande quelqu'un qui touche au code de votre site.
Le point à ne pas rater Si vous ne faites que le premier geste, la protection est décorative : un robot ignore la page et écrit directement à votre serveur. C'est la deuxième partie qui refuse l'envoi. Un cadenas posé sur une porte qu'on n'a pas fermée à clé n'arrête personne.

Étape 1, créer votre site

Connectez-vous au tableau de bord avec votre compte AubeMail, puis remplissez le formulaire « Nouveau site » :

ChampQuoi écrire
Nom Ce qui vous permet de vous y retrouver. Exemple : « Formulaire de contact de la boutique ».
Domaines autorisés L'adresse de votre site, sans le https://. Exemple : ma-boutique.com. Vos sous-domaines sont couverts. À remplir : c'est ce qui empêche quelqu'un d'autre de se servir de votre clé.
Mode de défi Laissez « Preuve de travail ». Le visiteur coche une case et ne voit rien d'autre. Le mode « Code image » n'a de sens que si vous voulez un obstacle visible.
Effort demandé « Normal » convient à presque tout. « Strict » pour un formulaire déjà harcelé par des robots, au prix d'une seconde ou deux d'attente pour le visiteur.

Vous obtenez alors deux clés. La sitekey est publique, elle vit dans votre page. Le secret ne doit jamais apparaître dans une page web : il reste sur votre serveur, comme un mot de passe.

Étape 2, coller deux lignes dans votre page

Le tableau de bord vous donne ce bloc déjà rempli avec votre clé, sous le bouton « Code à coller ». Il se place à l'intérieur de votre formulaire, juste avant le bouton d'envoi :

<script src="https://captcha.aubeetoilee.com/widget.js" async defer></script>
<div class="aubecaptcha" data-sitekey="VOTRE_SITEKEY"></div>

C'est tout pour la page. La case « Je ne suis pas un robot » apparaît, et le formulaire reçoit tout seul un jeton invisible une fois le test passé.

Site en anglais ou en espagnol

Le widget suit la langue de votre page (l'attribut lang de la balise html). Pour l'imposer, ajoutez data-lang="es" à côté de la sitekey. Français, anglais, espagnol.

Aux couleurs de votre site

La case s'affiche en clair, en police système, avec des coins à peine arrondis : un aspect neutre qui passe sur presque toutes les pages. Pour l'accorder à votre charte, ouvrez « Code à coller » dans le tableau de bord : le panneau « Apparence » montre la case dans ses trois états (à cocher, en cours, vérifiée) et met le code à jour pendant que vous réglez. Vos choix sont mémorisés pour ce site ; ils voyagent dans le code collé, donc recollez-le après un changement.

AttributEffet
data-theme="dark" Fond sombre. Avec auto, la case suit le réglage clair ou sombre de la personne qui visite.
data-color="#8c2f2f" Couleur d'accent : la coche, le bouton, le contour au clavier. Le texte du bouton passe en blanc ou en noir selon la couleur.
data-bg, data-text, data-border Fond, texte et bordure de la case.
data-radius="12" Rayon des coins en pixels, de 0 (carrés) à 32.
data-size="compact" Version resserrée, pour une barre latérale ou un pied de page.
data-font="inherit" Reprend la police de votre page au lieu de la police système.
data-width="100%" Largeur maximale, en pixels ou en pourcentage (320 px par défaut).
data-brand="discret" Réduit la mention AubeCaptcha au seul lien.

Une valeur mal écrite est simplement ignorée : la case garde alors son aspect par défaut. Le panneau signale aussi un contraste trop faible entre le texte et le fond.

Sur WordPress, Wix, Squarespace

Ces outils ont tous un bloc nommé « HTML personnalisé », « Code » ou « Intégration ». Collez-y les deux lignes. Si vous ne le trouvez pas, c'est le moment d'appeler la personne qui a monté le site : pour elle, c'est l'affaire d'une minute.

Formulaire construit en JavaScript (React, Vue, Next...)

Plutôt que d'exiger le clic sur la case avant l'envoi, demandez le jeton au moment de l'envoi : en preuve de travail, la personne n'a rien à faire.

const jeton = await window.aubecaptcha.execute(bloc); // bloc : la div .aubecaptcha
fetch("/inscription", { method: "POST", body: JSON.stringify({ ...champs, jeton }) });
// Refus du serveur (jeton consommé) : window.aubecaptcha.reset(bloc)

Le bloc émet aussi aubecaptcha:token, aubecaptcha:expired et aubecaptcha:error. Sans JavaScript à vous, data-callback et data-expired-callback nomment des fonctions à appeler.

Étape 3, la partie à transmettre

Envoyez ce qui suit à la personne qui s'occupe de votre site, avec votre secret. Elle reconnaîtra : c'est la même mécanique que reCAPTCHA de Google, en trois lignes.

Python (Flask, Django)

import requests

r = requests.post("https://captcha.aubeetoilee.com/api/verify", json={
    "secret": "VOTRE_SECRET",
    "token": request.form.get("aubecaptcha-token"),
}, timeout=10)
if not r.json().get("success"):
    abort(400, "Vérification anti-robot refusée")

PHP (dont WordPress)

$reponse = wp_remote_post("https://captcha.aubeetoilee.com/api/verify", [
  "body" => [
    "secret"   => "VOTRE_SECRET",
    "response" => $_POST["aubecaptcha-token"] ?? "",
  ],
  "timeout" => 10,
]);
$ok = json_decode(wp_remote_retrieve_body($reponse), true)["success"] ?? false;
if (!$ok) { wp_die("Vérification anti-robot refusée"); }

Node (Express)

const r = await fetch("https://captcha.aubeetoilee.com/api/verify", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    secret: process.env.AUBECAPTCHA_SECRET,
    token: req.body["aubecaptcha-token"],
  }),
});
if (!(await r.json()).success) { return res.status(400).send("Refusé"); }

Un jeton ne sert qu'une fois et vit cinq minutes. La réponse contient aussi hostname, le domaine d'où le test a réellement été passé : le comparer au vôtre rend un jeton volé inutilisable.

Vérifier que c'est bien branché

Un test, sans connaissances techniques. Ouvrez votre formulaire, remplissez-le, ne cochez pas la case, et envoyez.

Ensuite, le tableau de bord affiche les compteurs de chaque site : défis servis, résolus, échoués, et vérifications faites par votre serveur. Si la colonne « vérifications serveur » reste à zéro alors que les autres montent, l'étape 3 n'est pas en place.

Un CAPTCHA sert-il encore à quelque chose face à l'IA ?

Question honnête, réponse honnête : plus sous sa forme d'énigme. Reconnaître des feux de circulation ou déchiffrer un texte tordu, une machine le fait aujourd'hui mieux qu'un humain fatigué, et des services vendent la résolution en masse pour quelques sous. Un test d'intelligence ne sépare plus l'humain du robot.

Ce qui fonctionne encore, c'est de faire payer chaque tentative. C'est le principe du mode par défaut d'AubeCaptcha : le navigateur du visiteur effectue un petit calcul avant d'obtenir son jeton. Une personne ne s'en aperçoit pas. Un robot qui vise cent mille inscriptions doit financer cent mille calculs, plus le temps, plus les adresses nécessaires pour ne pas être freiné. L'attaque ne devient pas impossible, elle devient non rentable, et c'est précisément l'objectif.

Deux conséquences pratiques. Le réglage « Effort demandé » est votre levier : si un formulaire est visé, montez-le. Et un CAPTCHA ne remplace jamais les limites de votre propre application : gardez un plafond de tentatives sur une page de connexion, il protège d'autre chose.

Ce que ça ne fait pas

Aucun cookie n'est déposé, aucune donnée n'est revendue, les adresses sont tronquées avant journalisation et les traces sont purgées sous 24 heures.