Inicio de sesión de Google en Laravel usando Laravel Socialite

Recientemente publiqué un artículo Iniciar sesión con LinkedIn usando Laravel Socialite y uno de nuestros lectores preguntó acerca de la integración del inicio de sesión de Google en Laravel. El inicio de sesión de Google es también una de las plataformas populares que se utilizan para el inicio de sesión social en el sitio web.

Cuando permite que los usuarios inicien sesión con su perfil social en su sitio web, omite el proceso de validación de su correo electrónico. Sus usuarios no necesitan seguir un proceso de activación por correo electrónico. Podemos confiar en los sitios sociales, ya que ya validaron a los usuarios en su plataforma. Brinda una mejor experiencia de usuario para sus usuarios, ya que no necesitan recordar sus credenciales de inicio de sesión para su sitio web y también le evita agregar los códigos para el flujo de verificación. Es una situación en la que todos ganan.

En este artículo, estudiamos la guía paso a paso sobre cómo agregar Google Login en Laravel usando Laravel Socialite. Laravel socialite maneja el flujo de OAuth para el inicio de sesión social detrás de escena. Este paquete acelera el proceso de integración del inicio de sesión social en Laravel.

Para este tutorial, usaré una nueva instalación de Laravel, así que ejecute el siguiente comando que instalará Laravel por usted:

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

Tras la instalación de Laravel, cree una base de datos y agregue sus credenciales de base de datos en el .envarchivo. A medida que agreguemos el inicio de sesión social en la aplicación, agregaré 2 columnas más al archivo de migración de usuario predeterminado y modificaré un poco su código.

Abra el archivo de migración de su usuario y agregue el siguiente código al upmétodo.

/**
 * 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();
    });
}

En el código anterior he agregado 2 columnas providery provider_idque contendrán los valores ‘google’ y la identificación del perfil de Google del usuario respectivamente. Cree la tabla de ‘usuarios’ ejecutando el comando migrate.

php artisan migrate

También debe agregar estas 2 columnas al modelo de usuario.

aplicación / User.php

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

Cree una aplicación de Google y obtenga sus credenciales

A continuación, necesitamos crear un proyecto en la consola de API de Google. Requeriremos la identificación del cliente y el secreto del cliente de la aplicación para completar el proceso de OAuth para los usuarios.

Siga los pasos a continuación para crear un proyecto de Google y obtener las credenciales. Por el bien del tutorial, estoy usando la URL del servidor local. Puede ajustar esta URL según sus necesidades.

• Vaya a la Consola para desarrolladores de Google.
• Haga clic en el menú desplegable y cree un nuevo proyecto haciendo clic en el signo (+). Alternativamente, también puede seleccionar el proyecto existente.
• En el panel del proyecto, seleccione Credenciales en la barra lateral.
• En la pestaña Credenciales, haga clic en el menú desplegable Crear credenciales y seleccione ID de cliente OAuth.
• Seleccione la aplicación web del tipo de aplicación. En las URL de redireccionamiento autorizadas, ingrese la URL http://localhost:8000/google/callback.

Una vez que lo guarde, aparecerá la ventana emergente junto con su ID de cliente y el secreto del cliente. Copie estas claves que necesitaremos en unos momentos.

Crear rutas y controlador

Ya está listo con sus claves API. Ahora, para continuar, tenemos que crear rutas, archivo blade y controlador. Crea un LoginControllerusando el comando:

php artisan make:controller LoginController

Después de esto, cree un archivo blade llamado login.blade.phpy agregue el siguiente HTML.

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

Llame a esta vista desde el indexmétodo de LoginController.

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

Para llamar a esta vista, debe agregarle una ruta. Agreguemos también algunas rutas más que serán necesarias para la siguiente parte 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';
});

Observe que agregué una homeruta. Cuando un usuario inicie sesión con Google, lo redireccionaré a la homeruta. Solo lo guardo para fines de demostración. Deberías cambiar esta ruta por otra.

Inicio de sesión de Google en Laravel usando Laravel Socialite

Hasta ahora hemos terminado con la configuración básica requerida para el inicio de sesión social. Ahora. es hora de instalar la biblioteca Laravel Socialite. Instálelo ejecutando el siguiente comando en la terminal.

composer require laravel/socialite

Tras la instalación de la biblioteca, abra config/services.phpy agregue la configuración de Google de la siguiente manera:

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

Como usamos el envmétodo para obtener las credenciales, necesitamos agregar estas credenciales en el .envarchivo.

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

Asegúrese de reemplazar los marcadores de posición con valores reales. Finalmente, necesitamos agregar código en el LoginController.phparchivo que redirige al usuario a la página de inicio de sesión de Google y, a cambio, maneja la respuesta. En este archivo, estamos escribiendo una función que redirige a un usuario a la página de inicio de sesión de Google y, en caso de autorización exitosa, insertará los detalles del usuario en la base de datos e iniciará la sesión del usuario.

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
        ]);
    }
}

En nuestro archivo de controlador, estamos verificando si el usuario con provider_idya existe o no. Si existe, devuelva la instancia de usuario actual; de lo contrario, insértela en la tabla de usuarios e inicie sesión con el usuario.

Espero que conozcas el inicio de sesión de Google en Laravel usando el paquete Socialite. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Artículos relacionados

• Iniciar sesión con LinkedIn en Laravel usando Laravel Socialite
• Iniciar sesión con Twitter en Laravel usando Laravel Socialite
• Cómo agregar el inicio de sesión de Google OAuth en un sitio web con PHP