OAuth 2.0 y autorización JWT en TypeScript: guía completa para principiantes

OAuth 2.0 y autorización JWT en TypeScript: para principiantes

Las aplicaciones web modernas rara vez prescinden de mecanismos de autenticación y autorización. Los dos estándares más populares son OAuth 2.0 (protocolo de delegación de acceso) y JWT (JSON Web Token, una forma compacta de transmitir datos). En este artículo, analizaremos cómo implementar la autorización OAuth 2.0 y JWT en TypeScript, creando un servidor simple pero funcional. El material está dirigido a desarrolladores principiantes familiarizados con los conceptos básicos de TypeScript y Node.js.

¿Qué son OAuth 2.0 y JWT?

Antes de escribir código, es importante entender la teoría.

OAuth 2.0

Es un protocolo que permite a un usuario otorgar a una aplicación de terceros acceso limitado a sus recursos (por ejemplo, a su perfil en GitHub o Google) sin compartir su nombre de usuario y contraseña. En OAuth 2.0 hay varios roles:

• Resource Owner — propietario del recurso (usuario).
• Client — aplicación que desea obtener acceso.
• Authorization Server — servidor que emite tokens después de una autenticación exitosa.
• Resource Server — servidor que almacena datos protegidos.

El escenario más común es el "Authorization Code Flow", donde el usuario es redirigido a la página del proveedor, inicia sesión y luego el servidor intercambia el código obtenido por un token.

JWT (JSON Web Token)

JWT es una cadena en el formato header.payload.signature que contiene datos (claims) y está firmada con una clave secreta. Se utiliza como Access Token (de corta duración) o Refresh Token (de larga duración) en OAuth 2.0. La ventaja de JWT es que es autosuficiente: el servidor puede verificarlo sin consultar la base de datos.

Configuración del proyecto e instalación de dependencias

Crearemos un nuevo proyecto en TypeScript. Asegúrese de tener Node.js y npm instalados.

mkdir oauth-jwt-typescriptcd oauth-jwt-typescriptnpm init -ynpm install express jsonwebtoken dotenv cors cookie-parsernpm install -D typescript @types/node @types/express @types/jsonwebtoken @types/cors @types/cookie-parser ts-node nodemonnpx tsc --init

En el archivo tsconfig.json, descomente la línea "outDir": "./dist" y establezca "rootDir": "./src". Cree la estructura de carpetas:

src/  ├── index.ts  ├── auth.ts  ├── middleware.ts  └── types.ts.env

En el archivo .env, especifique:

ACCESS_TOKEN_SECRET=your-secret-key-123REFRESH_TOKEN_SECRET=your-refresh-secret-456PORT=3000

Implementación del servidor con OAuth 2.0 y JWT

1. Estructura básica del servidor (index.ts)

Escribiremos un servidor Express simple con rutas para inicio de sesión, obtención de tokens y un endpoint protegido.

import express from 'express';import cors from 'cors';import cookieParser from 'cookie-parser';import dotenv from 'dotenv';import { login, refresh, logout } from './auth';import { authenticateToken } from './middleware';

dotenv.config();

const app = express();app.use(express.json());app.use(cors());app.use(cookieParser());

// Ruta públicaapp.get('/', (req, res) => {  res.send('OAuth 2.0 + JWT Server is running');});

// Autenticación (simulación de OAuth 2.0)app.post('/login', login);app.post('/token', refresh);   // Renovación del Access Tokenapp.delete('/logout', logout);

// Ruta protegidaapp.get('/protected', authenticateToken, (req, res) => {  res.json({ message: 'Acceso permitido', user: (req as any).user });});

app.listen(process.env.PORT, () => {  console.log(`Server running on port ${process.env.PORT}`);});

2. Tipos de datos (types.ts)

export interface TokenPayload {  userId: number;  username: string;}

export int