Autenticación de Usuarios con Google OAuth en PHP

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:

composer require google/apiclient:^2.0

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:

<?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');
?>

<?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.

<?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>

<?php

require_once 'config.php';

$authUrl = $client->createAuthUrl();

<!DOCTYPE html>

<head>

<title>Iniciar Sesión</title>

</head>

<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>

</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.

<?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;
}
?>

<?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.

<?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>

<?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>

<head>

<title>Dashboard</title>

</head>

<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>

</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.

<?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;
?>

<?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:

Sistema de Inventario Simple con PHP

Blog

Autenticación de Usuarios con Google OAuth en PHP

Paso 1: Configurar un proyecto en Google Cloud Platform

Paso 2: Instalar la biblioteca de Google Client

Paso 3: Configurar el cliente de Google en PHP

Paso 4: Crear el flujo de inicio de sesión

Paso 5: Procesar la respuesta de Google

Paso 6: Implementar sesiones para usuarios autenticados

Paso 7: Cerrar la sesión para los usuario logueados

También te puede interesar:

Integración de APIs REST con Fetch API, PHP y MySQL