Aggiungere Turnstile di Cloudflare a Laravel Breeze Auth

La scorsa settimana abbiamo visto come aggiungere la protezione delle pagine di login di Filament da accessi non autorizzati eseguiti da bots, usando la tecnologia di Cloudflare chiamata Turnstile, vedi questo articolo.

Se non hai ancora creato un progetto Laravel che gestisca l’autenticazione segui questo articolo.

Turnstile

Immagino che avrai già un account su Cloudflare, ma nel caso non lo avessi ancora puoi andare qui. Una volta creato l’account devi creare il primo widget, assegnargli un nome che serve a te e aggiungere un dominio (quello del tuo progetto… ovviamente).

A questo punto ti verranno mostrate le 2 chiavi necessarie: SITE_KEY e SECRET_KEY, quindi salvale in fondo al file .env:

TURNSTILE_SITE_KEY=xxxxxxxx
TURNSTILE_SECRET_KEY=xxxxxxxx

Rendiamole accessibili inserendo questo codice nel file config/services.php, prima della chiusura dell’array:

'turnstile' => [
    'site_key' => env('TURNSTILE_SITE_KEY'),
    'secret_key' => env('TURNSTILE_SECRET_KEY'),
],

Laravel Rule

Creiamo una “regola” di Laravel che gestisca la validazione del token creato da Turnstile e per farlo eseguiamo da console:

php artisan make:rule Turnstile

Viene quindi creato il file Turnstile.php dentro la cartella app/Rules. Il contenuto sarà questo:

<?php

namespace App\Rules;

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

class Turnstile implements ValidationRule
{
    public function validate(string $attribute, mixed $value, Closure $fail): void
    {
        $response = Http::asForm()->post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [
            'secret'   => config('services.turnstile.secret_key'),
            'response' => $value,
            'remoteip' => request()->ip(),
        ]);

        if (! $response->json('success')) {
            $fail(__('Verifica CAPTCHA non riuscita. Riprova.'));
        }
    }
}

Controllers

Apri il file RegisteredUserController.php dentro app/Http/Controllers/Auth ed aggiungi la libreria in altouse App\Rules\Turnstile;

e la regola di validazione 'cf-turnstile-response' => ['required', new Turnstile], nell’array $request->validate([...]); dentro il metodo store.

Requests

Stesso discorso per il file LoginRequest.php dentro app/Http/Requests/Auth, ma stavolta il metodo si chiama rules.

Views

Siamo alle battute finali: adeguiamo le view blade per integrare il token di Turnstile. Cominciamo da register.blade.php:

Prima della chiusura del tag form (</form>) richiamiamo la libreria javascript:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

e poco sopra, prima dell’ultimo bottone aggiungiamo un elemento contenente i dati necessari al meccanismo di controllo:

<div class="mt-4">
  <div class="cf-turnstile" data-sitekey="{{ config('services.turnstile.site_key') }}"></div>
  <x-input-error :messages="$errors->get('cf-turnstile-response')" class="mt-2" />
</div>

Pulire tutto

Sembra una banalità, ma non lo è: quando si interviene sul file .env, sulle configurazioni, e talvolta nelle views, conviene sempre pulire le varie cache:

php artisan config:clear
php artisan cache:clear

Adesso basterà andare sulla pagina di registrazione o login (che con Breeze saranno banalmente “register” e “login”) e fare i test del caso.