OAuth 2.0 et autorisation JWT en TypeScript : guide complet

OAuth 2.0 et autorisation JWT en TypeScript : guide complet

Les applications web modernes et les API nécessitent des mécanismes robustes d'authentification et d'autorisation. Les deux normes les plus populaires — OAuth 2.0 et JWT (JSON Web Tokens) — sont souvent utilisées ensemble pour créer des systèmes sécurisés et évolutifs. Dans cet article, nous allons voir comment implémenter l'autorisation OAuth 2.0 et JWT en TypeScript, en utilisant Express.js et des bibliothèques populaires.

Qu'est-ce que OAuth 2.0 et JWT ?

OAuth 2.0 est un protocole d'autorisation qui permet aux applications d'obtenir un accès limité aux ressources d'un utilisateur sans transmettre ses identifiants. Il est largement utilisé pour la connexion via les réseaux sociaux (Google, GitHub, Facebook).

JWT (JSON Web Token) est un token compact et autonome qui contient des informations sur l'utilisateur et peut être vérifié sans accès à la base de données. JWT est souvent utilisé comme format des access-tokens dans OAuth 2.0.

Ensemble, ils forment un mécanisme puissant : OAuth 2.0 gère le processus de délivrance des tokens, tandis que JWT assure leur transmission sécurisée et leur vérification.

Configuration du projet et installation des dépendances

Créons un nouveau projet en TypeScript. Assurez-vous d'avoir Node.js installé (version 18+).

mkdir oauth-jwt-typescriptcd oauth-jwt-typescriptnpm init -y

Installez les dépendances nécessaires :

npm install express jsonwebtoken passport passport-google-oauth20 dotenv bcryptjsnpm install -D typescript @types/express @types/jsonwebtoken @types/passport @types/passport-google-oauth20 @types/bcryptjs ts-node nodemon

Créez le fichier tsconfig.json :

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "outDir": "./dist"  },  "include": ["src/**/*"]}

Structure du projet :

src/  ├── config/  │   └── passport.ts  ├── controllers/  │   └── authController.ts  ├── middleware/  │   └── authMiddleware.ts  ├── models/  │   └── user.ts  ├── routes/  │   └── authRoutes.ts  ├── services/  │   └── jwtService.ts  └── app.ts

Implémentation de l'autorisation JWT

Les tokens JWT sont composés de trois parties : l'en-tête (header), la charge utile (payload) et la signature (signature). Examinons une implémentation de base en TypeScript.

Créons un service pour travailler avec JWT (src/services/jwtService.ts) :

import jwt from 'jsonwebtoken';import dotenv from 'dotenv';

dotenv.config();

const ACCESS_SECRET = process.env.JWT_ACCESS_SECRET || 'access-secret-key';const REFRESH_SECRET = process.env.JWT_REFRESH_SECRET || 'refresh-secret-key';

export interface TokenPayload {  userId: string;  email: string;  role: string;}

export const generateAccessToken = (payload: TokenPayload): string => {  return jwt.sign(payload, ACCESS_SECRET, { expiresIn: '15m' });};

export const generateRefreshToken = (payload: TokenPayload): string => {  return jwt.sign(payload, REFRESH_SECRET, { expiresIn: '7d' });};

export const verifyAccessToken = (token: string): TokenPayload => {  return jwt.verify(token, ACCESS_SECRET) as TokenPayload;};

export const verifyRefreshToken = (token: string): TokenPayload => {  return jwt.verify(token, REFRESH_SECRET) as TokenPayload;};

Créons un middleware pour vérifier le JWT (src/middleware/authMiddleware.ts) :

import { Request, Response, NextFunction } from 'express';import { verifyAccessToken } from '../services/jwtService';

export interface AuthRequest extends Request {  user?: {    userId: string;    email: string;    role: string;  };}

export const authenticateJWT = (req: AuthRequest, res: Response, next: NextFunction): void => {  const authHea