OAuth 2.0 y autorización JWT en JavaScript: guía completa

OAuth 2.0 y autorización JWT en JavaScript: en la práctica

Las aplicaciones web modernas rara vez prescinden de un sistema de autenticación y autorización. Los dos estándares más populares — OAuth 2.0 y JWT (JSON Web Tokens) — se utilizan a menudo juntos para crear soluciones seguras y escalables. En este artículo, analizaremos cómo implementar OAuth 2.0 y la autorización JWT en JavaScript (Node.js) con ejemplos prácticos de código.

El material será útil tanto para desarrolladores principiantes como para experimentados que deseen comprender más profundamente los mecanismos de funcionamiento de los tokens y el acceso delegado.

¿Qué son OAuth 2.0 y JWT?

OAuth 2.0 es un protocolo de autorización que permite a las aplicaciones obtener acceso limitado a los recursos del usuario sin transferir sus credenciales. Por ejemplo, puede iniciar sesión en un sitio web a través de Google o GitHub — eso es OAuth 2.0.

JWT (JSON Web Token) es un formato de token compacto que contiene datos codificados (payload) y una firma. JWT se utiliza para transferir información entre partes (cliente y servidor) y verificar su autenticidad.

En conjunto, OAuth 2.0 actúa como el protocolo de emisión de tokens, y JWT como el formato de los propios tokens de acceso.

Configuración del servidor e instalación de dependencias

Para empezar, crearemos un servidor simple con Express.js e instalaremos los paquetes necesarios:

npm init -y\nnpm install express jsonwebtoken dotenv cors axios\nnpm install --save-dev nodemon

Estructura del proyecto:

\n
• server.js — archivo principal del servidor
\n
• .env — variables de entorno
\n
• middleware/auth.js — middleware para verificar JWT
\n
• routes/auth.js — rutas de autenticación
\n

Implementación de la autorización JWT

Empecemos con la generación y verificación básica de tokens JWT. Crearemos server.js:

const express = require('express');\nconst jwt = require('jsonwebtoken');\nrequire('dotenv').config();\n\nconst app = express();\napp.use(express.json());\n\nconst SECRET_KEY = process.env.JWT_SECRET || 'my_secret_key';\n\n// Generación de token\nfunction generateToken(user) {\n  const payload = {\n    id: user.id,\n    email: user.email,\n    role: user.role\n  };\n  return jwt.sign(payload, SECRET_KEY, { expiresIn: '1h' });\n}\n\n// Ejemplo de ruta para inicio de sesión\napp.post('/login', (req, res) => {\n  const { email, password } = req.body;\n  // Aquí debería ir la verificación en la BD\n  const user = { id: 1, email, role: 'user' };\n  const token = generateToken(user);\n  res.json({ token });\n});\n\n// Middleware para verificar el token\nfunction authenticateToken(req, res, next) {\n  const authHeader = req.headers['authorization'];\n  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN\n\n  if (!token) {\n    return res.status(401).json({ error: 'Token no proporcionado' });\n  }\n\n  jwt.verify(token, SECRET_KEY, (err, user) => {\n    if (err) {\n      return res.status(403).json({ error: 'Token no válido' });\n    }\n    req.user = user;\n    next();\n  });\n}\n\n// Ruta protegida\napp.get('/profile', authenticateToken, (req, res) => {\n  res.json({ message: 'Acceso permitido', user: req.user });\n});\n\napp.listen(3000, () => console.log('Servidor iniciado en el puerto 3000'));

Integración de OAuth 2.0 a través de Google

Ahora agregaremos OAuth 2.0 usando Google como proveedor. Crearemos routes/auth.js:

const express = require('express');\nconst axios = require('axios');\nconst jwt = require('jsonwebtoken');\nconst router = express.Router();\n\nconst GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;\nconst GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;\nconst REDIRECT_URI = 'http://localhost:3000/auth/google/callback';\nconst JWT_SECRET = process.env.JWT_SECRET;\n\n// Ruta para ini