Cómo Implementar Autenticación con Google en Laravel: Guía Paso a Paso

Cómo Implementar Autenticación con Google en Laravel: Guía Paso a Paso
Integra inicio de sesión social en tu aplicación Laravel usando Google OAuth y Laravel Socialite.

Requisitos Previos

Laravel 8+ instalado.
Composer y Node.js actualizados.
Cuenta de Google (para crear credenciales OAuth).

Paso 1: Instalar Laravel Socialite

Ejecuta en tu terminal:

composer require laravel/socialite

Paso 2: Configurar Credenciales de Google

Ve a Google Cloud Console.
Crea un nuevo proyecto o selecciona uno existente.
Navega a APIs & Services > Credentials.
Haz clic en Create Credentials > OAuth client ID.
Configura:
- Application Type: Web Application.
- Authorized Redirect URIs: http://tu-dominio.test/auth/google/callback (ajusta el dominio según tu entorno local).
Copia el Client ID y Client Secret generados.

Paso 3: Configurar Variables de Entorno

En tu archivo .env, agrega:

GOOGLE_CLIENT_ID=TU_CLIENT_ID
GOOGLE_CLIENT_SECRET=TU_CLIENT_SECRET
GOOGLE_REDIRECT_URI=http://tu-dominio.test/auth/google/callback

En config/services.php, añade:

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

Paso 4: Crear Controlador de Autenticación

Ejecuta:

php artisan make:controller AuthController

En app/Http/Controllers/AuthController.php:

use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

public function redirectToGoogle() {
    return Socialite::driver('google')->redirect();
}

public function handleGoogleCallback() {
    try {
        $googleUser = Socialite::driver('google')->user();
        
        $user = User::firstOrCreate(
            ['email' => $googleUser->getEmail()],
            [
                'name' => $googleUser->getName(),
                'google_id' => $googleUser->getId(),
                'avatar' => $googleUser->getAvatar(),
                'password' => bcrypt(uniqid()) // Contraseña aleatoria (no se usará)
            ]
        );

        Auth::login($user);
        return redirect('/dashboard');

    } catch (\Exception $e) {
        return redirect('/login')->withErrors('Error al autenticar con Google.');
    }
}

public function logout() {
    Auth::logout();
    return redirect('/');
}

Paso 5: Definir Rutas

En routes/web.php:

use App\Http\Controllers\AuthController;

Route::get('/auth/google', [AuthController::class, 'redirectToGoogle'])->name('google.login');
Route::get('/auth/google/callback', [AuthController::class, 'handleGoogleCallback']);
Route::get('/logout', [AuthController::class, 'logout']);

Paso 6: Modificar Modelo User y Migración

Actualiza la migración users:

php artisan make:migration add_google_fields_to_users_table

En el archivo generado:

public function up() {
    Schema::table('users', function (Blueprint $table) {
        $table->string('google_id')->nullable();
        $table->string('avatar')->nullable();
    });
}

Ejecuta:

php artisan migrate

Actualiza el modelo User

protected $fillable = [
    'name', 'email', 'password', 'google_id', 'avatar'
];

Paso 7: Crear Vistas

Página de Login (resources/views/auth/login.blade.php)

<!DOCTYPE html>
<html>
<head>
    <title>Login con Google</title>
</head>
<body>
    @if(Auth::check())
        <h1>Bienvenido, {{ Auth::user()->name }}!</h1>
        <a href="{{ route('logout') }}">Cerrar Sesión</a>
    @else
        <a href="{{ route('google.login') }}">
            <button>Iniciar Sesión con Google</button>
        </a>
    @endif
</body>
</html>

Paso 8: Proteger Rutas

En routes/web.php:

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

Paso 9: Probar la Implementación

Inicia el servidor:

php artisan serve

Visita http://localhost:8000/auth/google y sigue el flujo de Google.
¡Deberías ser redirigido al dashboard después del login!

Posibles Errores y Soluciones

Error "Invalid Redirect URI":
Asegúrate de que la URI en Google Cloud Console coincida exactamente con GOOGLE_REDIRECT_URI en tu .env.
Error "User not found":
Verifica que el modelo User tenga los campos google_id y avatar como fillable.

Conclusión

Has integrado exitosamente la autenticación con Google en Laravel. Este método:

Mejora la experiencia de usuario: Login rápido sin formularios.
Es seguro: Utiliza el protocolo OAuth2 de Google.
Personalizable: Puedes añadir más proveedores (Facebook, GitHub, etc.) siguiendo la misma lógica.

¡Explora más!

Personaliza la información del usuario obtenida de Google.
Agrega roles y permisos después del login.

Recursos Útiles:

¿Listo para llevar tu aplicación al siguiente nivel? ¡La autenticación social es solo el comienzo! 🚀