DocumentationAEM 6.5Guide de l’utilisateur

Utilisation de CAPTCHA dans les formulaires adaptifs using-captcha-in-adaptive-forms

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Administration
  • Utilisateur ou utilisatrice
  • Développeur
Version
Lien de l’article
AEM as a Cloud Service
Cliquez ici
AEM 6.5
Cet article

Adobe recommande d’utiliser les composants principauxde capture de données modernes et extensibles pour créer de nouveaux formulaires adaptatifsou ajouter des formulaires adaptatifs à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de formulaires adaptatifs, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’ancienne approche de la création de formulaires adaptatifs à l’aide de composants de base.

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart, Test public de Turing complètement automatisé ayant pour but de différencier les personnes humaines des ordinateurs) est un programme couramment utilisé dans les transactions en ligne pour différencier les personnes humaines des programmes automatisés ou des robots. Il présente un test et évalue la réponse de l’utilisateur ou de l’utilisatrice pour déterminer s’il s’agit d’une personne humaine ou d’un robot qui interagit avec le site. Il empêche l’utilisateur ou l’utilisatrice de continuer si le test échoue et contribue à sécuriser les transactions en ligne en empêchant les robots d’envoyer des spams ou des messages malveillants.

AEM Forms prend en charge CAPTCHA dans les formulaires adaptatifs. Vous pouvez utiliser le service reCAPTCHA de Google pour implémenter CAPTCHA.

NOTE
  • AEM Forms prend en charge reCAPTCHA v2 et Enterprise. Toute autre version n’est pas prise en charge.
  • Dans les formulaires adaptatifs, CAPTCHA n’est pas pris en charge dans le mode hors ligne sur l’application AEM Forms.

Configuration du service reCAPTCHA par Google pour les formulaires adaptatifs google-reCAPTCHA

Les utilisateurs et utilisatrices d’AEM Forms peuvent utiliser le service reCAPTCHA de Google pour mettre en place CAPTCHA dans les formulaires adaptatifs. Il offre des fonctionnalités CAPTCHA avancées pour protéger votre site. Pour plus d’informations sur le fonctionnement de reCAPTCHA, consultez Google reCAPTCHA. Le service reCAPTCHA, y compris reCAPTCHA v2 et reCAPTCHA Enterprise, est intégré à AEM Forms. Selon vos besoins, vous pouvez configurer le service reCAPTCHA pour activer :

reCAPTCHA

Configuration de reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Créez un projet reCAPTCHA Enterprise activé avec l’API reCAPTCHA Enterprise.

  2. Obtenez l’identifiant du projet.

  3. Créez une clé API et une clé de site pour les sites web.

  4. Créez un conteneur de configuration pour les services cloud.

    1. Accédez à Outils > Général > Navigateur de configuration. Pour plus d’informations, consultez la documentation relative au Navigateur de configuration.

    2. Procédez comme suit pour activer le dossier global pour les configurations cloud ou ignorez cette étape pour créer et configurer un autre dossier pour les configurations de service cloud.

      1. Dans le navigateur de configuration, sélectionnez le dossier global et 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.

    3. Dans le navigateur de configuration, sélectionnez Créer.

    4. Dans la boîte de dialogue Créer une configuration, indiquez un titre pour le dossier et activez Configurations cloud.

    5. Sélectionnez Créer pour créer le dossier activé pour les configurations de service cloud.

  5. Configurez le service cloud pour reCAPTCHA Enterprise.

    1. Sur votre instance de création Experience Manager, accédez à tools-1  > Cloud Services.

    2. Sélectionnez reCAPTCHA. La page de configuration s’ouvre. Sélectionnez le conteneur de configuration créé lors de l’étape précédente et sélectionnez Créer.

    3. Sélectionnez la version reCAPTCHA Enterprise et indiquez le nom, l’ID de projet, la clé du site et la clé API (obtenue aux étapes 2 et 3) pour le service reCAPTCHA Enterprise.

    4. Sélectionnez le type de clé. Le type de clé doit être identique à la clé de site configurée 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 de seuil compris entre 0 et 1 (cliquez ici pour en savoir plus sur le score). Les scores supérieurs ou égaux aux scores de seuil indiquent une interaction humaine, sinon il s’agit d’une interaction avec un robot.

      Remarque :

      • Les auteurs et autrices de formulaires peuvent spécifier un score dans la plage adaptée à l’envoi ininterrompu de formulaires.

    6. Sélectionnez Créer pour créer la configuration du service cloud.

    7. Dans la boîte de dialogue Modifier le composant, spécifiez le nom, l’ID de projet, la clé du site, la clé API (obtenue aux étapes 2 et 3), sélectionnez le type de clé et saisissez le score de seuil. Sélectionnez Enregistrer les paramètres  puis  OK  pour terminer la configuration.

Une fois que le service reCAPTCHA Enterprise est activé, il peut être utilisé dans les formulaires adaptatifs. Voir Utilisation du CAPTCHA dans les formulaires adaptifs.

reCAPTCHA Enterprise

Configurer Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

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

  2. Créez un conteneur de configuration pour les services cloud.

    1. Accédez à Outils > Général > Navigateur de configuration. Pour plus d’informations, consultez la documentation relative au Navigateur de configuration.

    2. Procédez comme suit pour activer le dossier global pour les configurations cloud ou ignorez cette étape pour créer et configurer un autre dossier pour les configurations de service cloud.

      1. Dans le navigateur de configuration, sélectionnez le dossier global et 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.

    3. Dans le navigateur de configuration, sélectionnez Créer.

    4. Dans la boîte de dialogue Créer une configuration, indiquez un titre pour le dossier et activez Configurations cloud.

    5. Sélectionnez Créer pour créer le dossier activé pour les configurations de service cloud.

  3. Configurez le service cloud pour reCAPTCHA v2.

    1. Sur votre instance de création AEM, accédez à tools-1  > Services cloud.
    2. Sélectionnez reCAPTCHA. La page de configuration s’ouvre. Sélectionnez le conteneur de configuration créé lors de l’étape précédente et sélectionnez Créer.
    3. Sélectionnez la version reCAPTCHA v2, renseignez les champs Nom, Clé de site et Clé secrète pour le service reCAPTCHA (obtenus lors de l’étape 1), puis sélectionnez Créer pour créer la configuration du service cloud.
    4. Dans cette boîte de dialogue, spécifiez le site et les clés secrètes obtenues à l’étape 1. Sélectionnez Enregistrer les paramètres puis OK pour terminer la configuration.

    Une fois que le service reCAPTCHA est configuré, il peut être utilisé dans les formulaires adaptatifs. Pour plus d’informations, voir Utilisation du CAPTCHA dans les formulaires adaptatifs.

reCAPTCHA v2

Utiliser le reCAPTCHA dans les formulaires adaptatifs using-reCAPTCHA

Pour utiliser le reCAPTCHA dans les formulaires adaptatifs :

  1. Ouvrez un formulaire adaptatif en mode d’édition.

    note note
    NOTE
    Assurez-vous que le conteneur de configurations sélectionné lors de la création du formulaire adaptatif contient le service cloud reCAPTCHA. Vous pouvez également changer les propriétés du formulaire adaptatif pour modifier le conteneur de configuration associé au formulaire.

  2. À partir du navigateur du composant, faites glisser et déposez le composant Captcha sur le formulaire adaptatif.

    note note
    NOTE
    L’utilisation de plusieurs composants Captcha dans un formulaire adaptatif n’est pas prise en charge. En outre, il n’est pas recommandé d’utiliser le CAPTCHA dans un panneau marqué pour le chargement différé ou dans un fragment.
    note note
    NOTE
    Le Captcha est sensible au temps et expire au bout d’une minute environ. Par conséquent, il est recommandé de placer le composant Captcha juste avant le bouton Soumettre dans le formulaire adaptatif.

  3. Sélectionnez le composant Captcha que vous avez ajouté et sélectionnez cmppr pour modifier ses propriétés.

  4. Indiquez un titre pour le widget CAPTCHA. La valeur par défaut est  Captcha. Sélectionnez Masquer le titre si vous ne voulez pas que le titre apparaisse.

  5. Dans le menu déroulant Service Captcha, sélectionnez reCAPTCHA pour activer le service reCAPTCHA si vous l’avez configuré comme décrit dans Service reCAPTCHA de Google.

  6. Sélectionnez une configuration dans la liste déroulante Paramètres.

  7. Si la configuration sélectionnée comporte la version reCAPTCHA Enterprise  :

    1. Vous pouvez sélectionner la configuration cloud reCAPTCHA avec le type de clé en tant que case à cocher. Dans le type de clé en tant que case à cocher, le message d’erreur personnalisé s’affiche sous forme de message en ligne si la validation du captcha échoue. Vous pouvez sélectionner la taille normale et la taille compacte.

    2. Vous pouvez sélectionner la configuration cloud reCAPTCHA avec le type de clé basée sur un score. Dans le type de clé basée sur un score, le message d’erreur personnalisé s’affiche sous forme de message pop-up si la validation du captcha échoue.

    3. Lorsque vous sélectionnez une Référence de liaison, les données soumises sont liées, sinon il s’agit de données non liées. Vous trouverez ci-dessous des exemples XML de données non liées et de données liées (avec une référence de liaison telle que SSN), respectivement, lorsqu’un formulaire est soumis.

      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data>
            <captcha16820607953761>
                <captchaType>reCAPTCHAEnterprise</captchaType>
                <captchaScore>0.9</captchaScore>
            </captcha16820607953761>
        </data>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>371237912</SSN>
                <FirstName>Sarah </FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608034928</afSubmissionTime>
    </afSubmissionInfo>
    </afData>
      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data/>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>
                    <captchaType>reCAPTCHAEnterprise</captchaType>
                    <captchaScore>0.9</captchaScore>
                </SSN>
                <FirstName>Sarah</FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608035111</afSubmissionTime>
    </afSubmissionInfo>
    </afData>

    Si la configuration sélectionnée comporte la version reCAPTCHA v2  :

    1. Sélectionnez la taille normale ou compacte pour le widget reCAPTCHA. Vous pouvez également sélectionner l’option Invisible pour ne montrer le test CAPTCHA qu’en cas d’activité suspecte. Le badge protégé par reCAPTCHA, affiché ci-dessous, s’affiche sur les formulaires protégés.

      Badge protégé par reCAPTCHA de Google

    Le service reCAPTCHA est activé sur le formulaire adaptatif. Vous pouvez prévisualiser le formulaire et voir le fonctionnement de CAPTCHA.

  8. Enregistrez les propriétés.

NOTE
Ne sélectionnez pas Par défaut dans le menu déroulant Service Captcha puisque le service par défaut AEM CAPTCHA est obsolète.

Affichage ou masquage du composant CAPTCHA en fonction de règles show-hide-captcha

Vous pouvez choisir d’afficher ou de masquer le composant CAPTCHA en fonction des règles que vous appliquez à un composant d’un formulaire adaptatif. Sélectionnez le composant, sélectionnez modifier les règles , puis sélectionnez Créer pour créer une règle. Pour plus d’informations sur la création de règles, voir la section Éditeur de règles.

Par exemple, le composant CAPTCHA ne doit s’afficher dans un formulaire adaptatif que si la valeur du champ Valeur monétaire du formulaire est supérieure à 25 000.

Sélectionnez le champ Valeur monétaire dans le formulaire et créez les règles suivantes :

Afficher ou masquer des règles

NOTE
  • Si vous sélectionnez la configuration reCAPTCHA v2 avec la taille comme Invisible ou les clés basées sur un score reCAPTCHA Enterprise, l’option afficher/masquer n’est pas applicable.

Valider le CAPTCHA validate-captcha

Vous pouvez valider le CAPTCHA dans un formulaire adaptatif lorsque vous envoyez le formulaire ou que vous basez la validation CAPTCHA sur des actions et conditions des utilisateurs.

Valider le CAPTCHA lors de l’envoi du formulaire validation-form-submission

Pour valider automatiquement un CAPTCHA lorsque vous envoyez un formulaire adaptatif :

  1. Sélectionnez le composant CAPTCHA et sélectionnez cmppr pour afficher les propriétés du composant.
  2. Dans la section Valider le CAPTCHA, sélectionnez Valider le CAPTCHA lors de l’envoi du formulaire.
  3. Sélectionnez Terminé pour enregistrer les propriétés du composant.

Validation du CAPTCHA sur les actions et conditions des utilisateurs validate-captcha-user-action

Pour valider un CAPTCHA en fonction des conditions et des actions des utilisateurs et des utilisatrices :

  1. Sélectionnez le composant CAPTCHA et sélectionnez cmppr pour afficher les propriétés du composant.

  2. Dans la section Valider le CAPTCHA, sélectionnez Valider le CAPTCHA sur une action utilisateur.

  3. Sélectionnez Terminé pour enregistrer les propriétés du composant.

    note note
    NOTE
    Si vous sélectionnez la configuration reCAPTCHA v2 avec la taille comme Invisible ou les clés basées sur un score reCAPTCHA Enterprise, il n’est pas possible de valider un Captcha sur une action de l’utilisateur ou de l’utilisatrice.

Experience Manager Forms fournit une API ValidateCAPTCHA pour valider le CAPTCHA à l’aide de conditions prédéfinies. Vous pouvez appeler l’API à l’aide d’une action d’envoi personnalisée ou en définissant des règles sur les composants d’un formulaire adaptatif.

Voici un exemple d’API ValidateCAPTCHA permettant de valider le CAPTCHA à l’aide de conditions prédéfinies :

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
        GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

L’exemple signifie que l’API ValidateCAPTCHA valide le CAPTCHA dans le formulaire uniquement si le nombre de chiffres dans la zone numérique spécifiée par l’utilisateur lors du remplissage du formulaire est supérieur à 5.

Option 1 : utiliser l’API Experience Manager Forms ValidateCAPTCHA pour valider le CAPTCHA à l’aide d’une action d’envoi personnalisée

Effectuez les étapes suivantes pour utiliser l’API ValidateCAPTCHA pour valider le CAPTCHA à l’aide d’une action d’envoi personnalisée :

  1. Ajoutez le script qui inclut l’API ValidateCAPTCHA à l’action d’envoi personnalisée. Pour plus d’informations sur les actions d’envoi personnalisées, voir Création d’une action d’envoi personnalisée pour les formulaires adaptatifs.
  2. Sélectionnez le nom de l’action d’envoi personnalisée dans la liste déroulante Action d’envoi des propriétés Envoi d’un formulaire adaptatif.
  3. Sélectionnez Soumettre. Le CAPTCHA est validé en fonction des conditions définies dans l’API ValidateCAPTCHA de l’action d’envoi personnalisée.

Option 2 : utiliser l’API Experience Manager Forms ValidateCAPTCHA pour valider le CAPTCHA sur une action de l’utilisateur avant d’envoyer le formulaire

Vous pouvez également appeler l’API ValidateCAPTCHA en appliquant des règles à un composant d’un formulaire adaptatif.

Par exemple, vous ajoutez un bouton Valider le CAPTCHA dans un formulaire adaptatif et créez une règle pour appeler un service lors d’un clic sur un bouton.

La figure suivante illustre comment vous pouvez appeler un service lors d’un clic sur le bouton Valider le CAPTCHA  :

Valider le CAPTCHA

Vous pouvez appeler la servlet personnalisée qui inclut l’API ValidateCAPTCHA à l’aide de l’éditeur de règles et activer ou désactiver le bouton d’envoi du formulaire adaptatif en fonction du résultat de la validation.

De même, vous pouvez utiliser l’éditeur de règles pour inclure une méthode personnalisée pour valider le CAPTCHA dans un formulaire adaptatif.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2