Cómo configurar la autenticación de Google en aplicaciones Laravel

En este mundo digital, es importante que tus aplicaciones tengan un proceso de autenticación fluido y seguro. Esto ayuda a mejorar la experiencia del usuario y la seguridad general de tus aplicaciones.

La Autenticación de Google está entre las formas más confiables y convenientes para que los usuarios inicien sesión en un sitio utilizando su cuenta de Google. Y significa que no tienen que recordar otro nombre de usuario y contraseña más.

Integrar Google OAuth en tu Laravel aplicación simplifica el proceso de inicio de sesión, fomenta la participación del usuario y aumenta la credibilidad de tu plataforma. En este tutorial, te guiaré a través de los pasos para implementar la Autenticación de Google en una aplicación Laravel. Pasaremos desde la configuración de las credenciales de la API de Google hasta la configuración del paquete Socialite de Laravel.

Tabla de Contenidos

Requisitos Previos
Beneficios de Usar Google Auth en una App de Laravel
Cómo Configurar Ingreso de Google en Laravel
Conclusión

Prerrequisitos

Antes de comenzar, asegúrate de tener los siguientes prerrequisitos:

Laravel 11
Una cuenta de Google Developer.
Conocimientos básicos de Laravel y autenticación.
Composer para gestionar paquetes

Una vez que tengas estos prerrequisitos listos, estás listo para integrar la autenticación de Google en tu aplicación Laravel.

Beneficios de usar la autenticación de Google en una aplicación Laravel

Hay muchos beneficios en esta configuración. Algunos de ellos son:

Integración simplificada con Socialite
Autenticación de usuario sin problemas
Mejora en la seguridad
Flujo de usuario personalizable
Mejora en la escalabilidad
Soporte sólido del ecosistema
Mantenimiento más fácil

Ya sea que estés trabajando en un proyecto personal o en una aplicación lista para producción, seguir estos pasos te ayudará a integrar de manera fluida la autenticación de Google. ¡Comencemos!

Paso 1: Configurar un proyecto en Google Cloud

Para utilizar la autenticación de Google en tu aplicación Laravel, primero necesitas configurar un proyecto en Google Cloud. Sigue estos pasos para configurar tu proyecto:

Visita la consola de Google Cloud e inicia sesión con tu cuenta de Google.
Haz clic en el menú desplegable “Seleccionar un proyecto” en la barra de navegación superior. En el cuadro emergente, haz clic en “Nuevo proyecto” para crear un nuevo proyecto y proporciona los detalles solicitados. Luego haz clic en Crear proyecto.
Una vez que crees el proyecto, abre el menú del lado izquierdo de la consola y selecciona APIs y Servicios > Credenciales.
En la página de Credenciales, haz clic en Crear Credenciales > ID de Cliente OAuth.
Si esta es la primera vez que creas un ID de cliente, te pedirá que configures la pantalla de consentimiento. Puedes configurar tu pantalla de consentimiento haciendo clic en Configurar Pantalla de consentimiento. Si ya has configurado la pantalla de consentimiento, puedes omitir este paso.
- Selecciona Externo si tu aplicación es de uso público, o Interno si está limitada a usuarios dentro de tu organización de Google Workspace.
- Rellena los detalles requeridos, como el nombre de la aplicación, correo de soporte al usuario, y cualquier información de marca. Haz clic en Guardar y continuar.

Después de configurar la pantalla de consentimiento, regrese a la página de Credenciales y seleccione nuevamente ID de Cliente OAuth.

Elija el Tipo de Aplicación como Aplicación Web y proporcione un nombre para las credenciales del cliente (por ejemplo, Laravel Social Login).
Bajo URI de redireccionamiento autorizados, agrega la URL de devolución de llamada para tu aplicación:
- Ejemplo: http://tu-url-de-app.com/callback/google
- Si estás probando localmente, usa: http://127.0.0.1:8000/api/auth/google/callback
Haz clic en Crear, y Google generará un ID de cliente y Secreto de cliente para tu proyecto. Guarda estas credenciales, ya que serán necesarias en los próximos pasos.

Paso 2: Crea un nuevo proyecto de Laravel e instala el paquete Laravel Socialite

Si no tienes uno listo, puedes crear un nuevo proyecto de Laravel utilizando el siguiente comando:

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

Para integrar la Autenticación de Google en un proyecto de Laravel, utilizaremos Laravel Socialite. Socialite es un paquete de Laravel de primera parte que simplifica la autenticación OAuth con servicios populares como Google, Facebook, Twitter y más.

Para instalar Socialite, abre tu terminal en el directorio raíz de tu proyecto de Laravel y ejecuta el siguiente comando:

composer require laravel/socialite

Paso 3: Configura las variables de entorno

En este paso, configuraremos nuestra aplicación Laravel para usar las credenciales de OAuth de Google que recopilamos en el Paso 1.

Localiza tu archivo .env en el directorio raíz de tu proyecto y añade las siguientes variables de entorno:

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

Adelante, reemplaza todos los marcadores de posición con secretos.

Entendamos cada variable de entorno una por una:

GOOGLE_CLIENT_ID: Un identificador único para tu aplicación, proporcionado por Google.
GOOGLE_CLIENT_SECRET: Una clave privada utilizada por tu aplicación para autenticarse de forma segura con la API de Google.
GOOGLE_REDIRECT_URL: La URL a la que Google redirige a los usuarios después de que inician sesión. Esto debe coincidir con la URI de redirección que especificaste al crear las credenciales en el Paso 1.

Paso 4: Actualiza los archivos de configuración

Para habilitar Laravel Socialite para usar credenciales de OAuth de Google, necesitamos configurar los detalles del proveedor en el archivo config/services.php.

En el archivo services.php, agrega la siguiente configuración para el proveedor de Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Tu ID de cliente de Google
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Tu clave secreta de cliente de Google
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Tu URL de redirección de Google
]

Paso 5: Crea controladores y rutas para la autenticación.

En este paso, crearemos un controlador para manejar la redirección y los callbacks de OAuth de Google y configuraremos las rutas necesarias para activar estos métodos.

Ejecuta el siguiente comando de Artisan para generar el controlador GoogleAuthController:

php artisan make:controller GoogleAuthController

Esto creará un controlador en app/Http/Controllers/GoogleAuthController.php.

Reemplace el contenido del recién creado GoogleAuthController.php con el siguiente código:

<?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
{
    /**
     * Redirige al usuario a la página de OAuth de Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Maneja el callback de Google.
     */
    public function callback()
    {
        try {
            // Obtener la información del usuario desde Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Verificar si el usuario ya existe en la base de datos
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Iniciar sesión del usuario si ya existe
            Auth::login($existingUser);
        } else {
            // De lo contrario, crear un nuevo usuario e iniciar sesión
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Establecer una contraseña aleatoria
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redirigir al usuario al panel de control u otra página segura
        return redirect('/dashboard');
    }
}

Este controlador contiene dos funciones:

Redireccionar: Redirige al usuario a la página de OAuth de Google.
Callback: Maneja el callback de Google y redirige al usuario al panel de control u otra página segura.

Definamos las rutas de redirect y callback en el archivo routes/web.php:

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

// Ruta para redirigir a la página de OAuth de Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Ruta para manejar el callback de Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Paso 6: Prueba la autenticación de Google en Laravel en tu proyecto.

Hemos configurado la autenticación de Google, así que ahora es momento de probarla para asegurarnos de que funcione sin problemas. En este paso, utilizaremos un botón de inicio de sesión que redirige al usuario a la página de autenticación de Google y los devuelve a una ruta protegida tras un inicio de sesión exitoso.

Primero, agregaremos el siguiente botón que ofrece a los usuarios la opción de Iniciar sesión 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>

Para fines de prueba, he definido una ruta protegida y un dashboard. Esta ruta solo será accesible para usuarios autenticados. Después de iniciar sesión, redirigiremos a los usuarios a esta página. Definamos esta ruta en web.php:

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

A continuación, crea un archivo de vista blade para el dashboard en resources/views/dashboard.blade.php. Aquí están los contenidos del dashboard:

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

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

</html>

Aquí, estamos utilizando el helper auth()->user() para mostrar el nombre del usuario que ha iniciado sesión, que se obtiene de la cuenta de Google que usaron para iniciar sesión.

Ahora, intentemos iniciar sesión.

Esta es la página de inicio de sesión:

Al hacer clic en el botón, serás redirigido a la pantalla de consentimiento de Google:

Haz clic en continuar y deberías estar conectado a la aplicación. Serás redirigido a una pantalla como la de abajo. Puedes ver el mensaje de bienvenida con el nombre del usuario.

¡Eso es todo! Has implementado y probado con éxito la Autenticación de Google en tu proyecto de Laravel. Ahora tus usuarios pueden iniciar sesión usando sus cuentas de Google, mejorando tanto la seguridad como la conveniencia.

Para hacer referencia a la implementación completa, puedes encontrar el código fuente completo de este proyecto en GitHub aquí: Integración de Inicio de Sesión de Google para Laravel – Repositorio de GitHub

Conclusión

¡Ahora has configurado la autenticación de Google en tu aplicación de Laravel usando Socialite! Puedes extender este método para incluir otros proveedores de OAuth como Facebook, Twitter o GitHub agregando configuraciones adicionales al archivo config/services.php.

La integración de OAuth de Google es una característica común en las aplicaciones web modernas, y Laravel Socialite facilita su implementación.

En caso de que necesites más opciones de inicio de sesión social como GitHub, Twitter y Facebook, entonces puedes considerar plantillas de Laravel SaaS listas para usar.

La mayoría de las plantillas preconstruidas de Laravel SaaS ofrecen una integración perfecta con plataformas populares como Google, GitHub, Facebook y Twitter. Por ejemplo, hay algunos recursos premium y de código abierto como:

Kit de Inicio de Laravel (Premium)
- Basado en Tailwind CSS
- Viene con Configuración de Enlace Mágico de un Clic
- Compatible con varios métodos de autenticación, incluido el inicio de sesión tradicional de correo electrónico/contraseña
- Autenticación de 2FA
Plantilla de SaaS (Código abierto)
- Multiinquilino de base de datos única
- Panel de desarrollador
- Gestión de tokens de acceso personal
Laranuxt (Código abierto)
- Interfaz de usuario de Nuxt, una colección de componentes creada por el equipo de NuxtJS, potenciada por Tailwind CSS
- Biblioteca de autenticación para ayudar con las sesiones de usuario y el inicio/cierre de sesión
- Ejemplo de middleware de autenticación
Laravel Vue Boilerplate (Código Abierto)
- WebSockets con Laravel Echo y Pusher.
- Workbox para un mejor desarrollo de PWA.
- Laravel GraphQL

Usar uno de estos boilerplates SaaS de Laravel puede acelerar tus flujos de trabajo, ya que no necesitas configurar todo desde cero.

Agradecimientos especiales a Deep Kumbhare, un desarrollador experimentado de Laravel y entusiasta, quien me ha ayudado a preparar este artículo.

Espero que este artículo te ayude a configurar el inicio de sesión de Google con Laravel.