Authentifizierung in Laravel mit Breeze

In diesem Artikel gehen wir auf die Funktionen von Laravel Breeze ein, vergleichen es mit anderen Laravel-Starterkits und führen dich durch den Installationsprozess. Außerdem werden wir uns mit den generierten Dateien befassen, den Registrierungsablauf anpassen und die Benutzeroberfläche (UI) auf die Bedürfnisse deines Projekts abstimmen.

Was ist Laravel Breeze?

Laravel Breeze ist ein Authentifizierungsgerüst für Laravel. Mit ihm kannst du in wenigen Minuten ein voll funktionsfähiges Anmelde- und Registrierungssystem erstellen. Es unterstützt Blade, Vue und React und hat auch eine API-Version.

Die wichtigsten Funktionen von Laravel Breeze sind:

• Anmeldung
• Registrierung
• Passwort zurücksetzen
• E-Mail-Überprüfung
• Profilseite, mit Bearbeitung

Eine häufig gestellte Frage ist, wann du dich für Breeze entscheidest und wann du andere Laravel-Authentifizierungspakete verwendest.

Es gibt zwei ähnliche Pakete im Laravel-Ökosystem, was verwirrend sein kann, wenn du neu in diesem Bereich bist.

Das erste ist Laravel Fortify, ein Headless-Authentifizierungs-Backend, das sich ideal für den Aufbau benutzerdefinierter Authentifizierungssysteme ohne vorgefertigte Benutzeroberfläche eignet.

Entscheide dich für Fortify, wenn du eine sehr individuelle Benutzeroberfläche brauchst oder wenn du nur für das Backend der Authentifizierung verantwortlich bist.

Das andere Paket ist Laravel Jetstream, das einen fortschrittlicheren Ausgangspunkt für Laravel-Anwendungen bietet, einschließlich Funktionen wie Zwei-Faktor-Authentifizierung und Team-Management.

Laravel Breeze eignet sich dagegen am besten für Entwickler, die ein einfaches, aber anpassbares Authentifizierungsgerüst mit Unterstützung für verschiedene Frontend-Frameworks und minimalem Overhead suchen.

Installation von Laravel Breeze in einem neuen Laravel-Projekt

Der Einfachheit halber gehen wir davon aus, dass wir bereits ein neues Laravel-Projekt erstellt haben. Wenn du Hilfe brauchst, kannst du unserer Anleitung zum Einrichten einer neuen Laravel-Anwendung bei Kinsta folgen.

Danach müssen wir Laravel Breeze mit dem folgenden Befehl installieren:

composer require laravel/breeze --dev

In diesem Tutorial werden wir Blade verwenden, die Standard-Templating-Engine für Laravel. Um das Gerüst zu starten, führe diese Befehle aus:

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

Laravel Breeze hat auch Versionen für Vue / React / Custom API; um diese zu verwenden, musst du nur ein Flag in den Befehl einfügen.

Für Vue führe folgenedes aus:

php artisan breeze:install vue

Für React:

php artisan breeze:install react

Für benutzerdefinierte API:

php artisan breeze:install api

Nach der Installation von Laravel Breeze wirst du feststellen, dass mehrere Dateien in deinem Projektverzeichnis erstellt wurden. Diese Dateien enthalten Routen, Controller und Ansichten, die die Authentifizierung, das Zurücksetzen von Passwörtern und die E-Mail-Überprüfung steuern. Du kannst diese Dateien erforschen und sie an die Anforderungen deiner Anwendung anpassen.

Wie du die Benutzeroberfläche anpasst

Laravel Breeze nutzt TailwindCSS unter der Haube. Um die Benutzeroberfläche anzupassen, können wir jede Tailwind Utility-Klasse verwenden.

Du kannst jeden Teil der Benutzeroberfläche anpassen, indem du die View-Dateien im Ordner resources/views/auth; bearbeitest. Einige Teile der Benutzeroberfläche sind in Blade-Komponenten organisiert, die du im Ordner resources/views/components findest.

Ändern des Laravel-Logos in das Logo unserer Organisation

Laravel Breeze verwendet Blade-Komponenten, um mehrfach verwendete Codes zu organisieren. So kannst du zum Beispiel das Logo in der Datei resources/views/components/application-blade.php ändern.

Öffne die Datei und ersetze den aktuellen Inhalt durch deine svg-Datei.

Öffne die Datei resources/views/components/primary-button.blade.php. Du kannst hier jede beliebige Änderung vornehmen, z. B. den Button auf deiner Anmeldeseite an die Farbe deiner Marke anpassen.

So passt du den Registrierungsablauf an

Die Laravel Breeze Anmeldeseite wird mit 4 vordefinierten Feldern geliefert:

1. Name
2. E-Mail
3. Passwort
4. Passwort-Bestätigung

Um die Felder zu erweitern, die wir in unserem Anmeldeformular haben möchten, müssen wir die Datei resources/views/auth/register.blade.php öffnen.

Um mit unserem Beispiel fortzufahren, werden wir nach dem E-Mail-Feld ein Telefonfeld einfügen. Dazu fügst du den folgenden Code nach dem E-Mail-Feld ein:

<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>

Das Telefonfeld ist jetzt im Anmeldeformular sichtbar.

Modifizierung des Backends zur Speicherung des neuen Telefonfelds

Jetzt müssen wir die neuen Daten im Backend verarbeiten. Hierfür sind drei Schritte erforderlich: Zuerst musst du eine neue Migration erstellen und ausführen, dann fügst du dem Controller Logik hinzu, um die Daten zu speichern, und schließlich fügst du phone zu den ausfüllbaren Eigenschaften im User Modell hinzu.

Erstelle eine neue Migration, die ein Telefonfeld zu unserer Tabelle users hinzufügt.

php artisan make:migration add_phone_field_to_users_table

Öffne die erstellte Datei und füge ein Stringfeld namens „phone“ hinzu:

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

Danach führst du die Migration durch:

php artisan migrate

Um das Telefonfeld zu speichern, müssen wir die RegisteredUserController.php ändern und in der Methode store diese Änderungen vornehmen:

$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),
]);

Vergiss nicht, das Feld phone zu den ausfüllbaren Eigenschaften im Benutzermodell hinzuzufügen.

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

Das war’s, jetzt haben wir das geänderte Anmeldeformular!

So aktivierst du die E-Mail-Überprüfung

Bei der E-Mail-Überprüfung werden die E-Mails, die die Nutzer/innen im Anmeldeformular angegeben haben, überprüft und authentifiziert.

Um diese Funktion zu aktivieren, müssen wir die Schnittstelle MustVerifyEmail in unserem Benutzermodell implementieren.

use IlluminateContractsAuthMustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

Danach wird eine E-Mail mit einem Link zur Verifizierung der E-Mail verschickt, wenn sich ein Nutzer registriert.

Wir müssen jedoch noch eine Middleware zu unseren Routen hinzufügen, wenn wir den Zugang für nicht verifizierte Nutzer einschränken wollen.

Wir erstellen eine neue Route namens „only-verified“ und fügen die Middleware „auth“ und „verified“ hinzu. Die „auth“-Middleware verhindert den Zugang für Gäste und die „verified“-Middleware prüft, ob der Nutzer seine E-Mail verifiziert hat.

Hier ist ein Beispiel:

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

Zusammenfassung

Laravel Breeze ist ein tolles Tool, um schnell ein Authentifizierungssystem für dein Laravel-Projekt einzurichten.

Dank des einfachen und dennoch anpassbaren Gerüsts kannst du dich auf die Entwicklung deiner App konzentrieren, ohne dich um den Authentifizierungsprozess kümmern zu müssen.

Wenn du auf der Suche nach einem Ort bist, an dem du deine neue Laravel-Anwendung hosten kannst, solltest du dir unsere Laravel-Hosting-Lösung mit ihren leistungsstarken Funktionen ansehen, die die Bereitstellung und Verwaltung von Anwendungen schnell und einfach machen.