C'est quoi ReCaptcha ?

Re-catpcha est une API d'un système anti robot permettant de sécuriser des formulaires de contact , la connexion , inscription. Elle permet entre autre d'analyser le trafic réel de votre site web.

Comment ça fonctionne ?

Ce système utilise une intelligence artificielle qui détecte s'il s'agit bien d'un clic fait par un humain et si c'est bien le cas, le CAPTCHA est validé.

Demo ReCaptcha by Google

Il existe donc 2 versions : V2 et V3

Pré-requis

Il faut tout d'abord il faut inscrire le site sur le service de google https://developers.google.com/recaptcha/

2 clés sont générés par google :

• une clé secrète (pour le back-end)
• une clé publique ( pour le front-end)

Intégration Front-end

Pour l'intégration front-end il suffit de copier/coller le code suivant dans votre formulaire de contact , d'inscription ou de connexion :

<div class="g-recaptcha" name="recaptcha" data-sitekey="CLEF-PUBLIQUE"></div>

<form method="POST" action="" accept-charset="UTF-8">
        <label for="lastname">Nom</label>
        <input type="text" name="lastname" required />

        <label for="firstname">Prénom</label>
        <input type="text" name="firstname" required />

        <label for="mail">Adresse mail</label>
        <input type="email" name="mail" required />

        <label for="password">Mot de passe</label>
        <input type="password" name="password" required />

    <div class="g-recaptcha" name="recaptcha" data-sitekey="CLEF-PUBLIQUE"></div>

        <input type="submit" value="Valider"/>   

Ne pas oublier de copier votre clé publique et de l'insérer dans le champ suivant data-sitekey

Il nous faut également insérer 2 scripts javascript

<script src="https://www.google.com/recaptcha/api.js?render=CLEF-PUBLIQUE"></script>
<script>
grecaptcha.ready(function () {
	grecaptcha.execute('CLEF-PUBLIQUE', { action: 'homepage' }).then(function (token) {
		var recaptcha = document.getElementById('recaptcha');
		recaptcha.value = token;
	});
});
</script>

Ne pas oublier de copier/coller votre clé publique (A insérer à la place de "CLEF-PUBLIQUE")

Intégration Back-end

Côté Back-end il suffit d'insérer ce morceau de code dans votre traitement de fomulaire php

!! Ne pas oublier de copier/coller votre clé publique (A insérer à la place de "CLEF-PRIVE")

$recaptcha = new \ReCaptcha\ReCaptcha("CLEF-PRIVE");
                    $resp = $recaptcha->setExpectedHostname('127.0.0.1')
                                    ->verify($gRecaptchaResponse, $remoteIp);
                        if ($resp->isSuccess()) {
                            // Verified!
                            dump ('captcha bon');
                        } else {
                            $errors = $resp->getErrorCodes();
                            dump($errors, "veuillez cocher le captcha");
                        }

Via composer

Il est possible d'installer Google ReCaptcha par le biais de composer

composer req google/recaptcha:latest

Documentation : Packagist