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. Ce guide explique comment implémenter les versions reCAPTCHA Enterprise et Standard dans l’éditeur universel.
Objectifs :
- Sélectionner la solution reCAPTCHA appropriée
- Configurer reCAPTCHA Enterprise ou Standard
- 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
- Inscription au programme d’accès anticipé pour les fonctionnalités reCAPTCHA
Exigences techniques
- Compte Google actif
- Pour Enterprise : projet Google Cloud Platform avec facturation activée
- Pour Standard : compte reCAPTCHA Google
- 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 ?
Concept clé : reCAPTCHA utilise le machine learning pour analyser le comportement des utilisateurs et des utilisatrices et attribue un score (0,0 à 1,0) indiquant la probabilité d’interaction humaine. Les scores plus élevés indiquent des utilisateurs et des utilisatrices humains; les scores plus faibles suggèrent des robots.
Exemple : un formulaire de calcul des taxes gérant des données sensibles nécessite une protection contre les attaques automatisées. reCAPTCHA vérifie que les envois proviennent de vrais utilisateurs ou utilisatrices, et non de robots.
Choisir votre solution reCAPTCHA
Les formulaires Edge Delivery Services prennent en charge deux options Google reCAPTCHA : Utilisez les critères suivants pour sélectionner une solution adaptée :
Guide de décision rapide
Utilisez reCAPTCHA Enterprise si vous disposez des éléments suivants :
- Formulaires à trafic élevé (>10 000 requêtes/mois)
- Exigences de conformité strictes (RGPD, SOX, HIPAA)
- Besoin d’analyses et de rapports avancés
- Budget pour les fonctionnalités de sécurité premium
- Déploiements multidomaines complexes
Utilisez reCAPTCHA Standard si vous disposez des éléments suivants :
- Trafic faible à modéré (<10 000 requêtes/mois)
- Besoins de base en matière de sécurité
- Budget limité (niveau gratuit)
- Configuration simple sur un seul domaine
- Permière utilisation de reCAPTCHA
Comparaison détaillée
Les deux solutions offrent les avantages suivants :
- Détection basée sur un score (échelle de 0,0 à 1,0)
- Fonctionnement invisible (aucune interaction des utilisateurs et des utilisatrices requise)
- Détection des robots basée sur le machine learning
- Évaluation des risques en temps réel
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é > reCAPTCHA Enterprise
- Cliquez sur Créer une clé
- Choisissez le type de clé basé sur les scores
- Ajoutez votre ou vos domaine(s)
- Définissez le score seuil (recommandé : 0,5)
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
Figure : 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
Configurer reCAPTCHA Standard
| note important |
|---|
| IMPORTANT |
| Les formulaires Edge Delivery Services ne prennent en charge que les services reCAPTCHA v2 basés sur les scores. N’utilisez pas la version case à cocher. |
Génération de clés :
-
Accèdez à la console reCAPTCHA de Google.
- Accédez à la console d’administration Google reCAPTCHA.
- Connectez-vous avec votre compte Google.
-
Créez un nouveau site.
- Cliquez sur le signe « + » pour ajouter un nouveau site
- Libellé : saisissez un nom explicite
- Type reCAPTCHA : sélectionnez reCAPTCHA v2 > « Je ne suis pas un robot » Invisible
- Domaines : ajoutez vos domaines de formulaire
- Acceptez les conditions et cliquez sur Envoyer
-
Collectez Vos Clés
- Clé du site : copiez la clé du site (clé publique).
- Clé secrète : copiez la clé secrète (clé privée)
Point de contrôle de validation :
-
Site créé dans la console reCAPTCHA
-
Clé de site obtenue
-
Clé secrète obtenue
-
Domaine(s) ajouté(s) et vérifié(s)
Suivez le même processus que dans la configuration Enterprise :
-
Activez les configurations cloud dans le navigateur de configuration
-
Vérifiez la configuration du conteneur
-
Confirmez que les paramètres sont enregistrés
Figure : interface de configuration de reCAPTCHA Standard 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
-
Configurez les paramètres standard.
- Titre : nom explicite (par exemple, « reCAPTCHA standard »).
- Nom : nom du système (généré automatiquement ou personnalisé)
- Version : sélectionnez ReCAPTCHA v2.
- Clé de site : saisissez votre clé de site reCAPTCHA Google.
- Clé secrète : saisissez votre clé secrète reCAPTCHA Google.
-
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 créée sans erreurs
-
Les deux clés sont saisies correctement
-
Configuration correctement publiée
-
La configuration apparaît dans la liste
Ajouter reCAPTCHA à votre formulaire
Après avoir configuré le service reCAPTCHA, ajoutez une protection à votre formulaire comme suit :
Figure : 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) à votre 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