Ajouter reCAPTCHA v3 à votre site Webflow grâce à n8n

Vous cherchez à protéger votre site Webflow contre les spams et les bots ? Google reCAPTCHA v3 est une solution idéale (notamment car invisible pour l’utilisateur).

Dans cet article, on va voir comment l'intégrer à votre site en utilisant n8n, un outil d'automatisation qui permet de relier plusieurs services.

Qu'est-ce que reCAPTCHA v3 ?

reCAPTCHA v3 est la version la plus récente du service anti-spam de Google. Contrairement aux anciennes versions, il fonctionne de manière invisible pour les utilisateurs. En analysant chaque interaction, il attribue un score de risque, vous permettant d'ajuster le traitement de vos formulaires en fonction de ce score.

Pourquoi choisir n8n ?

n8n est une plateforme qui vous permet de créer des automatisations sans avoir à coder. Ici, on va l'utiliser pour vérifier le score reCAPTCHA avant de gérer les soumissions de formulaires sur votre site.

Étape 1 : Configurer reCAPTCHA sur Google Cloud

Avant d'intégrer reCAPTCHA à votre site, quelques étapes sont nécessaires sur Google Cloud :

1. Connectez-vous à Google Cloud Console :
   • Créez un projet en cliquant sur le sélecteur de projet, puis sur "Nouveau projet". Donnez-lui un nom et cliquez sur "Créer".
2. Activez l'API reCAPTCHA Enterprise :
   • Allez dans "API et services" puis sur "+ Activer les API et les Services".
   • Recherchez "reCAPTCHA Enterprise API", cliquez sur la card puis activez l’API
3. Générez une clé API :
   • Allez dans "Identifiants" et créez une clé API. Gardez-là au chaud, elle sera utilisée plus tard (dans n8n). Cette clé ne doit jamais apparaître côté client
4. Créez une clé reCAPTCHA :
   • Dans la barre de recherche, recherchez reCAPTCHA (celui avec "sécurité")

1. • Puis cliquez sur "Créer une clé".
   • Ajoutez vos domaines (par ex. captcha-v3.webflow.io)

‍

1. • Copiez la clé générée
   • Cette clé va être utilisée côté client donc aucun problème pour la rendre visible

Étape 2 : Ajouter le script reCAPTCHA sur Webflow

1. Dans Webflow, allez dans les paramètres du site, puis dans "Custom Code".
2. Ajoutez ce script dans la section "Head Code" (remplacez YOUR_SITE_KEY par votre clé de site générée ci-dessus) :

<script async src="<https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY>"></script>

Étape 3 : Ajouter le code JavaScript pour gérer la soumission du formulaire

Maintenant il faut envoyer la donnée et anticiper la réponse de n8n pour afficher le success / error message

On va donc ajouter du javascript. Dans la section "Before </body> tag" des paramètres "Custom Code" de votre page, ajoutez le script suivant.

‍

Il y a 3 attributes à ajouter que cela fonctionne bien :

• data-form=captcha sur le form
• data-form=success sur le wrapper de success de Webflow
• data-form=error sur le wrapper d’error de Webflow

Note pour les sites / pages avec plusieurs formulaires :Si votre site comporte plusieurs formulaires, vous devrez adapter ce code pour cibler spécifiquement chaque formulaire. Vous pouvez utiliser des attributs data personnalisés (comme data-form=captcha-2) pour différencier les formulaires et ajuster le code en conséquence.

Étape 4 : Modifier votre formulaire Webflow

1️⃣ Modifier le button de soumission

Pour simplifier l'exécution de reCAPTCHA lors de la soumission du formulaire, vous pouvez ajouter des attributs directement au bouton de soumission, comme indiqué dans la documentation de Google :

Ce bouton déclenchera automatiquement reCAPTCHA au moment de la soumission.

<input type="sumit" class="p" data-sitekey="YOUR_SITE_KEY" data-callback='onSubmit' data-action='submit'>Submit</input>

Remplacez YOUR_SITE_KEY par votre clé de site

3️⃣ Dans les paramètres du formulaire, définissez l'action du formulaire sur POST. On rempplira l’URL une fois que l’on aura obtenue via n8n.

Cela va nous permettre d’envoyer les données à votre webhook n8n.

Optionnel

Ajoutez ce CSS pour override les propriétés du recaptcha de Webflow

<style>.g-recaptcha {    height: auto !important;    margin-bottom: 0px !important;    border: none !important;    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;    background-image: none !important;}</style>

Étape 4 : Vérifier le token reCAPTCHA côté serveur avec n8n

Une fois que reCAPTCHA a généré un token pour l'utilisateur, vous devez vérifier ce token auprès de l'API reCAPTCHA de Google pour valider qu'il est légitime.

On va donc créer le workflow dans n8n.

• 1️⃣ Récupérez le token envoyé par l'utilisateur via le formulaire grâce à un node Webhook

On voit que ce webhook nous donne une URL (en réalité 2 : une de teste et une de prod). C’est cette URL qu’il faut copier dans le Webflow en tant qu’Action

• 2️⃣ Ajoutez un node Set (optionnel) avec le JSON suivant :

Il nous permet d’isoler uniquement la variable qui nous intéresse depuis le webhook

{"recaptcha_response": "{{ $json.body['g-recaptcha-response'] }}"}

‍


• 3️⃣ Ajoutez un node HTTP Request pour faire la requête API à Google afin de nous dire s’il s’agit d’un bot ou non

Vous pouvez directement importer le cURL suivant :

curl -X POST \
'https://recaptchaenterprise.googleapis.com/v1/projects/YOUR_PROJECT_ID/assessments?key=YOUR_SECRET_API_KEY' \
-d '{
  "event": {
    "token": "{{$json.recaptcha_response}}",
    "expectedAction": "submit",
    "siteKey": "YOUR_SITE_KEY"
  }
}'

‍


Veuillez remplacer :

1. L’ID du projet dans l’URL (YOUR_PROJECT_ID) par l’ID de votre projet que vous trouvez sur le dashboard de votre projet
2. Votre clé API (YOUR_SECRET_API_KEY) généré au tout début dans la Console de Google
3. Votre clé de site (YOUR_SITE_KEY) généré dans l’onglet sécurité (et celui sur le bouton de votre form)
4. Assurez-vous que la valeur dynamique du token correspond bien à la valeur extraite dans le node Set

Interpréter la réponse :

• Le score reCAPTCHA est compris entre 0.0 (très probablement un bot) et 1.0 (très probablement un humain).

Note : Chaque token reCAPTCHA est valide pendant deux minutes et ne peut être vérifié qu'une seule fois. Si le token expire, vous devrez déclencher une nouvelle vérification.

‍

On va pouvoir se baser sur ce node pour renvoyer à Webflow la réponse (bot ou pas).

On peut aussi envoyer affiner

• Utilisez un nœud "IF" pour définir des actions en fonction du score
• Ajustez ce seuil en fonction de vos besoins de sécurité et du taux de faux positifs acceptable.

Et voilà c’est fait !!

Un point important à considérer : cela empêche la soumission native dans Webflow, il faudra donc stocker les réponses au form depuis votre flow n8n.

Pour info, voilà à quoi va ressembler votre flow n8n :

Bonnes pratiques et considérations de sécurité

1. Protection des clés : Ne partagez jamais votre clé API. Elle doit être stockée de manière sécurisée et utilisée uniquement côté serveur (dans n8n ici).
2. Validation côté serveur : Assurez-vous toujours de valider le token reCAPTCHA côté serveur, jamais uniquement côté client.

Résolution de problèmes

1. Vérifiez les clés : Assurez-vous d'utiliser les bonnes clés (site et secrète) aux bons endroits.
2. Inspectez les requêtes réseau : Utilisez les outils de développement du navigateur pour vérifier que le token reCAPTCHA est bien envoyé.
3. Logs / Historique n8n : Activez les logs détaillés dans n8n pour voir exactement ce qui est reçu et envoyé à chaque étape.
4. Test en mode de développement : Utilisez le mode de développement de reCAPTCHA pour tester sans affecter vos quotas de production.
5. Vérifiez les délais : Assurez-vous que la vérification du token se fait dans les 2 minutes suivant sa génération.

Conclusion

Grâce à reCAPTCHA v3 et n8n, fini les bots dans vos formulaires Webflow 💪

Vous disposez désormais d'un système efficace pour protéger votre site contre les spams tout en offrant une expérience fluide à vos utilisateurs.

‍

PS : Le cloneable Webflow sera mis à disposition bientôt