Site non compatible avec cette vieillerie d'Internet Explorer. Pour une expérience complète, voir la liste des navigateurs supportés.
Thumbnail

 Memo Ajouter un captcha Google à un formulaire

Il n'est pas rare de voir une validation de formulaire complétée par un captcha, nous verrons donc dans ce tuto comment intégrer celui de Google, le fameux reCAPTCHA.


Post-it | Symfony

Auteur : Guillaume M.
Créé le : 19 Nov 2019
Dernière mise à jour : 16 Dec 2019

Pour cet exemple nous utiliserons la version 2 du reCAPTCHA en mode checkbox.

 

Préparation


Dans un premier temps, ils nous faut un compte Google pour pouvoir associer le reCAPTCHA à celui-ci et générer la clé qui nous servira de "contact" avec l'API Google. Pour se faire rendez-vous directement sur la page admin concernée :

Une fois le formulaire remplit et validé, nous obtenons 2 clés : une publique et une privée. Nous pouvons maintenant passer à l'intégration !

 

Intégration côté front


Pour l'intégration côté client, il y a 2 façon de faire : automatique et explicite. Ici nous utiliserons la seconde car celle-ci nous offre un peu plus de liberté pour la configuration du reCAPTCHA. Cela nous permet par exemple de changer le thème du widget ou d'avoir plusieurs reCAPTCHA sur une même page.

Commençons d'abord par créer une div dans notre formulaire qui sera utilisée pour générer le widget :

<form method="POST" action="#">
    ...
    <div id="myCaptcha"></div>
</form>

Puis intégrons ensuite la partie JS :

<script>
var onloadCallback = function() {
    grecaptcha.render('myCaptcha', {
        'sitekey' : 'inserer_la_cle_publique_ici',
        'theme' : 'dark'
    });
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Et voilà pour le côté client ! Si le thème dark ne convient pas, supprimer simplement la ligne correspondante de la fonction render().

Nous pouvons maintenant passer à l'intégration côté serveur !

 

Intégration côté back


Cette partie concerne le traitement du formulaire. Pour valider le reCAPTCHA nous devons intérroger l'API Google pour savoir si celui-ci est bien valide.

Pour se faire nous devons récupérer la réponse du reCAPTCHA via $_POST["g-recaptcha-response"] puis envoyer celle-ci pour enfin récupérer le résultat, ce qui nous donne :

$url = "https://www.google.com/recaptcha/api/siteverify";
$datas = [
    "secret" => "inserer_la_cle_secrete_ici",
    "response" => $_POST["g-recaptcha-response"],
];
$options = [
    "http" => [
        "header" => "Content-type: application/x-www-form-urlencoded\r\n",
        "method" => "POST",
        "content" => http_build_query($datas)
    ]
];
$context = stream_context_create($options);
$json_result = file_get_contents($url, false, $context);
$result = json_decode($json_result, true);
if($json_result === false || !$result["success"]){
    echo "Une erreur est survenue, il semblerait que vous soyez un robot !"
}

Ici plusieurs choses. Dans un premier temps nous préparons les données pour ensuites générer un contexte grâce à la fonction stream_context_create(...). Ensuite, nous interrogeons l'API grâce à la fonction file_get_contents(...) qui nous renvoie un résultat au format JSON.

Une fois le résultat retourné, il ne nous reste plus qu'à tester la validité de celui-ci et le tour est joué !