Ajout de Google reCAPTCHA V2 aux formulaires en ligne importés

Protégez votre site des spams et des activités abusives en ajoutant Google reCAPTCHA V2 aux formulaires en ligne que vous importez dans Watson Campaign Automation. Google reCAPTCHA V2 est un service gratuit qui protège les sites en empêchant des scripteurs malveillants d'utiliser des scripts automatiques de saisie de données et des bots.

L'acquis utilisateur de reCAPTCHA V2 est amélioré à partir des versions antérieures. Dans la version 2, les utilisateurs confirment qu'ils sont humains en cochant tout simplement une case sur le formulaire en ligne. Dans les versions antérieures, les utilisateurs devaient demander une authentification CAPTCHA. Pour plus d'informations sur reCAPTCHA, voir Google developer documents. Ces données sont fournies à titre indicatif uniquement et vous n'êtes pas obligé de suivre les instruction du site de Google.

La prise en charge de reCAPTCHA V2 par Watson Campaign Automation est disponible pour les formulaires en ligne importés via Watson Campaign Automation. Elle n'est pas disponible pour les formulaires standard, progressifs ou de refus.

Les développeurs implémentent reCAPTCHA en ajoutant du code au fichier HTML du formulaire en ligne. Le code rend le widget reCAPTCHA v2 et vérifie la réponse de l'utilisateur à partir du système de back end de Watson Campaign's Automation's.

Lorsque l'utilisateur coche la case, il est automatiquement connecté (sans CAPTCHA) ou doit s'authentifier via CAPTCHA pour confirmer qu'il est humain.

Les développeurs peuvent utiliser les implémentations suivantes pour ajouter reCAPTCHA V2 aux formulaires en ligne importés :

Form Post
JSONP
AJAX

Implémentation Form Post

Pour utiliser la méthode Form Post, procédez comme suit :

Copiez et collez le code suivant dans le fichier HTML du formulaire en ligne.
```
<script src="https://www.google.com/recaptcha/api.js"></script>
```

Copiez et collez le code suivant dans le code du formulaire et assurez-vous que la balise du formulaire contient : data-captcha-type="recaptcha_v2".

<form action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha"
data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>

Exemple de méthode Form Post :

<!DOCTYPE HTML>
<html>
<head>
    <title>ReCaptcha Form Post</title>
</head>
<script
src="https://www.google.com/recaptcha/api.js"></script>
<body>

<form action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha"
data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>
    <input name="email" value="email" type="text"/>
    <input name="first" value="first" type="text"/>
    <input type="submit" name="submit2" value="submit this
form"/>
</form>

<h2>server response </h2>

<div id="response"></div>

</body>
</html>

Vérifiez que votre page HTML contient une balise HTML <form> avec method = POST et un bouton Soumettre, où <input type= submit>.
Importez le fichier du formulaire en ligne dans Watson Campaign Automation. Pour plus d'informations, consultez l'article sur l'importation d'un formulaire en ligne.

Implémentation JSONP

Pour utiliser la méthode JSONP, procédez comme suit :

Copiez et collez le code suivant dans le fichier HTML du formulaire en ligne.

<script
src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">

    function getResponse() {
        return grecaptcha.getResponse();
    }

    function getServiceEndPoint() {
        return "/service/captcha/recaptcha";
    }

    function validateCaptcha(formId) {
        var reCaptcha = document.createElement("script");
        reCaptcha.type = "text/javascript";
        reCaptcha.src = getServiceEndPoint()
            + "?g-recaptcha-response=" + getResponse()
            + "&formId=" + formId;
        document.getElementsByTagName('head')[0].appendChild(reCaptcha);
        return false;
    }

    function captchaSuccess(data) {
        if (data && data.isHuman === "true") {
            document.getElementById(data.formId).submit();
        } else {
            grecaptcha.reset();
            document.getElementById("response").innerHTML =
"invalid captcha";
        }
    }

    function captchaFailure(data) {
        if (data) {
            document.getElementById(data.formId).submit();
        }
    }
</script>

Copiez et collez le code suivant dans le code du formulaire et assurez-vous que la balise du formulaire contient : data-captcha-type="recaptcha_v2".

<form id="myForm" onsubmit="return validateCaptcha('myForm');"
action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>

Exemple de méthode JSONP :

</head>
<body>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">

    function getResponse() {
        return grecaptcha.getResponse();
    }

    function getServiceEndPoint() {
        return "/service/captcha/recaptcha";
    }

    function validateCaptcha(formId) {
        var reCaptcha = document.createElement("script");
        reCaptcha.type = "text/javascript";
        reCaptcha.src = getServiceEndPoint()
            + "?g-recaptcha-response=" + getResponse()
            + "&formId=" + formId;
        document.getElementsByTagName('head')[0].appendChild(reCaptcha);
        return false;
    }

    function captchaSuccess(data) {
        if (data && data.isHuman === "true") {
            document.getElementById(data.formId).submit();
        } else {
            grecaptcha.reset();
            document.getElementById("response").innerHTML = "invalid
captcha";
        }
    }

    function captchaFailure(data) {
        if (data) {
            document.getElementById(data.formId).submit();
        }
    }
</script>

<form id="myForm" onsubmit="return validateCaptcha('myForm');"
action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha"
data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>
    <input name="email" value="email" type="text"/>
    <input name="first" value="first" type="text"/>
    <input type="submit" value="submit this form"/>
</form>


<h2>server response </h2>

<div id="response"></div>

</body>

Vérifiez que votre page HTML contient une balise HTML <form> avec method = POST et un bouton Soumettre, où <input type= submit>.
Importez le fichier du formulaire en ligne dans Watson Campaign Automation. Pour plus d'informations, consultez l'article sur l'importation d'un formulaire en ligne.

Implémentation AJAX

Pour utiliser la méthode AJAX, procédez comme suit :

Copiez et collez le code suivant dans le fichier HTML du formulaire en ligne.

<script
src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function getResponse() {
        return grecaptcha.getResponse();
    }

    function validateCaptcha(form) {
        var response = encodeURIComponent(getResponse());

        var parameters = "g-recaptcha-response=" + getResponse();

        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status ==
200) {
                var response = JSON.parse(xmlhttp.responseText);
                if (response && response.isHuman === "true")
{
                    form.submit();
                } else {
                    Recaptcha.reload();
                    document.getElementById("response").innerHTML = "invalid captcha";
                }
            }
        };

        xmlhttp.open("POST", "/service/captcha/recaptcha", true);
        xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
        xmlhttp.send(parameters);
        return false;

    }

</script>

Copiez et collez le code suivant dans le code du formulaire et assurez-vous que la balise du formulaire contient : data-captcha-type="recaptcha_v2".

<form onsubmit="return validateCaptcha(this);" action="/submit"
data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha"
data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>

Exemple de méthode AJAX :

<!DOCTYPE HTML>

<html>
<head>
    <title>ReCaptcha AJAX</title>
</head>
<body>
<script
src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function getResponse() {
        return grecaptcha.getResponse();
    }

    function validateCaptcha(form) {
        var response = encodeURIComponent(getResponse());

        var parameters = "g-recaptcha-response=" + getResponse();

        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status ==
200) {
                var response = JSON.parse(xmlhttp.responseText);
                if (response && response.isHuman === "true")
{
                    form.submit();
                } else {
                    Recaptcha.reload();
                    document.getElementById("response").innerHTML =
"invalid captcha";
                }
            }
        };

        xmlhttp.open("POST", "/service/captcha/recaptcha", true);
        xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
        xmlhttp.send(parameters);
        return false;

    }

</script>

<form onsubmit="return validateCaptcha(this);" action="/submit"
data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha"
data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>
    <input name="email" value="email" type="text"/>
    <input name="first" value="first" type="text"/>
    <input type="submit" name="submit2" value="submit this
form"/>
</form>

<h2>server response </h2>

<div id="response"></div>


</body>
</html>

Vérifiez que votre page HTML contient une balise HTML <form> avec method = POST et un bouton Soumettre, où <input type= submit>.
Importez le fichier du formulaire en ligne dans Watson Campaign Automation. Pour plus d'informations, consultez l'article sur l'importation d'un formulaire en ligne.