Ajouter Google reCaptcha au formulaire de souscription de Laravel

Lors de l’enregistrement sur notre site Laravel, on aimerait maintenant vérifier que ce n’est pas un robot qui tente de s’inscrire, et pour cela, on va ajouter le reCaptcha de Google !

Pré-requis

Vous devez avoir un compte Google pour réaliser ce tutoriel.

Obtenir les clés !

Pour obtenir les clés, inutile d’appeler passe partout (OK cette blague est nulle mais j’ai pas pu m’empêcher 🙂 ) mais il faut simplement se connecter à son compte Google et de se rendre sur : https://www.google.com/recaptcha

Note : Si vous enregistrez un nouveau site, il vous faudra faire la manipulation que demande Google pour prouver que vous en êtes le propriétaire, en général il suffit d’ajouter une entrée TXT avec le texte fournit à votre zone DNS.

Maintenant que nous avons nos clés, on va pouvoir commencer l’intégration dans notre site.

Intégration du reCaptcha !

Une super librairie est disponible sur Github va nous faciliter la tâche au possible, il s’agit de No-Captcha codé par un certain Nguyen Van Anh.

Dans le dossier de notre application Laravel, on va importer No-Captcha :

composer require anhskohbo/no-captcha

Une fois le chargement terminé, on va modifier le fichier config/app.php afin de lui indiquer la façade qui donne accès à cette nouvelle dépendance. On va l’ajouter au tableau des providers :

// fichier : config/app.php
// ...
'providers' => [
     // ...
     Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,
     // ...
 ],

Et au tableau des alias (facultatif) :

// fichier : config/app.php 
// ...
'aliases' => [
    // ...
    'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class, //No-Captcha
    // ...
 ],

Il nous faut publier la configuration

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Maintenant que tout est prêt, on va ajouter la clé publique et la clé secrète à nos variables d’environnement du site.

//fichier : .env
NOCAPTCHA_SITEKEY=6LeIU3cYUwSQc2VFMYdWFaMqvMA20kAAAANeTTwr
NOCAPTCHA_SECRET=6LeIUL3DWs8KV8CakI4gBsFzziVA20kAAAAQNTmI
(Ces clés ne sont pas valides, il vous faut vos propres clés.)

On va ajouter le code JavaScript nécessaire à son utilisation dans le layout de notre application :

//fichier : resources/views/layout/app.blade.php
// ...
<head>
    // ...
    {!! NoCaptcha::renderJs() !!}
</head>
// ...

Et on ajoute le code indiqué par Google à la fin de notre formulaire de création de compte en récupérant la clé depuis notre variable d’environnement du site :

//fichier : resources\views\auth\register.blade.php
// ...
<form>
   // ...
   {!! NoCaptcha::display() !!}
   //équivaux à : 
   <div class="g-recaptcha" data-sitekey="6LeIU3cYUwSQc2VFMYdWFaMqvMA20kAAAANeTTwr"></div>
   // ...
</form>
// ...

Note : La double accolade {{ }} permet de sécuriser le code en échappant les caractères spéciaux alors que la syntaxe {!! !!} n’effectue aucun traitement ! A utiliser avec prudence 😉

Visuellement ça paraît pas mal mais il faut encore ajouter la règle de validation au formulaire !

Validation du formulaire avec la réponse du reCaptcha

Dans le contrôleur, on va ajouter au validateur la règle comme quoi on attend la réponse du reCaptcha :

// fichier : app\Http\Controllers\Auth\RegisterController.php
// ...
protected function validator(array $data)
{
    return Validator::make($data, [
       'name' => 'required|string|max:255',
       'firstname' => 'required|string|max:255',
       'surname' => 'required|string|max:255',
       'email' => 'required|string|email|max:255|unique:users',
       'password' => 'required|string|min:6|confirmed',
       'g-recaptcha-response'=>'required|recaptcha'
   ]);
}

Maintenant votre formulaire est protégé contre les robots 🙂