Accedi a Google in Laravel utilizzando Laravel Socialite

Recentemente ho pubblicato un articolo Accedi con LinkedIn utilizzando Laravel Socialite e uno dei nostri lettori ha chiesto informazioni sull’integrazione di Google Login in Laravel. L’accesso a Google è anche una delle piattaforme popolari utilizzate per l’accesso social sul sito web.

Quando consenti agli utenti di accedere con il loro profilo social sul tuo sito web, salti il ​​processo di convalida della loro email. I tuoi utenti non devono seguire un processo di attivazione e-mail. Possiamo fare affidamento sui siti social poiché hanno già convalidato gli utenti sulla loro piattaforma. Offre una migliore esperienza utente per i tuoi utenti in quanto non hanno bisogno di ricordare le loro credenziali di accesso per il tuo sito Web e ti evita anche di aggiungere i codici per il flusso di verifica. È una situazione vantaggiosa per tutti.

In questo articolo, studiamo la guida passo passo sull’aggiunta di Google Login in Laravel utilizzando Laravel Socialite. Laravel socialite gestisce il flusso OAuth per l’accesso social dietro le quinte. Questo pacchetto accelera il processo di integrazione dell’accesso social su Laravel.

Per questo tutorial, userò una nuova installazione di Laravel, quindi esegui il comando seguente che installerà Laravel per te:

composer create-project --prefer-dist laravel/laravel googlelogin

Dopo l’installazione di Laravel, crea un database e aggiungi le credenziali del database nel .envfile. Poiché stiamo aggiungendo l’accesso social nell’applicazione, aggiungerò altre 2 colonne al file di migrazione utente predefinito e ne modificherò un po’ il codice.

Apri il file di migrazione dell’utente e aggiungi il codice seguente al upmetodo.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Nel codice sopra ho aggiunto 2 colonne providere provider_idche conterranno rispettivamente i valori "google" e l’ID profilo Google dell’utente. Crea la tabella "utenti" eseguendo il comando migrate.

php artisan migrate

È inoltre necessario aggiungere queste 2 colonne al modello Utente.

app/Utente.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id',
];

Crea un’applicazione Google e ottieni le tue credenziali

Successivamente, dobbiamo creare un progetto sulla console delle API di Google. Richiederemo l’ID client e il segreto client dell’applicazione per completare il processo OAuth per gli utenti.

Segui i passaggi seguenti per creare un progetto Google e ottenere le credenziali. Per motivi di tutorial, sto utilizzando l’URL del server locale. Puoi modificare questo URL in base alle tue esigenze.

• Vai alla Console per gli sviluppatori di Google.
• Fare clic sul menu a discesa e creare un nuovo progetto facendo clic sul segno (+). In alternativa, puoi anche selezionare il progetto esistente.
• Nella dashboard del progetto seleziona Credenziali dalla barra laterale.
• Nella scheda Credenziali, fai clic sul menu a discesa Crea credenziali e seleziona ID client OAuth.
• Selezionare l’applicazione Web dal tipo di applicazione. In URL di reindirizzamento autorizzati inserisci l’URL http://localhost:8000/google/callback.

Una volta salvato, otterrai il popup insieme al tuo ID cliente e al segreto cliente. Copia queste chiavi che ci serviranno in pochi istanti.

Crea percorsi e controller

Sei pronto con le tue chiavi API. Ora per procedere ulteriormente dobbiamo creare percorsi, file blade e controller. Crea un LoginControllerusando il comando:

php artisan make:controller LoginController

Successivamente, crea un file blade chiamato login.blade.phpe aggiungi il codice HTML sottostante.

<a href="{{ url('/login/google') }}">
    {{ __('Login with Google') }}
</a>

Chiama questa vista dal indexmetodo di LoginController.

public function index()
{
    return view('login');
}

Per chiamare questa vista, devi aggiungere un percorso per essa. Aggiungiamo anche alcuni altri percorsi che richiederanno per la parte successiva del tutorial.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Notare che ho aggiunto un homepercorso. Quando un utente accederà con Google, lo reindirizzerò al homepercorso. Lo tengo solo a scopo dimostrativo. Dovresti cambiare questo percorso con qualcos’altro.

Accedi a Google in Laravel utilizzando Laravel Socialite

Finora abbiamo finito con la configurazione di base richiesta per l’accesso social. Adesso. è ora di installare la libreria Laravel Socialite. Installalo eseguendo il comando seguente nel terminale.

composer require laravel/socialite

Dopo l’installazione della libreria, apri config/services.phpe aggiungi la configurazione di Google come segue:

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT_URL'),
],

Poiché abbiamo utilizzato il envmetodo per ottenere le credenziali, è necessario aggiungere queste credenziali nel .envfile.

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET
GOOGLE_REDIRECT_URL=http://localhost:8000/google/callback

Assicurati di sostituire i segnaposto con i valori effettivi. Infine, dobbiamo aggiungere il codice nel LoginController.phpfile che reindirizza l’utente alla pagina di accesso di Google e in cambio gestisce la risposta. In questo file, stiamo scrivendo una funzione che reindirizza un utente alla pagina di accesso di Google e, in caso di autorizzazione riuscita, inserirà i dettagli dell’utente nel database e farà accedere l’utente.

LoginController.php

<?php
  
namespace AppHttpControllers;
  
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
  
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Google authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Google.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }
    
    /**
     * If a user has registered before using social auth, return the user
     * else, create a new user object.
     * @param  $user Socialite user object
     * @param $provider Social auth provider
     * @return  User
     */
    public function findOrCreateUser($user, $provider)
    {
        $authUser = User::where('provider_id', $user->id)->first();
        if ($authUser) {
            return $authUser;
        }
        return User::create([
            'name'     => $user->name,
            'email'    => $user->email,
            'provider' => $provider,
            'provider_id' => $user->id
        ]);
    }
}

Nel nostro file controller, stiamo controllando se l’utente con provider_idesiste già o meno. Se esiste, restituisci l’istanza utente corrente, altrimenti inseriscila nella tabella utenti e accedi all’utente.

Spero che tu sia venuto a conoscenza di Google Login in Laravel utilizzando il pacchetto Socialite. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

articoli Correlati

• Accedi con LinkedIn in Laravel utilizzando Laravel Socialite
• Accedi con Twitter in Laravel utilizzando Laravel Socialite
• Come aggiungere l’accesso OAuth a Google nel sito Web con PHP