Laravel 10+ : Utiliser reCAPTCHA avec Livewire

Présentation

Laravel, dans sa version 10+, continue de se positionner comme l'un des frameworks PHP les plus populaires grâce à sa simplicité, sa flexibilité et son écosystème riche. Parallèlement, Livewire, une bibliothèque puissante, permet de développer des interfaces dynamiques et réactives sans recourir à des frameworks JavaScript lourds.

Cependant, avec l'essor des applications interactives, la sécurité est devenue un enjeu crucial, notamment pour protéger les formulaires en ligne contre les attaques de bots. C'est là qu'intervient Google reCAPTCHA, une solution performante qui permet de vérifier si une interaction provient d'un humain ou d'un bot.

Dans cet article, nous allons explorer comment intégrer reCAPTCHA dans une application Laravel 10+ utilisant Livewire. Vous apprendrez à :

• Configurer reCAPTCHA dans votre projet.
• Vérifier les réponses du reCAPTCHA via le serveur.
• Intégrer cette protection dans un composant Livewire pour renforcer la sécurité de vos formulaires.

Que vous soyez un développeur débutant ou expérimenté, ce guide vous permettra de sécuriser efficacement vos formulaires tout en conservant la fluidité et la simplicité qu'offre Livewire.

Étape 1 : Installer Livewire

Par défaut, lorsque vous créez votre application Laravel sur la version 10 ou supérieur, livewire est installé dessus. Mais si ce n'est pas le cas, vous pouvez l'installer via la commande :

composer require livewire/livewire

Ensuite, vous pouvez publier le fichier config avec la commande suivante : 

php artisan livewire:publish --config

Étape 2 : Créer un reCAPTCHA

1. Accéder à la console reCAPTCHA : Rendez-vous sur le site officiel de la console Google reCAPTCHA :
   https://www.google.com/recaptcha/admin/create.
2. Créer une nouvelle application
   • Label : Donnez un nom identifiable à votre application, par exemple : MonApplicationLivewire.
   • Type de reCAPTCHA :
   • Sélectionnez reCAPTCHA v2 (recommandé pour les formulaires simples).
   • Domaines : Ajoutez les noms de domaine sur lesquels votre application sera utilisée. Pour un environnement local, entrez localhost.
   • Acceptation des termes : Cochez la case pour accepter les conditions d'utilisation.
   • Cliquez sur Envoyer pour valider.
3. Obtenir les clés API

Une fois l'application créée, Google vous fournit deux clés importantes :

• Clé du site : utilisée dans le frontend pour afficher le reCAPTCHA.
• Clé secrète : utilisée dans le backend pour valider les réponses.

Étape 3 : Configurer reCAPTCHA dans Laravel

• Ajouter les clés dans le fichier .env

Collez les clés fournies dans votre fichier .env de l'application Laravel :

RECAPTCHA_SITE_KEY=your-site-key
RECAPTCHA_SECRET_KEY=your-secret-key

• Créer une configuration personnalisée

Dans le fichier config/services.php, ajoutez la configuration suivante pour centraliser les clés reCAPTCHA :

return [
    // Autres services...
    'recaptcha' => [
        'site_key' => env('RECAPTCHA_SITE_KEY'),
        'secret_key' => env('RECAPTCHA_SECRET_KEY'),
    ],
];

Étape 4 : Créer une Rule Validation pour reCAPTCHA

Laravel permet de créer des règles personnalisées pour centraliser et réutiliser les validations. Une règle dédiée pour reCAPTCHA simplifie la gestion et garantit une validation cohérente.

1. Créer une règle personnalisée
   • Exécutez la commande Artisan suivante pour générer une règle de validation :

   • php artisan make:rule Recaptcha

   • Cela génère un fichier situé dans app/Rules/Recaptcha.php
2. Modifier la règle de validation
   • Ouvrez le fichier généré et implémentez la logique de validation reCAPTCHA :

   • namespace App\Rules; 
     use Illuminate\Contracts\Validation\Rule; 
     use Illuminate\Support\Facades\Http; 
     class Recaptcha implements Rule{
      public function passes($attribute, $value)
      {
         $response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [ 
             'secret' => config('services.recaptcha.secret_key'), 'response' => $value, 
         ]);
         return $response->json('success'); 
      }
      public function message()
      { 
         return 'La vérification reCAPTCHA a échoué. Veuillez réessayer.'; 
      }
     }

Étape 5 : Création du formulaire avec Livewire

Dans cette étape, nous allons créer un formulaire dynamique avec Livewire qui inclut la vérification reCAPTCHA.

1. Générer le composant Livewire
   • Exécutez la commande Artisan pour créer un nouveau composant Livewire :
   • php artisan make:livewire RecaptchaForm
   • Cela crée deux fichiers :
   • La classe du composant dans app/Http/Livewire/RecaptchaForm.php
   • La vue associée dans resources/views/livewire/recaptcha-form.blade.php
2. Implémenter la logique du formulaire dans le composant Livewire
   • Ouvrez le fichier RecaptchaForm.php et configurez la logique du formulaire :

   • namespace App\Http\Livewire;
     
     use Livewire\Component;
     use App\Rules\Recaptcha;
     
     class RecaptchaForm extends Component
     {
         public $name;
         public $email;
         public $recaptchaResponse;
     
         protected $rules = [
             'name' => 'required|string|max:255',
             'email' => 'required|email|max:255',
             'recaptchaResponse' => ['required', new Recaptcha],
         ];
     
         public function submit()
         {
             $this->validate();
     
             // Logique après validation réussie
             session()->flash('message', 'Formulaire soumis avec succès !');
             $this->reset(); // Réinitialiser les champs après soumission
         }
     
         public function render()
         {
             return view('livewire.recaptcha-form');
         }
     }

   • 
     
3. Ajouter le formulaire dans la vue Livewire
   • Ouvrez le fichier resources/views/livewire/recaptcha-form.blade.php et créez le formulaire :

   • <div>
         <form wire:submit.prevent="submit">
             <!-- Champ Nom -->
             <div>
                 <label for="name">Nom</label>
                 <input type="text" id="name" wire:model="name" />
                 @error('name') <span class="error">{{ $message }}</span> @enderror
             </div>
     
             <!-- Champ Email -->
             <div>
                 <label for="email">Email</label>
                 <input type="email" id="email" wire:model="email" />
                 @error('email') <span class="error">{{ $message }}</span> @enderror
             </div>
     
             <!-- reCAPTCHA -->
             <div class="g-recaptcha" 
                  data-sitekey="{{ config('services.recaptcha.site_key') }}" 
                  data-callback="onRecaptchaSuccess"></div>
             <input type="hidden" id="recaptchaResponse" wire:model="recaptchaResponse">
             @error('recaptchaResponse') <span class="error">{{ $message }}</span> @enderror
     
             <!-- Bouton Soumettre -->
             <button type="submit">Soumettre</button>
         </form>
     
         <!-- Message de succès -->
         @if (session()->has('message'))
             <div class="success">
                 {{ session('message') }}
             </div>
         @endif
     </div>
     
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
         function onRecaptchaSuccess(token) {
             document.getElementById('recaptchaResponse').value = token;
             Livewire.emit('setRecaptchaResponse', token); // Permet d'interagir avec Livewire si nécessaire
         }
     </script>

4. Intégrer le composant dans une page
   • Ajoutez le composant Livewire dans une page Laravel, par exemple dans resources/views/welcome.blade.php :

   • <livewire:recaptcha-form />

En intégrant Google reCAPTCHA dans un formulaire, vous ajoutez une couche essentielle de sécurité à votre application web, protégeant vos formulaires des bots tout en garantissant une expérience utilisateur fluide. Ce guide a couvert chaque étape, de la configuration de reCAPTCHA à la création d’un formulaire dynamique avec Livewire.

N’hésitez pas à explorer davantage pour personnaliser cette intégration selon vos besoins et renforcer la sécurité de vos applications.

Besoin d’autres améliorations ou de guides similaires ? Je suis là pour vous aider ! 😊