Comment implémenter Google reCAPTCHA dans Laravel & Breeze.

Salut ! Prêt à transformer votre site Laravel en véritable forteresse ?

Aujourd'hui, on va parler d'un sujet qui nous concerne tous : la sécurité. Vous avez probablement déjà vu ces petites cases à cocher "Je ne suis pas un robot". C'est le fameux Google reCAPTCHA ! L'intégrer avec Laravel & Breeze, c'est un peu comme offrir un garde du corps à votre formulaire de connexion.

Vous vous demandez sûrement : "Est-ce que ça va ralentir mon site ?" ou "Est-ce compliqué à installer ?". Ne bougez pas, on va voir ensemble comment faire ça proprement, avec un code optimisé pour le SEO et la performance.

Pourquoi choisir Google reCAPTCHA ?

Avant de plonger dans le code, petit rappel. Les bots sont partout ! Ils essaient de forcer vos mots de passe ou de spammer vos bases de données. Utiliser reCAPTCHA, c'est s'assurer que seuls vos utilisateurs humains (ceux qui achètent vos produits ou lisent vos articles !) puissent entrer.

En plus, saviez-vous que Google analyse aussi l'adresse IP pour détecter les comportements suspects ? C'est ce qu'on appelle la protection contre les "fermes à bots". Plutôt cool, non ?

La structure de notre implémentation

Voici le plan de match pour sécuriser votre application :

Configuration des clés API
Préparation du Front-end (Blade)
Création de la règle de validation (Custom Rule)
Intégration dans LoginRequest

Étape 1 : Le coffre-fort (.env et config)

Tout commence par vos clés secrètes. Allez sur la console Google reCAPTCHA pour générer vos identifiants.

Vos domains : Local, en production

Vos clé : copier

Une fois en main, on les place dans le fichier .env :

GOOGLE_RECAPTCHA_SITE_KEY="votre_cle_publique"
GOOGLE_RECAPTCHA_SECRET_KEY="votre_cle_secrete"

L'astuce de pro : Ne lisez jamais vos clés directement via env() dans votre code ! Pourquoi ? Parce qu'en production, on utilise souvent php artisan config:cache. Si vous faites cela, vos clés deviendront invisibles pour Laravel. Passez toujours par config/services.php :

// config/services.php
'recaptcha' => [
    'site_key'   => env('GOOGLE_RECAPTCHA_SITE_KEY'),
    'secret_key' => env('GOOGLE_RECAPTCHA_SECRET_KEY'),
],

Étape 2 : Un Front-end aux petits oignons

Lien utile :

Dans votre fichier resources/views/auth/login.blade.php, nous allons ajouter le script de Google et le widget. Pour garder un SEO au top, on utilise async defer pour ne pas bloquer le rendu de la page.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div class="mb-4">
    <x-input-label :value="__('Vérification de sécurité')" class="mb-2 block" />
    <div class="flex justify-center items-center">
        <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>
    </div>
    <x-input-error :messages="$errors->get('g-recaptcha-response')" class="mt-2" />
</div>

Illustration

Étape 3 : Créer la règle de validation "ReCaptcha"

Vérification de la réponse de l'utilisateur

On ne va pas laisser passer n'importe quoi ! On va créer une règle personnalisée :

php artisan make:rule ReCaptcha

Voici à quoi doit ressembler votre fichier app/Rules/ReCaptcha.php pour une sécurité maximale :

namespace App\Rules;

use Closure;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Support\Facades\Http;

class ReCaptcha implements ValidationRule
{
    public function validate(string $attribute, mixed $value, Closure $fail): void
    {
        $response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
            'secret'   => config('services.recaptcha.secret_key'),
            'response' => $value,
            'remoteip' => request()->ip(), // On envoie l'IP pour plus de précision !
        ])->json();

    }
}

C'est ici que votre serveur communique secrètement avec celui de Google :

asForm() : Très important. Google n'accepte pas le format JSON pur pour cette API. Cette méthode force l'envoi des données au format application/x-www-form-urlencoded (comme un formulaire HTML classique).
post(...) : On envoie les données à l'URL de vérification de Google.
secret : On récupère votre clé secrète via config(). C'est votre preuve d'identité auprès de Google.
response : On envoie la $value (le jeton de l'utilisateur). Google va le déchiffrer pour voir s'il est valide et s'il n'a pas déjà été utilisé.
remoteip : Vous envoyez l'adresse IP de l'utilisateur. Cela aide Google à détecter si un robot essaie de valider des milliers de comptes depuis la même connexion.

Pourquoi c'est une méthode robuste ?

Sécurité côté serveur : Même si un pirate manipule le code HTML de votre page pour "masquer" le captcha, la validation échouera car votre serveur demandera confirmation directement à Google.
Rapidité : L'utilisation de la façade Http de Laravel est asynchrone et très performante, ce qui ne ralentit pas la connexion de l'utilisateur.
Réutilisabilité : Vous pouvez maintenant utiliser new ReCaptcha() sur n'importe quel formulaire de votre site (Contact, Login, Register) en une seule ligne.

Étape 4 : Activer la protection dans Laravel Breeze

Dernière étape ! Il faut dire à Laravel d'utiliser cette règle lors de la connexion. Direction app/Http/Requests/Auth/LoginRequest.php :

use App\Rules\ReCaptcha;

public function rules(): array
{
    return [
        'email' => ['required', 'string', 'email'],
        'password' => ['required', 'string'],
        'g-recaptcha-response' => ['required', new ReCaptcha()], // Et voilà !
    ];
}

public function messages(): array
{
    return [
        'g-recaptcha-response.required' => 'La vérification anti-robot est obligatoire.',
    ];
}

Valide

🧐 FAQ : Vos questions fréquentes

1. Pourquoi envoyer remoteip à Google ? Cela permet à Google de vérifier si l'IP de celui qui a rempli le captcha est la même que celle qui demande la validation. Ça bloque les attaques par injection de jetons.

2. Le widget ralentit-il mon score Google PageSpeed ? En utilisant l'attribut async defer sur le script, vous minimisez l'impact sur le temps de chargement initial de la page.

3. Est-ce que cela fonctionne avec reCAPTCHA v3 ? Le principe est similaire, mais la v3 ne demande pas d'action à l'utilisateur. Elle renvoie un score (0.0 à 1.0) que vous devez valider dans votre règle.

4 Est-ce que cela fonctionne avec La creation d'un compte? Oui, voila un exemple de capture meme procedure et cette fois, utiliser auth/register.blade.php

et Auth/RegisteredUserController.php

Conclusion

Félicitations ! Vous venez de rendre votre application Laravel Breeze beaucoup plus sûre. En combinant les bonnes pratiques de configuration (config()) et une validation robuste, vous protégez vos données tout en restant performant.

Prêt à passer au niveau supérieur ? Essayez d'implémenter cela sur vos formulaires d'inscription ou de contact pour dormir sur vos deux oreilles ! 🚀

On reste motivé, et n'oubliez pas : un code sécurisé est un code heureux ! ✨