Ajouter Google reCAPTCHA aux formulaires dans l’éditeur universel
Google reCAPTCHA permet de protéger les formulaires en distinguant les utilisateurs et les utilisatrices humains des robots automatisés. Edge Delivery Services Forms prend uniquement en charge reCAPTCHA Enterprise avec des clés de site basées sur les scores. Ce guide explique comment configurer cette protection pour les formulaires dans l’éditeur universel.
Objectifs :
- Configuration de reCAPTCHA Enterprise avec une clé de site basée sur les scores
- Ajouter reCAPTCHA à vos formulaires
- Valider et tester l’implémentation
- Surveiller et optimiser les performances
Prérequis
Avant de commencer, vérifiez que vous disposez des éléments suivants :
Conditions d’accès
- Accès à la création AEM as a Cloud Service
- Accès à l’éditeur universel avec des autorisations d’édition de formulaire
Exigences techniques
- Compte Google actif
- Projet Google Cloud Platform avec facturation activée
- Propriété de domaine vérifiée pour vos formulaires
Prérequis en matière de connaissances
- Compréhension de base d’AEM Forms et de l’éditeur universel
- Familiarité avec les configurations de service cloud
- Compréhension des concepts de sécurité des formulaires
Pourquoi utiliser reCAPTCHA dans vos formulaires ?
reCAPTCHA Enterprise évalue les interactions utilisateur pour aider à protéger les formulaires contre le spam et les abus automatisés. Google présente les fonctionnalités suivantes :
Tarification, quotas et assistance : les coûts dépendent du niveau de service Google et du volume d’évaluation. L’utilisation est soumise à des quotas de 🔗, non illimités. Pour connaître les tarifs actuels, les conditions d’abonnement et les options d’assistance, consultez les détails du niveau de Google 🔗. Google répertorie le service clientèle sur tous ses niveaux et la gestion de compte dédiée pour son niveau Entreprise.
Configurer reCAPTCHA Enterprise
Prérequis :
- Projet Google Cloud avec facturation activée
- Identifiant du projet (depuis le tableau de bord GCP)
- Vérification de domaine pour vos formulaires
- Accès des administrateurs et administratrices à GCP et AEM
Configuration :
-
Créer ou sélectionner un projet Google Cloud
- Accédez à la console Google Cloud
- Créez un projet ou sélectionnez un projet existant
- Notez votre ID de projet
-
Activez l’API reCAPTCHA Enterprise
- Accédez à API et services > Bibliothèque
- Recherchez « reCAPTCHA Enterprise API »
- Cliquez sur Activer
-
Créer des informations d’identification API
- Accédez à API et services > Informations d’identification
- Cliquez sur Créer des informations d’identification > Clé API
- Copiez et stockez votre clé API
-
Créez une clé de site
- Accédez à Sécurité > Défense antifraude > Clés
- Cliquez sur Créer une clé et sélectionnez Web comme type d’application
- Ajoutez votre ou vos domaine(s)
- Cliquez sur Étape suivante (facultatif) pour ouvrir les paramètres supplémentaires
- Conserver Allez-vous utiliser les défis ? désactivé pour créer une clé de site basée sur les scores
- Cliquez sur Créer une clé et copiez la clé du site
Point de contrôle de validation : vérifiez que vous disposez des éléments suivants :
- ID du projet
- Clé API
- Clé de site
- Domaine vérifié dans Google Cloud
Figure : activation des configurations cloud pour votre conteneur de formulaires
Configuration :
-
Accéder au navigateur de configuration
- Se connecter à votre instance de création AEM
- Accédez à Outils > Général > Navigateur de configuration
-
Activez les configurations cloud
- Localisez le conteneur de configuration de votre formulaire
- Sélectionnez Propriétés
- Vérifiez les configurations cloud
- Cliquez sur Enregistrer et fermer
-
Vérifier la configuration
- Confirmez que les « Configurations cloud » s’affichent dans les propriétés du conteneur.
Point de contrôle de validation :
- Configurations cloud activées pour votre conteneur
- Le conteneur apparaît dans l’explorateur de configurations
- Les propriétés affichent « Configurations cloud » comme étant activées
Écran de configuration d’
Image : interface de configuration reCAPTCHA Enterprise dans AEM
Configuration :
-
Accédez à la configuration reCAPTCHA
- Accéder à Outils > Services cloud > reCAPTCHA
- Sélectionner le conteneur de configuration de votre formulaire
- Cliquer sur Créer
-
Configurer les paramètres Enterprise
- Titre : nom explicite (par exemple, « Production reCAPTCHA »)
- Nom : nom du système (généré automatiquement ou personnalisé)
- Version : sélectionnez ReCAPTCHA Enterprise
- ID de projet : saisissez votre ID de projet Google Cloud
- Clé du site : saisissez la clé du site à partir de Google Cloud
- Clé API : saisissez votre clé API Google Cloud
- Type de clé : sélectionnez Clé de site basée sur les scores
-
Définissez un seuil de sécurité
-
Score du seuil : défini entre 0,0 et 1,0
-
Valeurs recommandées :
- 0,7 - 0,9 : haute sécurité (peut bloquer certains utilisateurs et utilisatrices légitimes)
- 0,5 - 0,7 : sécurité équilibrée (recommandé)
- 0,1 - 0,5 : sécurité réduite (permet plus d’utilisateurs et d’utilisatrices)
-
-
Enregistrer et publier
- Cliquez sur Créer pour enregistrer la configuration.
- Cliquez sur Publier pour la rendre disponible.
Point de contrôle de validation :
- Configuration enregistrée avec succès
- Tous les champs obligatoires remplis
- Configuration publiée et visible
- Aucun message d’erreur
Ajouter reCAPTCHA à votre formulaire
Après avoir configuré le service reCAPTCHA, ajoutez une protection à votre formulaire comme suit :
Image : ajout du composant Captcha invisible à votre formulaire
Accédez à votre formulaire dans AEM Sites et cliquez sur Modifier pour l’ouvrir dans l’éditeur universel. Attendez que l’éditeur se charge.
- Accédez à votre formulaire dans AEM Sites.
- Cliquez sur Modifier pour ouvrir dans l’éditeur universel.
- Attendez que l’éditeur se charge.
Dans l’arborescence de contenu (panneau de gauche), recherchez la section de votre formulaire adaptatif et développez la structure du formulaire pour afficher les points d’insertion.
- Dans l’arborescence de contenu (panneau de gauche), recherchez la section Formulaire adaptatif.
- Développez la structure du formulaire pour afficher les points d’insertion.
Ajoutez le composant CAPTCHA (invisible) au formulaire.
- Cliquez sur l’icône Ajouter (+) dans la section de votre formulaire.
- Dans la liste des composants, sélectionnez Captcha (invisible).
- Vous pouvez également faire glisser et déposer le composant depuis le panneau des composants.
Sélectionnez le composant CAPTCHA nouvellement ajouté et vérifiez qu’il utilise votre configuration reCAPTCHA.
- Sélectionnez le composant Captcha nouvellement ajouté.
- Dans le panneau Propriétés, vérifiez qu’il utilise votre configuration reCAPTCHA.
- Aucune configuration supplémentaire n’est nécessaire pour l’installation de base.
Publiez vos modifications et vérifiez qu’il n’y a aucune erreur.
- Cliquez sur Publier dans l’éditeur universel.
- Attendez la confirmation.
- Vérifiez qu’aucune erreur ne s’affiche.
Vérifiez l’implémentation.
Votre formulaire protégé est désormais disponible à l’adresse :
https://<branch>--<repo>--<owner>.aem.live/content/forms/af/
<form-name>
Exemple d’URL :
https://main--my-forms--company.aem.live/content/forms/af/
contact-us-form