In deze digitale wereld is het belangrijk dat je toepassingen een soepel en veilig authenticatieproces hebben. Dit helpt de gebruikerservaring te verbeteren en de algehele beveiliging van je apps.

Google Authenticatie is een van de meest vertrouwde en handige manieren voor gebruikers om in te loggen op een site met hun Google-account. En het betekent dat ze niet nog een gebruikersnaam en wachtwoord hoeven te onthouden.

Het integreren van Google OAuth in je Laravel applicatie vereenvoudigt het inlogproces, moedigt gebruikersbetrokkenheid aan en versterkt de geloofwaardigheid van je platform. In deze tutorial begeleid ik je door de stappen voor het implementeren van Google Authenticatie in een Laravel-applicatie. We gaan van het instellen van de Google API-gegevens tot het configureren van Laravel’s Socialite-pakket.

Inhoudsopgave

Vereisten

Voor je begint, zorg ervoor dat je aan de volgende vereisten voldoet:

  1. Laravel 11

  2. Een Google Developer-account.

  3. Basis kennis van Laravel en authenticatie.

  4. Composer voor het beheren van pakketten

Zodra je aan deze vereisten voldoet, ben je klaar om Google Authenticatie te integreren in je Laravel app.

Voordelen van het gebruik van Google Auth in een Laravel app

Er zijn veel voordelen aan deze setup. Enkele daarvan zijn:

  • Vereenvoudigde integratie met Socialite

  • Naadloze gebruikers authenticatie

  • Verbeterde beveiliging

  • Aanpasbare gebruikersflow

  • Verbeterde schaalbaarheid

  • Ondersteuning van een solide ecosysteem

  • Gemakkelijker onderhoud

Hoe Laravel Google Login in te stellen

Of je nu werkt aan een persoonlijk project of een productieklare applicatie, door deze stappen te volgen kun je Google Authenticatie soepel integreren. Laten we beginnen.

Stap 1: Stel een Google Cloud-project in

Om Google Authenticatie in je Laravel-applicatie te gebruiken, moet je eerst een Google Cloud-project configureren. Volg deze stappen om je project in te stellen:

  1. Bezoek de Google Cloud-console en log in met je Google-account.

  2. Klik op de vervolgkeuzelijst “Selecteer een project” in de bovenste navigatiebalk. Klik in het pop-upvenster op “Nieuw project” om een nieuw project aan te maken en verstrek de gevraagde gegevens. Klik vervolgens op Project maken.

  3. Zodra je het project hebt aangemaakt, open je het linkerzijmenu van de console en selecteer je API’s & Services > Referenties.

  4. Op de pagina Referenties, klik op Referenties maken > OAuth-client-ID.

  5. Als dit de eerste keer is dat je een client-ID aanmaakt, wordt je gevraagd om het toestemmingscherm te configureren. Je kunt je toestemmingscherm configureren door op Configureren Toestemmingscherm te klikken. Als je het toestemmingscherm al hebt geconfigureerd, kun je deze stap overslaan.

    • Selecteer Extern als je app voor openbaar gebruik is, of Intern als het beperkt is tot gebruikers binnen je Google Workspace-organisatie.

    • Vul de vereiste gegevens in, zoals de app-naam, gebruikersondersteuning e-mail, en alle merkinformatie. Klik op Opslaan en doorgaan.

Na het configureren van het toestemmingscherm, ga terug naar de Referenties-pagina en selecteer opnieuw OAuth Client-ID.

  1. Kies het Toepassingstype als Webtoepassing en geef een naam op voor de clientreferenties (bijvoorbeeld, Laravel Sociale Login).

  2. Onder Geautoriseerde omleidings-URL’s, voeg de terugbel-URL voor uw applicatie toe:

  3. Voorbeeld: http://uw-app-url.com/callback/google

  4. Als u lokaal aan het testen bent, gebruik: http://127.0.0.1:8000/api/auth/google/callback

  5. Klik op Aanmaken, en Google zal een Client ID en Clientgeheim genereren voor uw project. Bewaar deze referenties, want ze zullen nodig zijn in de volgende stappen.

Stap 2: Creëer een nieuw Laravel project en installeer het Laravel Socialite pakket

Als je er geen klaar hebt staan, kun je een nieuw Laravel project creëren met behulp van onderstaand commando:

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

Om Google Authenticatie te integreren in een Laravel project, zullen we Laravel Socialite gebruiken. Socialite is een Laravel pakket van de eerste partij dat OAuth authenticatie vereenvoudigt met populaire diensten zoals Google, Facebook, Twitter, en meer.

Om Socialite te installeren, open je terminal in de hoofdmap van je Laravel project en voer je het volgende commando uit:

composer require laravel/socialite

Stap 3: Configureer omgevingsvariabelen

In deze stap zullen we onze Laravel applicatie configureren om de Google OAuth referenties te gebruiken die we verzameld hebben in Stap 1.

Zoek je .env bestand in de hoofdmap van je project en voeg de volgende omgevingsvariabelen toe:

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

Vervang alle aanduidingen door geheimen.

Laten we elke omgevingsvariabele één voor één begrijpen:

  • GOOGLE_CLIENT_ID: Een unieke identificator voor je app, verstrekt door Google.

  • GOOGLE_CLIENT_SECRET: Een privésleutel die door uw app wordt gebruikt om zich veilig te authenticeren met de API van Google.

  • GOOGLE_REDIRECT_URL: De URL waar Google gebruikers na het inloggen naartoe leidt. Dit moet overeenkomen met de omleidings-URI die u heeft opgegeven bij het maken van de referenties in Stap 1.

Stap 4: Werk de configuratiebestanden bij

Om Laravel Socialite in staat te stellen Google OAuth-referenties te gebruiken, moeten we de providergegevens configureren in het bestand config/services.php.

Voeg in het bestand services.php de volgende configuratie toe voor de Google-provider:

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

Stap 5: Maak controllers en routes voor authenticatie aan.

In deze stap zullen we een controller maken om de omleiding en terugroepingen van Google OAuth te verwerken en de nodige routes instellen om deze methoden te activeren.

Voer de volgende Artisan-opdracht uit om de controller GoogleAuthController te genereren:

php artisan make:controller GoogleAuthController

Dit zal een controller creëren op app/Http/Controllers/GoogleAuthController.php.

Vervang de inhoud van de nieuw aangemaakte GoogleAuthController.php met de volgende 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
{
    /**
     * Stuur de gebruiker door naar de OAuth-pagina van Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Behandel de callback van Google.
     */
    public function callback()
    {
        try {
            // Haal de gebruikersinformatie op van Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Controleer of de gebruiker al bestaat in de database
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Log de gebruiker in als ze al bestaan
            Auth::login($existingUser);
        } else {
            // Anders, maak een nieuwe gebruiker aan en log ze in
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Stel een willekeurig wachtwoord in
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Stuur de gebruiker door naar het dashboard of een andere beveiligde pagina
        return redirect('/dashboard');
    }
}

Deze controller bevat twee functies:

  1. Redirect: Stuurt de gebruiker door naar de OAuth-pagina van Google.

  2. Callback: Behandelt de callback van Google en stuurt de gebruiker door naar het dashboard of een andere beveiligde pagina.

Definieer de routes van redirect en callback in het bestand routes/web.php:

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

// Route om door te sturen naar de OAuth-pagina van Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route om de callback van Google te verwerken
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Stap 6: Test Laravel Google-authenticatie in je project.

We hebben Google-authenticatie ingesteld, dus nu is het tijd om het te testen om ervoor te zorgen dat het naadloos werkt. In deze stap zullen we een aanmeldknop gebruiken die de gebruiker doorstuurt naar de authenticatiepagina van Google en ze terugbrengt naar een beveiligde route na succesvol inloggen.

Allereerst zullen we de volgende knop toevoegen waarmee gebruikers de optie hebben om In te loggen met Google:

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

Voor testdoeleinden heb ik een beveiligde route en een dashboard gedefinieerd. Deze route is alleen toegankelijk voor ingelogde gebruikers. Na het inloggen zullen we gebruikers doorsturen naar deze pagina. Laten we deze route definiëren in web.php:

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

Maak vervolgens een blade-weergavebestand voor het dashboard op resources/views/dashboard.blade.php. Hier zijn de inhoud van het dashboard:

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

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

</html>

Hier gebruiken we de helper auth()->user() om de naam van de ingelogde gebruiker weer te geven, die wordt opgehaald uit het Google-account waarmee ze hebben ingelogd.

Laten we nu proberen in te loggen.

Dit is de inlogpagina:

Door op de knop te klikken word je doorgestuurd naar het toestemmingsscherm van Google:

Klik op doorgaan en je zou ingelogd moeten zijn in de app. Je wordt doorgestuurd naar een scherm zoals hieronder. Je ziet het welkomstbericht met de naam van de gebruiker.

Dat is alles! Je hebt met succes Google Authenticatie geïmplementeerd en getest in je Laravel-project. Nu kunnen je gebruikers inloggen met hun Google-accounts, waardoor zowel de beveiliging als het gemak worden verbeterd.

Om te verwijzen naar de volledige implementatie, kunt u de volledige broncode voor dit project vinden op GitHub hier: Google Login Integratie voor Laravel – GitHub Repository

Conclusie

Je hebt nu Google authenticatie opgezet in je Laravel applicatie met behulp van Socialite! Je kunt deze methode uitbreiden om andere OAuth providers zoals Facebook, Twitter, of GitHub toe te voegen door extra configuraties toe te voegen aan het config/services.php bestand.

Google OAuth integratie is een veelvoorkomende functie voor moderne webapplicaties, en Laravel Socialite maakt het makkelijk om te implementeren.

Als je meer sociale login opties nodig hebt zoals GitHub, Twitter, en Facebook, dan kun je overwegen om kant-en-klare Laravel SaaS boilerplates te gebruiken.

De meeste vooraf gebouwde Laravel SaaS boilerplates bieden naadloze integratie met populaire platforms zoals Google, GitHub, Facebook, en Twitter. Bijvoorbeeld, er zijn enkele premium en open source bronnen zoals:

  • Laravel Starter Kit (Premium)

    • Gebaseerd op Tailwind CSS

    • Komt met One Click Magic Link Setup

    • Ondersteunt diverse authenticatiemethoden waaronder de traditionele email/wachtwoord login

    • 2FA Authenticatie

  • SaaS Boilerplate (Open Source)

    • Single Database Multi-tenancy

    • Ontwikkelaarspaneel

    • Beheer Persoonlijke Toegangstokens

  • Laranuxt (Open Source)

    • Nuxt UI, een verzameling componenten gebouwd door het NuxtJS-team, aangedreven door Tailwind CSS

    • Authenticatiebibliotheek om te helpen met gebruikerssessies en in/uitloggen

    • Voorbeeld Authenticatie Middleware

  • Laravel Vue Boilerplate (Open Source)

    • WebSockets met Laravel Echo en Pusher.

    • Workbox voor betere PWA-ontwikkeling.

    • Laravel GraphQL

Het gebruik van een van deze Laravel SaaS-boilerplates kan uw workflows versnellen omdat u niet alles vanaf nul hoeft op te zetten.

Speciale dank aan Deep Kumbhare, een ervaren Laravel ontwikkelaar en enthousiasteling, die mij heeft geholpen bij het voorbereiden van dit artikel.

Ik hoop dat dit artikel je helpt bij het instellen van Google Login met Laravel.