Exemple : utiliser reCAPTCHA

Cet exemple fournit un cas d'utilisation sur la façon de configurer un reCAPTCHA Google dans un formulaire et de l'utiliser dans un Custom Journey.

Remarque : reCAPTCHA est un système CAPTCHA appartenant à Google. Il permet aux hébergeurs de faire la distinction entre les accès humains et les accès automatisés aux sites web.
Les CAPTCHA traditionnels utilisent principalement des défis textuels, demandant aux utilisateurs de déchiffrer des caractères déformés ou brouillés.
reCAPTCHA propose une approche plus avancée, intégrant des CAPTCHA basés sur des images du monde réel et analysant le comportement des utilisateurs afin de distinguer les utilisateurs humains des robots.

Configuration

Pour intégrer un reCAPTCHA Google dans Selligent, vous devez disposer d'un compte permettant d'accéder à la console d'administration reCAPTCHA Google afin de générer et de récupérer les clés API.

Générer les clés

  1. Accédez à https://www.google.com/recaptcha/intro/v3.html.

  2. Cliquez sur Admin Console.

  3. Remplissez le formulaire :

    • Ajoutez un libellé (par exemple le nom du client ou du projet).
    • Choisissez le type de reCAPTCHA :
      • reCAPTCHA v2 : nécessite toujours une interaction avec l'utilisateur.
      • reCAPTCHA v3 : peut effectuer une vérification sans interaction avec l'utilisateur.
    • Ajoutez tous les noms de domaine sur lesquels le reCAPTCHA peut être atteint (paranadigital.selligent.com, paranasolution.selligent.com, etc.).

  4. Après avoir envoyé le formulaire, enregistrez le type de reCAPTCHA choisi, la clé du site et la clé secrète pour une utilisation ultérieure dans Selligent.

Fonctionnalité

Étape 1 : Ajouter une requête reCAPTCHA à un formulaire

Créez une page dans Selligent contenant un formulaire.

  • Dans la balise <form>, ajoutez ce champ masqué :
Copier 
<!-- Recaptcha -->
                <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
            <!-- End Recaptcha -->
  • Ajoutez ce script en haut de la page HTML pour charger l'API :
Copier 
<!-- Recaptcha -->
                <script src="https://www.google.com/recaptcha/api.js?render=[siteKey]"></script>
            <!-- Recaptcha -->

Ajoutez ensuite l'un des deux scripts suivants, selon que vous utilisez reCAPTCHA v3 ou reCAPTCHA v2 :

  • Lorsque vous utilisez reCAPTCHA v3, ajoutez ce script en haut de la page HTML (le script de chargement de l'API doit toujours être placé en premier) :
Copier 
<!-- RecaptchaV3 – en haut de la page -->
                <script>
                grecaptcha.ready(function () {
                grecaptcha.execute('[siteKey]', { action : '[FormName]' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
                });
                });
                </script>
            <!-- End RecaptchaV3 -->
  • Si vous utilisez reCAPTCHA v2, ajoutez ce script en bas(*) de la page HTML(*). Cette consigne est importante pour la v2 et permet que la page soit chargée avant l'exécution du script :
Copier 
<!-- RecaptchaV2 – en bas de la page -->
                <script>
                function updateResponse(){
                document.getElementById("recaptchaResponse").value =
                document.getElementById("g-recaptcha-response").value;
                }
                </script>
            <!-- End RecaptchaV2 -->

Remarque : dans les scripts ci-dessus :
- Remplacez [siteKey] par votre clé de site copiée à partir du reCAPTCHA Google.
- Remplacez [FormName] par le nom de votre formulaire Selligent.

Exemple :

Enregistrez et publiez votre page.

Étape 2 : Ajouter un composant personnalisé pour appeler l'API reCAPTCHA

Dans le chapitre Échange de données de Selligent, créez un composant personnalisé de type Web.

Configuration

Type - Web

Entrée

  • Connexion - aucune
  • Mot de passe - aucun
  • URL - https://www.google.com/recaptcha/api/siteverify
  • Méthode - POST
  • Paramètres d'entrée :
    • Paramètre 1 : Nom = réponse, Type = texte
    • Paramètre 2 : Nom = secret, Type = texte, Valeur = saisir la clé du site

Sortie

Nom - réponse

Enregistrez la configuration de votre composant personnalisé.

Étape 3 : Créer un journey reCAPTCHA

Créez un Custom Journey.

Commencez par un composant Entrée.

Ajoutez le formulaire que vous avez créé à l'étape 1

Ajoutez un composant Page au journey, connectez le composant Entrée au composant Page et liez le composant Page à la page que vous avez créée à l'étape 1.

Ajoutez le composant personnalisé que vous avez configuré à l'étape 2

Afin de vérifier la réponse avec Google, le composant personnalisé créé à l'étape 2 doit être ajouté.

Ajoutez un composant personnalisé dans le canevas et sélectionnez la configuration du composant personnalisé de l'étape 2 dans les propriétés du composant.

Définissez également le paramètre d'entrée de la réponse à la réponse du formulaire : [% requestValue('recaptchaResponse') %].

Connectez le composant Page au composant personnalisé et liez l'événement En cas de clic au bouton d'action de soumission du formulaire.

Ajoutez un composant de fractionnement basé sur des règles (facultatif)

Si vous avez besoin d'actions différentes en fonction de la réponse reCAPTCHA Google, vous pouvez ajouter un composant Fractionnement basé sur les règles.

  • Fractionnement basé sur : Expression
  • Expression : [%jsonValue(componentValue('GOOGLERECAPTCHA.RESPONSE'),'success')%]
  • Valeur : 1
  • Description : Succès

Plus d'actions...

En fonction du succès ou de l'échec, vous pouvez développer votre journey comme vous le souhaitez en enregistrant les données du formulaire, en affichant une page, etc.

Ajoutez une page de réponse

À la toute fin du journey, ajoutez un composant Page et reliez-le à une page dans laquelle vous pouvez afficher un message à l'intention du contact.

Vous pouvez utiliser plusieurs pages, en fonction de la réussite ou de l'absence de résultat.