In questo mondo digitale, è importante che le tue applicazioni abbiano un processo di autenticazione fluido e sicuro. Questo aiuta a migliorare l’esperienza dell’utente e la sicurezza complessiva delle tue app.

Google Authentication è uno dei modi più fidati e convenienti per gli utenti per accedere a un sito utilizzando il loro account Google. E significa che non devono ricordare un altro nome utente e password.

Integrare Google OAuth nella tua applicazione Laravel semplifica il processo di accesso, incoraggia il coinvolgimento degli utenti e aumenta la credibilità della tua piattaforma. In questo tutorial, ti guiderò attraverso i passaggi per implementare Google Authentication in un’applicazione Laravel. Passeremo dalla configurazione delle credenziali API di Google alla configurazione del pacchetto Socialite di Laravel.

Indice

Prerequisiti

Prima di iniziare, assicurati di avere i seguenti prerequisiti:

  1. Laravel 11

  2. Un account sviluppatore Google.

  3. Conoscenza di base di Laravel e autenticazione.

  4. Composer per la gestione dei pacchetti

Una volta che hai pronto questi prerequisiti, sei pronto per integrare l’autenticazione Google nella tua app Laravel.

Vantaggi dell’Utilizzo dell’Autenticazione Google in un’App Laravel

Ci sono molti vantaggi in questa configurazione. Alcuni di essi sono:

  • Integrazione semplificata con Socialite

  • Autenticazione utente senza soluzione di continuità

  • Migliorata sicurezza

  • Flusso utente personalizzabile

  • Migliorata scalabilità

  • Solido supporto dell’ecosistema

  • Mantenimento più semplice

Come configurare il login di Google in Laravel

Che tu stia lavorando a un progetto personale o a un’applicazione pronta per la produzione, seguire questi passaggi ti aiuterà a integrare facilmente l’autenticazione di Google. Cominciamo.

Passo 1: Configurare un progetto Google Cloud

Per utilizzare l’autenticazione di Google nella tua applicazione Laravel, prima devi configurare un progetto Google Cloud. Segui questi passaggi per configurare il tuo progetto:

  1. Visita la console Google Cloud e accedi con il tuo account Google.

  2. Fai clic su “Seleziona un progetto” nel menu di navigazione in alto. Nella finestra popup, fai clic su “Nuovo progetto” per creare un nuovo progetto e fornire i dettagli richiesti. Quindi fai clic su Crea progetto.

  3. Una volta creato il progetto, aprire il menu laterale della console e selezionare API e Servizi > Credenziali.

  4. Nella pagina delle Credenziali, fare clic su Crea Credenziali > ID Client OAuth.

  5. Se questa è la prima volta che crei un ID client, ti chiederà di configurare lo schermo del consenso. Puoi configurare il tuo schermo del consenso cliccando su Configura Schermo del Consenso. Se hai già configurato lo schermo del consenso, puoi saltare questo passaggio.

    • Seleziona Esterno se la tua app è per uso pubblico, o Interno se è limitata agli utenti all’interno dell’organizzazione Google Workspace.

    • Compila i dettagli richiesti, come il nome dell’app, email di supporto degli utenti, e qualsiasi informazione sul marchio. Clicca su Salva e Continua.

Dopo aver configurato lo schermo di consenso, torna alla pagina Credenziali e seleziona di nuovo ID Client OAuth.

  1. Scegli il Tipo di Applicazione come Applicazione Web e fornisci un nome per le credenziali del client (ad esempio, Laravel Social Login).

  2. Sotto URI di reindirizzamento autorizzati, aggiungi l’URL di richiamata per la tua applicazione:

  3. Clicca su Crea, e Google genererà un ID Client e un Segreto Client per il tuo progetto. Salva queste credenziali, poiché saranno richieste nei passaggi successivi.

Passo 2: Crea un nuovo progetto Laravel e installa il pacchetto Laravel Socialite

Se non ne hai già uno pronto, puoi creare un nuovo progetto Laravel utilizzando il comando qui sotto:

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

Per integrare l’autenticazione Google in un progetto Laravel, utilizzeremo Laravel Socialite. Socialite è un pacchetto Laravel di prima parte che semplifica l’autenticazione OAuth con servizi popolari come Google, Facebook, Twitter e altri.

Per installare Socialite, apri il tuo terminale nella directory radice del tuo progetto Laravel ed esegui il seguente comando:

composer require laravel/socialite

Passo 3: Configura le variabili di ambiente

In questo passaggio, configureremo la nostra applicazione Laravel per utilizzare le credenziali OAuth di Google che abbiamo raccolto nel Passo 1.

Trova il tuo file .env nella directory radice del tuo progetto e aggiungi le seguenti variabili di ambiente:

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

Procedi e sostituisci tutti i segnaposto con i segreti.

Comprendiamo ogni variabile di ambiente una per una:

  • GOOGLE_CLIENT_ID: Un identificatore unico per la tua app, fornito da Google.

  • GOOGLE_CLIENT_SECRET: Una chiave privata utilizzata dalla tua app per autenticarsi in modo sicuro con l’API di Google.

  • GOOGLE_REDIRECT_URL: L’URL dove Google reindirizza gli utenti dopo che hanno effettuato l’accesso. Questo dovrebbe corrispondere all’URI di reindirizzamento che hai specificato quando hai creato le credenziali nel Passo 1.

Passo 4: Aggiorna i file di configurazione

Per abilitare Laravel Socialite a utilizzare le credenziali OAuth di Google, dobbiamo configurare i dettagli del provider nel file config/services.php.

Nel file services.php, aggiungi la seguente configurazione per il provider Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Il tuo ID Client Google
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Il tuo Client Secret Google
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Il tuo URL di Reindirizzamento Google
]

Passo 5: Crea controller e route per l’autenticazione.

In questo passo, creeremo un controller per gestire il reindirizzamento e i callback di Google OAuth e impostare le rotte necessarie per attivare questi metodi.

Esegui il seguente comando Artisan per generare il controller GoogleAuthController:

php artisan make:controller GoogleAuthController

Questo creerà un controller in app/Http/Controllers/GoogleAuthController.php.

Sostituisci il contenuto del nuovo GoogleAuthController.php con il seguente codice:

<?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
{
    /**
     * Reindirizza l'utente alla pagina di OAuth di Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Gestisce il callback da Google.
     */
    public function callback()
    {
        try {
            // Ottieni le informazioni dell'utente da Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Verifica se l'utente esiste già nel database
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Effettua l'accesso dell'utente se esiste già
            Auth::login($existingUser);
        } else {
            // Altrimenti, crea un nuovo utente ed effettua l'accesso
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Imposta una password casuale
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Reindirizza l'utente alla dashboard o a qualsiasi altra pagina sicura
        return redirect('/dashboard');
    }
}

Questo controller contiene due funzioni:

  1. Reindirizza: Reindirizza l’utente alla pagina di OAuth di Google.

  2. Callback: Gestisce il callback da Google e reindirizza l’utente alla dashboard o a qualsiasi altra pagina sicura.

Definiamo le rotte di redirect e callback nel file routes/web.php:

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

// Rotta per reindirizzare alla pagina di OAuth di Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Rotta per gestire il callback da Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Passo 6: Testa l’autenticazione Google di Laravel nel tuo progetto.

Abbiamo impostato l’autenticazione Google, quindi ora è il momento di testarla per assicurarci che funzioni senza problemi. In questo passo, utilizzeremo un pulsante di accesso che reindirizza l’utente alla pagina di autenticazione di Google e lo riporta a una rotta protetta dopo un accesso riuscito.

Innanzitutto, aggiungeremo il seguente pulsante che offre agli utenti l’opzione di Accedi con 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>

Per scopi di test, ho definito una rotta protetta e un dashboard. Questa rotta sarà accessibile solo agli utenti autenticati. Dopo aver effettuato il login, reindirizzeremo gli utenti a questa pagina. Definiamo questa rotta in web.php:

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

Successivamente, crea un file di vista blade per il dashboard in resources/views/dashboard.blade.php. Ecco il contenuto del dashboard:

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

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

</html>

Qui stiamo utilizzando l’helper auth()->user() per visualizzare il nome dell’utente connesso, che viene recuperato dall’account Google utilizzato per accedere.

Ora, proviamo ad accedere.

Questa è la pagina di accesso:

Cliccando sul pulsante verrai reindirizzato alla schermata di consenso di Google:

Clicca su continua e dovresti essere connesso all’app. Verrai reindirizzato a una schermata simile a quella qui sotto. Puoi vedere il messaggio di benvenuto con il nome dell’utente.

Questo è tutto! Hai implementato e testato con successo l’autenticazione Google nel tuo progetto Laravel. Ora i tuoi utenti possono accedere utilizzando i loro account Google, migliorando sia la sicurezza che la comodità.

Per fare riferimento all’implementazione completa, puoi trovare il codice sorgente completo per questo progetto su GitHub qui: Integrazione di Accesso Google per Laravel – Repository GitHub

Conclusioni

Adesso hai configurato l’autenticazione Google nella tua applicazione Laravel utilizzando Socialite! Puoi estendere questo metodo per includere altri provider OAuth come Facebook, Twitter o GitHub aggiungendo configurazioni aggiuntive al file config/services.php.

L’integrazione OAuth di Google è una funzionalità comune per le moderne applicazioni web, e Laravel Socialite rende facile implementarla.

Se hai bisogno di più opzioni di accesso tramite social come GitHub, Twitter e Facebook, allora puoi considerare boilerplate Laravel SaaS pronti all’uso.

La maggior parte dei boilerplate Laravel SaaS pre-costruiti offre un’integrazione senza soluzione di continuità con piattaforme popolari come Google, GitHub, Facebook e Twitter. Ad esempio, ci sono risorse premium e open source come:

  • Kit di Avvio Laravel (Premium)

    • Basato su Tailwind CSS

    • Viene fornito con la configurazione di un collegamento magico con un clic

    • Supporta vari metodi di autenticazione tra cui l’accesso tradizionale via email/password

    • Autenticazione 2FA

  • SaaS Boilerplate (Open Source)

    • Multi-tenant con database singolo

    • Pannello sviluppatore

    • Gestisci i token di accesso personali

  • Laranuxt (Open Source)

    • Nuxt UI una collezione di componenti realizzata dal team di NuxtJS, alimentata da Tailwind CSS

    • Libreria di autenticazione per assistere con le sessioni utente e l’accesso/uscita

      • Esempio di middleware di autenticazione

  • Laravel Vue Boilerplate (Open Source)

    • WebSockets con Laravel Echo e Pusher.

    • Workbox per un miglior sviluppo di PWA.

    • Laravel GraphQL

Utilizzare uno di questi boilerplate SaaS di Laravel può velocizzare i tuoi flussi di lavoro in quanto non è necessario configurare tutto da zero.

Un ringraziamento speciale a Deep Kumbhare, un esperto sviluppatore Laravel e appassionato, che mi ha aiutato nella preparazione di questo articolo.

Spero che questo articolo ti aiuti a configurare il login di Google con Laravel.