Utilisation de Google reCAPTCHA dans un formulaire adaptatif AEM basé sur les composants principaux using-reCAPTCHA-in-adaptive-forms

Créez ou sélectionnez un projet Google Cloud puis activez l’API reCAPTCHA Enterprise.

Obtenez l’ID de projet et créez une clé API et une clé de site pour les sites web.

Créez un conteneur de configurations pour les services cloud.

1. Accédez à Outils > Général > Navigateur de configuration.

2. Sélectionnez un dossier ou créez-en un, puis activez-le pour les configurations cloud en procédant comme suit :

   1. Dans l’explorateur de configurations, sélectionnez le dossier, puis sélectionnez Propriétés.
   2. Dans la boîte de dialogue Propriétés de configuration, activez Configurations cloud.
   3. Sélectionnez Enregistrer et fermer pour enregistrer la configuration et fermer la boîte de dialogue.

Configurez le service cloud pour reCAPTCHA Enterprise.

1. Sur votre instance de création Experience Manager, accédez à > Cloud Services.
2. Sélectionnez reCAPTCHA. La page de configuration s’ouvre. Sélectionnez le conteneur de configurations que vous avez créé et sélectionnez Créer.
3. Sélectionnez la version comme reCAPTCHA Enterprise et spécifiez le nom, l’ID de projet, la clé de site et la clé API (obtenue à l’étape 2) pour le service reCAPTCHA Enterprise.
4. Sélectionnez le type de clé. Le type de clé doit être identique à celui que vous avez configuré dans le projet Google Cloud par exemple, Clé de site de case à cocher ou Clé de site basée sur les scores.
5. Spécifiez un score seuil compris entre 0 et 1. Les scores supérieurs ou égaux aux scores de seuil indiquent une interaction humaine, sinon il s’agit d’une interaction avec un robot.
6. Sélectionnez Créer pour créer la configuration du service cloud.

Obtenir la paire de clés de l’API reCAPTCHA de Google. Elle comprend une clé de site et une clé secrète.

Créez un conteneur de configuration dans votre environnement AEM Forms as a Cloud Service. Un conteneur de configurations contient les configurations cloud utilisées pour connecter AEM à des services externes. Pour créer et configurer un conteneur de configuration afin de connecter votre environnement AEM Forms au service reCAPTCHA de Google :

1. Ouvrez votre instance AEM Forms as a Cloud Service.

2. Accédez à Outils > Général > Navigateur de configuration. Dans l’explorateur de configurations, vous pouvez :

3. Sélectionnez un dossier existant ou créez-en un. Vous pouvez créer un dossier et activer l’option Configurations cloud pour celui-ci ou Activer l’option Configurations cloud pour un dossier existant :

   • Pour créer un dossier et activer l’option Configurations cloud pour celui-ci :

     1. Dans le navigateur de configuration, cliquez sur Créer.
     2. Dans la boîte de dialogue Créer une configuration, spécifiez le nom et le titre, puis sélectionnez l’option Configurations cloud.
     3. Cliquez sur Créer.

   • Pour activer l’option Configurations cloud pour un dossier existant :

     1. Dans l’explorateur de configurations, sélectionnez le dossier, puis sélectionnez Propriétés.
     2. Dans la boîte de dialogue Propriétés de configuration, activez Configurations cloud.
     3. Sélectionnez Enregistrer et fermer pour enregistrer la configuration et fermer la boîte de dialogue.

Configurez le Cloud Service :

1. Sur votre instance d’auteur AEM, accédez à > Services cloud et sélectionnez reCAPTCHA.
2. Sélectionnez un conteneur de configuration, créé ou mis à jour dans la section précédente. Sélectionnez Créer.
3. Spécifiez Titre, Nom, Clé du site et Clé secrète pour le service reCAPTCHA (obtenu à l’étape 1). Sélectionnez Créer.

Une fois le service reCAPTCHA configuré, il peut être utilisé dans un formulaire adaptatif. Pour plus d’informations, voir utilisation de Google reCAPTCHA dans un formulaire adaptatif.

Ouvrez votre instance AEM Forms as a Cloud Service.

Accédez à Forms > Forms et documents.

Sélectionnez un Forms adaptatif, puis sélectionnez Propriétés. Pour l’option Conteneur de configurations, sélectionnez le Conteneur de configurations contenant la Configuration du cloud qui connecte AEM Forms au service reCAPTCHA de Google et sélectionnez Enregistrer et fermer.

Si vous ne disposez pas d’un tel conteneur de configuration, consultez la section Connecter votre environnement AEM Forms au service reCAPTCHA de Google pour savoir comment créer un tel conteneur de configuration.

Sélectionnez un Forms adaptatif, puis sélectionnez Modifier. Le formulaire adaptatif s’ouvre dans l’éditeur de Forms adaptatif.

À partir de l’explorateur de composants, faites glisser et déposez le composant formulaire adaptatif reCAPTCHA sur le formulaire adaptatif.

Sélectionnez le composant Formulaire adaptatif reCAPTCHA et sélectionnez l’icône de propriétés . Cela ouvre la boîte de dialogue des propriétés. Spécifiez les propriétés obligatoires suivantes :

• Nom : vous pouvez identifier facilement un composant de formulaire en lui attribuant un nom unique dans le formulaire et dans l’éditeur de règles, mais le nom ne doit pas contenir d’espaces ni de caractères spéciaux.

• Titre : spécifiez un titre pour le widget CAPTCHA. La valeur par défaut est Captcha. Sélectionnez Masquer le titre si vous ne souhaitez pas que le titre apparaisse. Sélectionnez Autoriser le texte enrichi pour le titre pour modifier votre titre au format texte enrichi. Vous pouvez également marquer votre titre comme Élément de formulaire non lié.

• Configuration de CAPTCHA : sélectionnez une configuration dans le menu déroulant Paramètres pour reCAPTCHA Enterprise ou reCAPTCHA v2 afin de présenter la boîte de dialogue reCAPTCHA Google pour le formulaire :

  1. Si vous sélectionnez la version reCAPTCHA Enterprise, le type de clé peut être case à cocher ou basé sur le score. Il dépend de votre sélection lorsque vous configurez clé de site pour les sites web :

     note note
     NOTE
     Dans la configuration cloud avec type de clé comme case à cocher, le message d’erreur personnalisé s’affiche sous la forme d’un message intégré si la validation captcha échoue. Dans la configuration cloud avec type de clé comme basé sur le score, le message d’erreur personnalisé s’affiche sous la forme d’un pop-up si la validation captcha échoue.

  2. Vous pouvez sélectionner la taille normale et la taille compacte.

  note note
  NOTE
  Vous pouvez disposer de plusieurs configurations cloud dans votre environnement à des fins similaires. Donc, choisissez le service avec soin. Si aucun service n’est répertorié, consultez Connexion de votre environnement AEM Forms au service reCAPTCHA de Google pour savoir comment créer un Cloud Service qui connecte votre environnement AEM Forms au service reCAPTCHA de Google.

• Taille de Captcha : vous pouvez sélectionner la taille d’affichage de la boîte de dialogue de défi reCAPTCHA de Google. Utilisez l’option Compact pour afficher une boîte de dialogue de défi de Google reCAPTCHA de petite taille et l’option Normal pour afficher une boîte de dialogue de défi de de taille relativement grande.
  Si vous sélectionnez la version reCAPTCHA v2 :

  1. Vous pouvez sélectionner la taille Normale ou Compacte pour le widget reCAPTCHA.
  2. Vous pouvez sélectionner l’option Invisible pour ne montrer le test CAPTCHA que dans le cas d’une activité suspecte.

Le service reCAPTCHA est activé sur le formulaire adaptatif. Vous pouvez prévisualiser le formulaire et voir le fonctionnement du CAPTCHA. Le badge protégé par reCAPTCHA, affiché ci-dessous, s’affiche sur les formulaires protégés.

Sélectionnez Terminé.

Désormais, le protégé par reCAPTCHA s’affiche sur votre formulaire adaptatif. Elle s’affiche sur tous les Forms adaptatifs configurés pour utiliser le service reCAPTCHA de Google.

Désormais, seuls les formulaires légitimes, dans lesquels le remplisseur de formulaire résout avec succès le problème posé par le service reCAPTCHA de Google, sont autorisés pour l’envoi.