OAuth 2.0 et autorisation JWT en TypeScript : guide complet pour débutants

OAuth 2.0 et autorisation JWT en TypeScript : pour débutants

Les applications web modernes fonctionnent rarement sans mécanismes d'authentification et d'autorisation. Les deux normes les plus populaires sont OAuth 2.0 (protocole de délégation d'accès) et JWT (JSON Web Token, méthode compacte de transmission de données). Dans cet article, nous allons voir comment implémenter l'autorisation OAuth 2.0 et JWT en TypeScript, en créant un serveur simple mais fonctionnel. Ce contenu est destiné aux développeurs débutants familiers avec les bases de TypeScript et Node.js.

Que sont OAuth 2.0 et JWT ?

Avant d'écrire du code, il est important de comprendre la théorie.

OAuth 2.0

Il s'agit d'un protocole qui permet à un utilisateur d'accorder à une application tierce un accès limité à ses ressources (par exemple, à son profil GitHub ou Google) sans transmettre son identifiant ni son mot de passe. OAuth 2.0 comporte plusieurs rôles :

• Resource Owner — le propriétaire de la ressource (l'utilisateur).
• Client — l'application qui souhaite obtenir l'accès.
• Authorization Server — le serveur qui délivre les jetons après une authentification réussie.
• Resource Server — le serveur qui stocke les données protégées.

Le scénario le plus courant est le « Authorization Code Flow », où l'utilisateur est redirigé vers la page du fournisseur, se connecte, puis le serveur échange le code obtenu contre un jeton.

JWT (JSON Web Token)

JWT est une chaîne au format header.payload.signature qui contient des données (claims) et est signée avec une clé secrète. Elle est utilisée comme Access Token (à courte durée de vie) ou Refresh Token (à longue durée de vie) dans OAuth 2.0. L'avantage de JWT est qu'il est autonome : le serveur peut le vérifier sans accéder à la base de données.

Configuration du projet et installation des dépendances

Créons un nouveau projet en TypeScript. Assurez-vous d'avoir Node.js et npm installés.

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

Dans le fichier tsconfig.json, décommentez la ligne "outDir": "./dist" et définissez "rootDir": "./src". Créez la structure de dossiers :

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

Dans le fichier .env, indiquez :

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

Implémentation du serveur avec OAuth 2.0 et JWT

1. Structure de base du serveur (index.ts)

Écrivons un serveur Express simple avec des routes pour la connexion, l'obtention de jetons et un point d'accès protégé.

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());

// Route publiqueapp.get('/', (req, res) => {  res.send('Le serveur OAuth 2.0 + JWT est en cours d\\'exécution');});

// Authentification (simulation OAuth 2.0)app.post('/login', login);app.post('/token', refresh);   // Renouvellement du Access Tokenapp.delete('/logout', logout);

// Route protégéeapp.get('/protected', authenticateToken, (req, res) => {  res.json({ message: 'Accès autorisé', user: (req as any).user });});

app.listen(process.env.PORT, () => {  console.log(`Serveur en cours d\\'exécution sur le port ${process.env.PORT}`);});

2. Types de données (types.ts)

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

export int