Autenticazione in Laravel con Breeze

In questo articolo approfondiremo le caratteristiche di Laravel Breeze, lo confronteremo con altri starter kit di Laravel e vi guideremo attraverso il processo di installazione. Inoltre, esploreremo i file generati, personalizzeremo il flusso di registrazione e modificheremo l’interfaccia utente per adattarla alle esigenze del vostro progetto.

Cos’è Laravel Breeze

Laravel Breeze è un pacchetto di scaffolding di autenticazione per Laravel. Utilizzandolo, è possibile avere un sistema di login e registrazione perfettamente funzionante in pochi minuti. Supporta Blade, Vue e React e dispone anche di una versione API.

Le caratteristiche principali di Laravel Breeze sono:

• Accesso
• Registrazione
• Reimpostazione della password
• Verifica dell’e-mail
• Pagina del profilo, con modifica

Una domanda comunemente posta è quando scegliere Breeze e quando utilizzare altri pacchetti di autenticazione Laravel.

Esistono due pacchetti simili nell’ecosistema Laravel e questo può creare confusione se si è nuovi in questo settore.

Il primo è Laravel Fortify, un backend di autenticazione headless, ideale per costruire sistemi di autenticazione personalizzati senza un’interfaccia utente predefinita.

Scegliete Fortify se avete bisogno di un’interfaccia utente molto personalizzata o se siete responsabili solo del backend dell’autenticazione.

L’altro pacchetto è Laravel Jetstream che offre un punto di partenza più avanzato per le applicazioni Laravel, includendo funzionalità come l’autenticazione a due fattori e la gestione dei team.

Al contrario, Laravel Breeze è più adatto agli sviluppatori che cercano un’impalcatura di autenticazione semplice ma personalizzabile, con il supporto di vari framework frontend e un overhead minimo.

Installare Laravel Breeze in un nuovo progetto Laravel

Per semplificare le cose, supponiamo di aver già creato un nuovo progetto Laravel; se avete bisogno di aiuto, potete seguire la nostra guida per configurare una nuova applicazione Laravel su Kinsta.

Dopodiché, installiamo Laravel Breeze con il seguente comando:

composer require laravel/breeze --dev

In questo tutorial utilizzeremo Blade, il motore di template predefinito di Laravel. Per avviare lo scaffolding, eseguite questi comandi:

php artisan breeze:install blade
 
php artisan migrate
npm install
npm run dev

Laravel Breeze dispone anche di versioni di Vue / React / API personalizzate; per utilizzarle è sufficiente inserire un flag nel comando.

Per Vue eseguite:

php artisan breeze:install vue

Per React eseguite:

php artisan breeze:install react

Per l’esecuzione di API personalizzate:

php artisan breeze:install api

Dopo aver installato Laravel Breeze, noterete che sono stati generati diversi file nella directory del progetto. Questi file includono percorsi, controller e viste che gestiscono l’autenticazione, la reimpostazione della password e la verifica dell’e-mail. Potete esplorare questi file e personalizzarli per adattarli ai requisiti della vostra applicazione.

Come personalizzare l’interfaccia utente

Laravel Breeze utilizza TailwindCSS; per personalizzare l’interfaccia utente possiamo utilizzare qualsiasi classe utility di Tailwind.

È possibile personalizzare ogni parte dell’interfaccia utente modificando i file delle viste nella cartella resources/views/auth; alcune parti dell’interfaccia utente sono organizzate in componenti Blade, che si trovano nella cartella resources/views/components.

Cambiare il logo di Laravel con il logo dell’organizzazione

Laravel Breeze utilizza i componenti Blade per organizzare i codici utilizzati più volte. Ad esempio, ecco come cambiare il logo nel file resources/views/components/application-blade.php.

Aprite il file e sostituite il contenuto attuale con il vostro file svg.

Aprite il file resources/views/components/primary-button.blade.php. Qui potete apportare qualsiasi modifica, come ad esempio personalizzare il pulsante della pagina di login con il colore del vostro brand.

Come personalizzare il flusso di registrazione

La pagina di registrazione di Laravel Breeze è dotata di 4 campi predefiniti:

1. Nome
2. Email
3. Password
4. Conferma della password

Per estendere i campi che vorremmo fossero presenti nel nostro modulo di registrazione, dobbiamo aprire il file resources/views/auth/register.blade.php.

Per continuare con il nostro esempio, creeremo un campo telefono dopo il campo email. Per farlo, aggiungete il seguente codice dopo il campo email:

<div class="mt-4">
   <x-input-label for="phone" :value="__('Phone')" />
   <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
   <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

Il campo telefono è ora visibile nel modulo di registrazione.

Modificare il backend per memorizzare il nuovo campo telefono

Ora dobbiamo gestire i nuovi dati nel backend. Sono necessari tre passaggi: innanzitutto creare ed eseguire una nuova migrazione, poi aggiungere la logica al controller per memorizzare i dati e infine aggiungere phone alle proprietà compilabili nel modello User.

Create una nuova migrazione che aggiunga un campo telefono alla nostra tabella users.

php artisan make:migration add_phone_field_to_users_table

Aprite il file creato e aggiungete un campo stringa chiamato “phone”:

Schema::table('users', function (Blueprint $table) {
   $table->string('phone')->nullable();
});

Dopodiché eseguite la migrazione:

php artisan migrate

Per memorizzare il campo telefono dobbiamo modificare il metodo RegisteredUserController.php, nel metodo store apportate le seguenti modifiche:

$request->validate([
   'name' => ['required', 'string', 'max:255'],
   'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
   ‘phone’ => [‘required’, ‘string’, ‘max:255’],
   'password' => ['required', 'confirmed', RulesPassword::defaults()],
]);

$user = User::create([
   'name' => $request->name,
   'email' => $request->email,
   ‘phone’ => $request->phone,
   'password' => Hash::make($request->password),
]);

Non dimenticate di aggiungere il campo phone alle proprietà compilabili del modello Utente.

protected $fillable = [
   'name',
   'email',
   'phone',
   'password',
];

Ecco fatto, ora abbiamo il modulo di registrazione modificato!

Come abilitare la verifica dell’e-mail

La verifica dell’e-mail è il processo di controllo e autenticazione delle e-mail fornite dagli utenti nel modulo di registrazione.

Per abilitare questa funzione dobbiamo implementare l’interfaccia MustVerifyEmail nel nostro modello Utente.

use Illuminate\Contracts\Auth\MustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

In seguito, quando un utente si registrerà, gli verrà inviata un’e-mail con un link per verificare la sua e-mail.

Tuttavia, dobbiamo ancora aggiungere un middleware ai nostri percorsi in cui vogliamo limitare l’accesso agli utenti non verificati.

Creeremo un nuovo percorso chiamato “only-verified” e aggiungeremo i middleware “auth” e “verified”. Il middleware auth impedisce l’accesso agli ospiti e il middleware verified controlla se l’utente ha verificato la propria email.

Ecco un esempio:

Route::get('/only-verified', function () {
   return view('only-verified');
})->middleware(['auth', 'verified']);

Riepilogo

Laravel Breeze è un ottimo strumento per impostare rapidamente un sistema di autenticazione per il vostro progetto Laravel.

Grazie alla sua impalcatura semplice e personalizzabile, potete concentrarvi sulla creazione dell’applicazione senza preoccuparvi del processo di autenticazione.

Se state cercando un posto dove ospitare la vostra nuova applicazione Laravel, date un’occhiata alla nostra soluzione di Hosting Laravel con le sue potenti funzionalità che rendono la distribuzione e la gestione delle app facile e veloce.