Introducción a OAuth y su importancia
OAuth 2.0 es un estándar de autorización ampliamente adoptado que permite a las aplicaciones acceder de manera segura a recursos protegidos en nombre de un usuario, sin necesidad de manejar contraseñas directamente. En el contexto de PHP, Google OAuth proporciona un mecanismo seguro para autenticarse utilizando cuentas de Google, mejorando la experiencia del usuario al evitar formularios de registro tradicionales. Este tutorial te guiará paso a paso para implementar Google OAuth en tu aplicación web, habilitando la autenticación segura de usuarios.
Tutorial paso a paso
Requisitos previos
- Tener Composer instalado para gestionar dependencias.
- Un servidor web con PHP y HTTPS configurado.
- Cuenta de Google Cloud Platform (GCP) para configurar la API de Google.
Paso 1: Configurar un proyecto en Google Cloud Platform
- Ve a Google Cloud Console.
- Crea un proyecto y actívalo.
- Navega a APIs y servicios > Pantalla de consentimiento de OAuth: o Configura la pantalla de consentimiento: nombre, correo y URL de soporte.
- Dirígete a Credenciales > Crear credenciales > ID de cliente de OAuth:
o Tipo de aplicación: Aplicación web.
o URI de redirección: https://tu-dominio.com/callback.php.
Guarda las claves generadas: Client ID y Client Secret.
Paso 2: Instalar la biblioteca de Google Client
Usa Composer para instalar la biblioteca oficial de Google:
1 |
composer require google/apiclient:^2.0 |
Paso 3: Configurar el cliente de Google en PHP
Crea un archivo config.php para inicializar el cliente de Google:
1 2 3 4 5 6 7 8 9 |
<?php require_once 'vendor/autoload.php'; $client = new Google_Client(); $client->setClientId('TU_CLIENT_ID'); $client->setClientSecret('TU_CLIENT_SECRET'); $client->setRedirectUri('https://tu-dominio.com/callback.php'); $client->addScope('email'); $client->addScope('profile'); ?> |
Paso 4: Crear el flujo de inicio de sesión
Crea un archivo y nómbralo login.php. Este archivo redirige al usuario a la página de autenticación de Google.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php require_once 'config.php'; $authUrl = $client->createAuthUrl(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Iniciar Sesión</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-light"> <div class="container vh-100 d-flex justify-content-center align-items-center"> <div class="card p-4 shadow-lg" style="width: 24rem;"> <div class="card-body text-center"> <h5 class="card-title">Inicia Sesión</h5> <p class="card-text">Accede a nuestra plataforma utilizando tu cuenta de Google.</p> <a href="<?= htmlspecialchars($authUrl) ?>" class="btn btn-danger btn-lg w-100"> <i class="bi bi-google"></i> Iniciar sesión con Google </a> </div> </div> </div> <!-- Bootstrap Icons --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <!-- Bootstrap JS (opcional) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> |
Paso 5: Procesar la respuesta de Google
Archivo callback.php: Aquí se obtiene el token de acceso y la información del usuario.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php session_start(); require_once 'config.php'; if (isset($_GET['code'])) { // Obtener el token de acceso con el código de autorización $token = $client->fetchAccessTokenWithAuthCode($_GET['code']); // Verificar si se obtuvo el token correctamente if (isset($token['access_token'])) { // Almacenar el token de acceso en la sesión $_SESSION['access_token'] = $token['access_token']; // Establecer el token en el cliente $client->setAccessToken($token); // Obtener información del usuario $oauth2 = new Google_Service_Oauth2($client); $userInfo = $oauth2->userinfo->get(); // Almacenar la información del usuario en la sesión $_SESSION['name'] = $userInfo->name; $_SESSION['email'] = $userInfo->email; $_SESSION['picture'] = $userInfo->picture; // Redirigir al dashboard o página principal header('Location: dashboard.php'); exit; } else { // Manejar errores si no se obtiene el token echo "Error al autenticar con Google."; exit; } } else { // Si no se recibe el código, redirigir al inicio de sesión header('Location: login.php'); exit; } ?> |
Paso 6: Implementar sesiones para usuarios autenticados
Crea un archivo y nómbralo dashboard.php. Este archivo se encarga de mostrar información del usuario logueado. Nombre, correo y la imagen de perfil.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php session_start(); if (!isset($_SESSION['email'])) { header('Location: login.php'); exit; } // Datos del usuario $name = $_SESSION['name']; $email = $_SESSION['email']; $profileImage = $_SESSION['picture'] ?? 'https://via.placeholder.com/150'; // Imagen por defecto si no está disponible ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-light"> <div class="container mt-5"> <div class="card mx-auto shadow-lg" style="max-width: 500px;"> <div class="card-body text-center"> <img src="<?= htmlspecialchars($profileImage) ?>" alt="Foto de perfil" class="rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;"> <h5 class="card-title">Bienvenido, <?= htmlspecialchars($name) ?>!</h5> <p class="card-text">Correo: <?= htmlspecialchars($email) ?></p> <a href="logout.php" class="btn btn-danger">Cerrar sesión</a> </div> </div> </div> <!-- Bootstrap JS (opcional) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> |
Paso 7: Cerrar la sesión para los usuario logueados
Finalmente crea un archivo y nómbralo logout.php. Este archivo destruirá la sesión previamente creada.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php require_once 'config.php'; session_start(); // Revoca el token de acceso de Google if (isset($_SESSION['access_token'])) { $client->revokeToken($_SESSION['access_token']); unset($_SESSION['access_token']); } // Destruye la sesión del usuario session_destroy(); // Redirige al usuario a la página de inicio u otra página header('Location: login.php'); exit; ?> |
Este tutorial proporciona una base sólida para integrar Google OAuth en tus proyectos PHP, facilitando el inicio de sesión seguro y mejorando la experiencia del usuario. Además, esta implementación puede servir como punto de partida para extender funcionalidades, como el almacenamiento de usuarios en una base de datos, la gestión de roles o la personalización de dashboards. Con estos conocimientos, estarás mejor preparado para desarrollar aplicaciones más seguras y centradas en el usuario.
Este tutorial te servirá como guía para implementarlo en alguno de nuestros sistemas previamente creados, ejemplo: