So richten Sie die Google-Authentifizierung in Laravel-Anwendungen ein

In dieser digitalen Welt ist es wichtig, dass Ihre Anwendungen über einen reibungslosen und sicheren Authentifizierungsprozess verfügen. Dies trägt dazu bei, die Benutzererfahrung und die Gesamtsicherheit Ihrer Apps zu verbessern.

Die Google-Authentifizierung gehört zu den vertrauenswürdigsten und bequemsten Möglichkeiten für Benutzer, sich mit ihrem Google-Konto bei einer Website anzumelden. Und es bedeutet, dass sie sich nicht noch an einen weiteren Benutzernamen und ein Passwort erinnern müssen.

Die Integration von Google OAuth in Ihre Laravel-Anwendung vereinfacht den Anmeldeprozess, fördert die Benutzerbindung und steigert die Glaubwürdigkeit Ihrer Plattform. In diesem Tutorial werde ich Sie durch die Schritte zur Implementierung der Google-Authentifizierung in einer Laravel-Anwendung führen. Wir werden von der Einrichtung der Google API-Zugangsdaten bis zur Konfiguration des Laravel Socialite-Pakets vorgehen.

Inhaltsverzeichnis

Voraussetzungen
Vorteile der Verwendung von Google-Authentifizierung in einer Laravel-Anwendung
So richten Sie die Laravel Google-Anmeldung ein
Fazit

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

Laravel 11
Ein Google-Entwicklerkonto.
Grundkenntnisse in Laravel und Authentifizierung.
Composer zur Paketverwaltung

Sobald Sie diese Voraussetzungen erfüllt haben, sind Sie bereit, die Google-Authentifizierung in Ihre Laravel-App zu integrieren.

Vorteile der Verwendung von Google Auth in einer Laravel-App

Es gibt viele Vorteile bei dieser Einrichtung. Einige davon sind:

Vereinfachte Integration mit Socialite
Nahtlose Benutzer-Authentifizierung
Verbesserte Sicherheit
Anpassbarer Benutzerfluss
Verbesserte Skalierbarkeit
Solide Unterstützung des Ökosystems
Einfachere Wartung

Ob Sie an einem persönlichen Projekt oder an einer produktionsbereiten Anwendung arbeiten, mit diesen Schritten können Sie die Google-Authentifizierung reibungslos integrieren. Los geht’s.

Schritt 1: Richten Sie ein Google Cloud-Projekt ein

Um die Google-Authentifizierung in Ihrer Laravel-Anwendung zu verwenden, müssen Sie zunächst ein Google Cloud-Projekt konfigurieren. Befolgen Sie diese Schritte, um Ihr Projekt einzurichten:

Besuchen Sie die Google Cloud-Konsole und melden Sie sich mit Ihrem Google-Konto an.
Klicken Sie auf das Dropdown-Menü „Projekt auswählen“ in der oberen Navigationsleiste. Klicken Sie im Popup auf „Neues Projekt“, um ein neues Projekt zu erstellen und geben Sie die angeforderten Details ein. Klicken Sie dann auf Projekt erstellen.
Nachdem Sie das Projekt erstellt haben, öffnen Sie das Menü auf der linken Seite der Konsole und wählen Sie APIs & Dienste > Zugangsdaten.
Auf der Seite „Zugangsdaten“ klicken Sie auf Zugangsdaten erstellen > OAuth-Client-ID.
Wenn dies Ihr erstes Mal ist, dass Sie eine Client-ID erstellen, werden Sie aufgefordert, den Zustimmungsbildschirm zu konfigurieren. Sie können Ihren Zustimmungsbildschirm konfigurieren, indem Sie auf Konfigurieren Zustimmungsbildschirm klicken. Wenn Sie den Zustimmungsbildschirm bereits konfiguriert haben, können Sie diesen Schritt überspringen.
- Wählen Sie Extern, wenn Ihre App für die öffentliche Nutzung gedacht ist, oder Intern, wenn sie auf Benutzer innerhalb Ihrer Google Workspace-Organisation beschränkt ist.
- Füllen Sie die erforderlichen Angaben aus, wie den App-Namen, die E-Mail für den Benutzersupport und alle Branding-Informationen. Klicken Sie auf Speichern und Fortfahren.

Nachdem Sie den Zustimmungsbildschirm konfiguriert haben, kehren Sie zur Anmeldeinformationen-Seite zurück und wählen Sie erneut OAuth-Client-ID aus.

Wählen Sie den Anwendungstyp als Webanwendung und geben Sie einen Namen für die Client-Anmeldeinformationen an (zum Beispiel Laravel Social Login).
Unter Authorisierte Redirect-URIs fügen Sie die Callback-URL für Ihre Anwendung hinzu:
- Beispiel: http://your-app-url.com/callback/google
- Wenn Sie lokal testen, verwenden Sie: http://127.0.0.1:8000/api/auth/google/callback
Klicken Sie auf Erstellen, und Google wird eine Client-ID und Client-Geheimnis für Ihr Projekt generieren. Speichern Sie diese Anmeldeinformationen, da sie in den nächsten Schritten benötigt werden.

Schritt 2: Erstelle ein neues Laravel-Projekt und installiere das Laravel Socialite-Paket

Wenn du keines bereit hast, kannst du ein neues Laravel-Projekt mit dem folgenden Befehl erstellen:

composer create-project --prefer-dist laravel/laravel social-auth-example

Um die Google-Authentifizierung in ein Laravel-Projekt zu integrieren, werden wir Laravel Socialite verwenden. Socialite ist ein Laravel-Paket erster Hand, das die OAuth-Authentifizierung mit beliebten Diensten wie Google, Facebook, Twitter und mehr vereinfacht.

Um Socialite zu installieren, öffne dein Terminal im Stammverzeichnis deines Laravel-Projekts und führe den folgenden Befehl aus:

composer require laravel/socialite

Schritt 3: Konfiguriere Umgebungsvariablen

In diesem Schritt werden wir unsere Laravel-Anwendung konfigurieren, um die Google OAuth-Anmeldeinformationen zu verwenden, die wir in Schritt 1 gesammelt haben.

Finde deine .env-Datei im Stammverzeichnis deines Projekts und füge die folgenden Umgebungsvariablen hinzu:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

Ersetze alle Platzhalter durch Geheimnisse.

Lass uns jede Umgebungsvariable einzeln verstehen:

GOOGLE_CLIENT_ID: Eine eindeutige Kennung für deine App, bereitgestellt von Google.
GOOGLE_CLIENT_SECRET: Ein privater Schlüssel, den Ihre App verwendet, um sich sicher mit der API von Google zu authentifizieren.
GOOGLE_REDIRECT_URL: Die URL, zu der Google Benutzer nach dem Einloggen umleitet. Dies sollte mit der Redirect-URI übereinstimmen, die Sie bei der Erstellung der Anmeldeinformationen in Schritt 1 angegeben haben.

Schritt 4: Aktualisieren der Konfigurationsdateien

Um Laravel Socialite die Verwendung von Google OAuth-Anmeldeinformationen zu ermöglichen, müssen wir die Anbieterdetails in der Datei config/services.php konfigurieren.

Fügen Sie in der Datei services.php die folgende Konfiguration für den Google-Anbieter hinzu:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Ihre Google-Client-ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Ihr Google-Client-Geheimnis
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Ihre Google-Redirect-URL
]

Schritt 5: Controller und Routen für die Authentifizierung erstellen.

In diesem Schritt erstellen wir einen Controller, um die Umleitung und Rückrufe von Google OAuth zu verarbeiten und richten die erforderlichen Routen ein, um diese Methoden auszulösen.

Führen Sie den folgenden Artisan-Befehl aus, um den Controller GoogleAuthController zu generieren:

php artisan make:controller GoogleAuthController

Dadurch wird ein Controller unter app/Http/Controllers/GoogleAuthController.php erstellt.

Ersetzen Sie den Inhalt der neu erstellten GoogleAuthController.php mit folgendem Code:

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * Weiterleitung des Benutzers zur OAuth-Seite von Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Behandelt den Rückruf von Google.
     */
    public function callback()
    {
        try {
            // Benutzerinformationen von Google abrufen
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Überprüfen, ob der Benutzer bereits in der Datenbank existiert
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Den Benutzer einloggen, wenn er bereits existiert
            Auth::login($existingUser);
        } else {
            // Andernfalls neuen Benutzer erstellen und einloggen
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Zufälliges Passwort festlegen
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Benutzer zur Dashboard oder einer anderen sicheren Seite weiterleiten
        return redirect('/dashboard');
    }
}

Dieser Controller enthält zwei Funktionen:

Redirect: Leitet den Benutzer zur OAuth-Seite von Google weiter.
Callback: Behandelt den Rückruf von Google und leitet den Benutzer zur Dashboard oder einer anderen sicheren Seite weiter.

Definieren Sie die Routen von redirect und callback in der Datei routes/web.php:

use App\\Http\\Controllers\\GoogleAuthController;

// Route zur Weiterleitung zur OAuth-Seite von Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route zur Behandlung des Rückrufs von Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Schritt 6: Testen Sie die Laravel Google-Authentifizierung in Ihrem Projekt.

Wir haben die Google-Authentifizierung eingerichtet, jetzt ist es an der Zeit, sie zu testen, um sicherzustellen, dass sie nahtlos funktioniert. In diesem Schritt verwenden wir eine Anmelde-Schaltfläche, die den Benutzer auf die Google-Authentifizierungsseite umleitet und ihn bei erfolgreicher Anmeldung auf eine geschützte Route zurückführt.

Zunächst fügen wir die folgende Schaltfläche hinzu, die Benutzern die Möglichkeit bietet, sich mit Google anzumelden:

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

Zu Testzwecken habe ich eine geschützte Route und ein Dashboard definiert. Diese Route ist nur für authentifizierte Benutzer zugänglich. Nach dem Einloggen leiten wir Benutzer auf diese Seite um. Definieren wir diese Route in der Datei web.php:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Anschließend erstellen Sie eine Blade-View-Datei für das Dashboard unter resources/views/dashboard.blade.php. Hier ist der Inhalt des Dashboards:

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

Hier verwenden wir den Helfer auth()->user(), um den Namen des eingeloggten Benutzers anzuzeigen, der aus dem Google-Konto abgerufen wird, mit dem er sich angemeldet hat.

Jetzt versuchen wir uns einzuloggen.

Dies ist die Anmeldeseite:

Wenn Sie auf die Schaltfläche klicken, werden Sie zur Zustimmungsseite von Google weitergeleitet:

Klicken Sie auf Weiter, und Sie sollten sich in der App anmelden können. Sie werden auf einen Bildschirm wie unten gezeigt weitergeleitet. Sie können die Willkommensnachricht mit dem Namen des Benutzers sehen.

Das ist alles! Sie haben die Google-Authentifizierung erfolgreich in Ihr Laravel-Projekt implementiert und getestet. Jetzt können sich Ihre Benutzer mit ihren Google-Konten anmelden und so die Sicherheit und Bequemlichkeit verbessern.

Um auf die vollständige Implementierung zu verweisen, finden Sie den vollständigen Quellcode für dieses Projekt hier auf GitHub: Google Login-Integration für Laravel – GitHub-Repository

Fazit

Sie haben jetzt die Google-Authentifizierung in Ihrer Laravel-Anwendung mit Socialite eingerichtet! Sie können diese Methode erweitern, um andere OAuth-Anbieter wie Facebook, Twitter oder GitHub einzuschließen, indem Sie zusätzliche Konfigurationen in der Datei config/services.php hinzufügen.

Die Google OAuth-Integration ist ein gängiges Feature für moderne Webanwendungen, und Laravel Socialite macht es einfach, dies umzusetzen.

Falls Sie weitere soziale Anmeldeoptionen wie GitHub, Twitter und Facebook benötigen, können Sie fertige Laravel SaaS-Boilerplates in Betracht ziehen.

Die meisten der vorgefertigten Laravel SaaS-Boilerplates bieten nahtlose Integration mit beliebten Plattformen wie Google, GitHub, Facebook und Twitter. Zum Beispiel gibt es einige Premium- und Open-Source-Ressourcen wie:

Laravel Starter Kit (Premium)
- Basierend auf Tailwind CSS
- Kommt mit One Click Magic Link Setup
- Unterstützt verschiedene Authentifizierungsmethoden, einschließlich der traditionellen E-Mail/Passwort-Anmeldung
- 2FA-Authentifizierung
SaaS-Boilerplate (Open Source)
- Einzeldatenbank-Mehrmandantenfähigkeit
- Entwickler-Panel
- Verwalten von persönlichen Zugriffstoken
Laranuxt (Open Source)
- Nuxt UI, eine Sammlung von Komponenten, die vom NuxtJS-Team erstellt und von Tailwind CSS unterstützt werden
- Authentifizierungsbibliothek zur Unterstützung von Benutzersitzungen und An- und Abmelden
- Beispiel-Authentifizierungsmiddleware
Laravel Vue Boilerplate (Open Source)
- WebSockets mit Laravel Echo und Pusher.
- Workbox für eine bessere PWA-Entwicklung.
- Laravel GraphQL

Die Verwendung eines dieser Laravel SaaS Boilerplates kann Ihre Arbeitsabläufe beschleunigen, da Sie nicht alles von Grund auf neu einrichten müssen.

Ein besonderer Dank geht an Deep Kumbhare, einen erfahrenen Laravel-Entwickler und Enthusiasten, der mir bei der Erstellung dieses Artikels geholfen hat.

Ich hoffe, dieser Artikel hilft Ihnen bei der Einrichtung des Google-Logins mit Laravel.