Widget Captcha
Le widget Captcha protège un formulaire contre les robots. Il affiche une image avec un code aléatoire et un champ où l'utilisateur recopie ce code ; le serveur vérifie le code saisi, et un code faux est refusé avec le message Error du widget. Utilisez-le sur les pages ouvertes à tous, les formulaires d'inscription ou de contact, ou avant de lancer un processus depuis une page publique. Lisez les limites de la version 8.6 avant de compter sur lui.
Ajouter un CaptchaLien direct vers Ajouter un Captcha
Le Captcha se trouve dans le groupe Advanced de la palette de widgets (ou tapez captcha dans Search widgets) ; sa description indique Image code that blocks bots. (code en image qui bloque les robots). Faites-le glisser sur la page, puis sélectionnez-le pour ouvrir sa configuration.
Sur le canevas du builder, le widget n'affiche qu'un espace réservé (une icône d'image et le mot Captcha) au-dessus du champ de saisie : la vraie image est dessinée à l'ouverture de la page.
ConfigurationLien direct vers Configuration
GlobalLien direct vers Global
- Name : le libellé du champ. Il sert aussi dans le message affiché quand le champ est vide : le nom suivi de est obligatoire (par exemple Code de sécurité est obligatoire).
- Variable/Model : la variable qui reçoit le texte saisi par l'utilisateur. Elle ne contient jamais la réponse attendue.
- Error : le message affiché sous le champ quand le code saisi est faux, par exemple Code incorrect, réessayez. Le Captcha en a besoin pour bloquer quoi que ce soit : quand Error est vide (c'est le cas quand le widget vient d'être posé), un code faux encadre le champ en rouge, sans aucun texte, mais n'empêche pas la validation du formulaire — l'action continue comme si le code était juste. Comme le Name, il est traduit avec le dictionnaire de la page (voir Multilangue).
- Size : le nombre de caractères du code (4 par défaut). Le builder accepte 4 ou plus ; le serveur dessine au plus 10 caractères, une valeur plus grande donne donc un code de 10 caractères.
- Colored : dessine chaque caractère dans sa propre couleur au lieu du gris.
ValidationLien direct vers Validation
Comme pour les autres champs, la carte Validation indique, pour chaque écran, si le Captcha est disponible, visible, obligatoire ou désactivé (colonnes Available, Visible, Required et Disable), avec Advanced Setting pour les conditions (voir Règles de Validation).
Un Captcha vide est toujours refusé quand il est vérifié, même si Required est désactivé : l'utilisateur voit le nom suivi de est obligatoire. Pour ne pas vérifier le Captcha sur un écran, rendez-le indisponible ou invisible sur cet écran.
RulesLien direct vers Rules
Add rule ajoute des règles de validation supplémentaires au champ, comme pour toute saisie.
StyleLien direct vers Style
- Placeholder : l'indication affichée dans le champ vide, par exemple Recopiez le code ci-dessus.
- Width : la largeur du widget (
100%par défaut). - Class : les classes CSS du widget ; le bouton pinceau définit des classes conditionnelles. Les autres réglages de style se font dans les paramètres de la page.
Fonctionnement à l'exécutionLien direct vers Fonctionnement à l'exécution
- L'image (150 × 50 pixels) est dessinée par le serveur à chaque ouverture de la page. Le code mélange majuscules, minuscules et chiffres, barrés d'une ligne de bruit.
- La flèche circulaire à droite de l'image dessine un nouveau code et vide le champ. Les utilisateurs peuvent cliquer dessus quand le code est difficile à lire.
- Le code saisi est envoyé au serveur pour vérification quand l'utilisateur quitte le champ, et vérifié de nouveau à chaque validation du formulaire qui contient le Captcha — par exemple par les actions startProcess ou update. Un code faux encadre le champ en rouge et affiche le message Error dessous. Que l'action s'arrête ou non dépend des limites ci-dessous.
- La comparaison respecte la casse :
aB3xetab3xsont deux réponses différentes. - Les messages sont :
- champ vide : le nom suivi de est obligatoire, dans la langue de la page ;
- code faux : le message Error (aucun texte quand Error est vide) ;
- code expiré : Le captcha a expiré : un nouveau captcha a été généré, veuillez le saisir. Une nouvelle image est dessinée en même temps (voir plus bas).
Limites de la version 8.6Lien direct vers Limites de la version 8.6
- La validation du formulaire n'attend pas la réponse du serveur. Quand une action valide le formulaire alors que le code saisi est encore en cours de vérification — typiquement quand l'utilisateur saisit le code puis clique tout de suite sur le bouton —, l'action continue même si le code est faux, et les autres champs du même formulaire ne sont pas vérifiés avant elle non plus. L'action ne s'arrête que sur un code que le serveur a déjà refusé (champ en rouge avec le message Error dessous).
- Sans message Error, un code faux n'est jamais refusé : le champ passe en rouge, mais le formulaire reste valide (voir Error plus haut).
Ne comptez pas sur le Captcha seul pour arrêter un formulaire : vérifiez aussi les données côté serveur.
Comment le code est vérifiéLien direct vers Comment le code est vérifié
Jusqu'à la version 8.5, la réponse attendue était envoyée au navigateur avec l'image et comparée dans la page. Depuis la version 8.6, la réponse ne quitte jamais le serveur.
- Quand la page est dessinée, elle ne reçoit que l'image et un jeton signé ; la réponse elle-même n'est pas dans la page.
- Pour vérifier un code, la page envoie le texte saisi et le jeton au serveur (
POST /api/v1/captcha/verify), qui répond seulement si le code est valide. Chaque valeur saisie n'est vérifiée qu'une fois par image. - Le bouton de rafraîchissement demande au serveur une nouvelle image et un nouveau jeton (
POST /api/v1/captcha). Les deux appels sont publics : ils fonctionnent aussi pour les visiteurs non connectés. - Rien n'est stocké sur le serveur : le jeton porte sa propre signature et sa date d'expiration, la vérification fonctionne donc sur les serveurs à plusieurs processus et après un redémarrage.
- Un captcha reste valable 12 heures. Quand une page est restée ouverte plus longtemps, la vérification suivante dessine d'elle-même un nouveau captcha et demande à l'utilisateur de le saisir (message de code expiré ci-dessus), au lieu de dire que le code est faux.
Widget Captcha ou reCAPTCHA ?Lien direct vers Widget Captcha ou reCAPTCHA ?
SoftyFlow prend aussi en charge reCAPTCHA v3 de Google. Les deux peuvent être utilisés ensemble :
| Widget Captcha | reCAPTCHA v3 | |
|---|---|---|
| Ce que voit l'utilisateur | Un code en image à recopier | Rien à saisir (le visiteur reçoit un score invisible) ; le badge reCAPTCHA de Google s'affiche sur les pages publiques |
| Où il se règle | Sur la page, comme tout widget | Clés dans Paramètres › Clés et secrets, puis l'option reCAPTCHA du processus (lancement public) et l'option Use reCAPTCHA de la tâche utilisateur (tâches publiques) |
| Ce qu'il protège | La validation du formulaire dans la page | Le lancement d'un processus public et la validation des tâches publiques par des visiteurs non connectés, vérifiés par le serveur |
Avec reCAPTCHA, il n'y a rien à ajouter à la page : pour un visiteur non connecté, les fonctions du SDK startProcess et validateTask obtiennent d'elles-mêmes un jeton reCAPTCHA auprès de Google (fonction validateCaptcha du SDK), et le serveur refuse la requête quand le score est inférieur au Score minimal réglé dans Clés et secrets.
Le widget Captcha n'agit que sur le formulaire dans la page, dans les limites de la version 8.6 ; il ne protège pas un processus ou une API appelés directement, sans la page. Pour un processus que des visiteurs anonymes peuvent lancer, activez aussi reCAPTCHA.
Bonnes pratiquesLien direct vers Bonnes pratiques
- Renseignez toujours Error : sans lui, le Captcha ne bloque rien — un code faux est accepté par la validation du formulaire.
- Gardez un code court : 4 à 6 caractères suffisent pour arrêter les robots sans décourager les utilisateurs.
- Signalez le bouton de rafraîchissement dans le Placeholder ou un texte à côté du widget, pour les utilisateurs qui n'arrivent pas à lire le code.
- Placez-le juste avant le bouton d'envoi, dans le formulaire que l'action valide : seul le formulaire qui contient le Captcha le vérifie.
- Ne comptez pas sur le Captcha seul pour les processus publics : ajoutez reCAPTCHA et les contrôles habituels côté serveur.
DépannageLien direct vers Dépannage
- Le champ devient rouge mais aucun message n'apparaît, et le formulaire est envoyé quand même : le champ Error du widget est vide ; renseignez-le.
- « … est obligatoire » alors que Required est désactivé : un Captcha vide est toujours refusé quand il est vérifié ; masquez le widget sur les écrans où il ne doit pas être vérifié.
- Un code qui semble juste est refusé : vérifiez les majuscules et les minuscules, ou cliquez sur le bouton de rafraîchissement pour un code plus lisible.
- « Le captcha a expiré » : la page est restée ouverte plus de 12 heures ; saisissez le nouveau code qui vient d'être dessiné.
- Un code faux n'a pas arrêté l'action : vérifiez d'abord que Error est renseigné ; sinon, le code était encore en cours de vérification au moment du clic (voir Limites de la version 8.6).