OAuth 2.0 e autorização JWT em TypeScript: guia completo para iniciantes

OAuth 2.0 e autorização JWT em TypeScript: para iniciantes

As aplicações web modernas raramente funcionam sem mecanismos de autenticação e autorização. Os dois padrões mais populares são OAuth 2.0 (protocolo de delegação de acesso) e JWT (JSON Web Token, uma forma compacta de transmitir dados). Neste artigo, vamos analisar como implementar a autorização OAuth 2.0 e JWT em TypeScript, criando um servidor simples, mas funcional. O material é voltado para desenvolvedores iniciantes familiarizados com os fundamentos de TypeScript e Node.js.

O que são OAuth 2.0 e JWT?

Antes de escrever código, é importante entender a teoria.

OAuth 2.0

Este é um protocolo que permite que um usuário conceda a um aplicativo terceiro acesso limitado aos seus recursos (por exemplo, ao perfil no GitHub ou Google) sem fornecer login e senha. No OAuth 2.0, existem várias funções:

• Resource Owner — proprietário do recurso (usuário).
• Client — aplicativo que deseja obter acesso.
• Authorization Server — servidor que emite tokens após autenticação bem-sucedida.
• Resource Server — servidor que armazena dados protegidos.

O cenário mais comum é o "Authorization Code Flow", onde o usuário é redirecionado para a página do provedor, faz login e, em seguida, o servidor troca o código recebido por um token.

JWT (JSON Web Token)

JWT é uma string no formato header.payload.signature que contém dados (claims) e é assinada com uma chave secreta. É usado como Access Token (de curta duração) ou Refresh Token (de longa duração) no OAuth 2.0. A vantagem do JWT é que ele é autossuficiente: o servidor pode verificá-lo sem consultar o banco de dados.

Configuração do projeto e instalação de dependências

Vamos criar um novo projeto em TypeScript. Certifique-se de ter Node.js e 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

No arquivo tsconfig.json, descomente a linha "outDir": "./dist" e defina "rootDir": "./src". Crie a estrutura de pastas:

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

No arquivo .env, especifique:

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

Implementação do servidor com OAuth 2.0 e JWT

1. Estrutura básica do servidor (index.ts)

Vamos escrever um servidor Express simples com rotas para login, obtenção de tokens e um 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());

// Rota públicaapp.get('/', (req, res) => {  res.send('Servidor OAuth 2.0 + JWT está funcionando');});

// Autenticação (simulação de OAuth 2.0)app.post('/login', login);app.post('/token', refresh);   // Atualização do Access Tokenapp.delete('/logout', logout);

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

app.listen(process.env.PORT, () => {  console.log(`Servidor rodando na porta ${process.env.PORT}`);});

2. Tipos de dados (types.ts)

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

export int