OAuth 2.0 et autorisation JWT en JavaScript : guide complet

OAuth 2.0 et autorisation JWT en JavaScript : en pratique

Les applications web modernes se passent rarement d'un système 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 solutions sécurisées et évolutives. Dans cet article, nous allons voir comment implémenter l'autorisation OAuth 2.0 et JWT en JavaScript (Node.js) avec des exemples de code pratiques.

Ce contenu sera utile aussi bien aux débutants qu'aux développeurs expérimentés qui souhaitent approfondir leur compréhension des mécanismes des jetons et de l'accès délégué.

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. Par exemple, vous pouvez vous connecter à un site via Google ou GitHub — c'est OAuth 2.0.

JWT (JSON Web Token) est un format de jeton compact qui contient des données encodées (payload) et une signature. JWT est utilisé pour transmettre des informations entre les parties (client et serveur) et vérifier leur authenticité.

En combinaison, OAuth 2.0 agit comme un protocole de délivrance de jetons, tandis que JWT est le format des jetons d'accès eux-mêmes.

Configuration du serveur et installation des dépendances

Pour commencer, créons un serveur simple avec Express.js et installons les packages nécessaires :

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

Structure du projet :

\n
• server.js — fichier principal du serveur
\n
• .env — variables d'environnement
\n
• middleware/auth.js — middleware pour vérifier JWT
\n
• routes/auth.js — routes d'authentification
\n

Implémentation de l'autorisation JWT

Commençons par la génération et la vérification de base des jetons JWT. Créons 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// Génération du jeton\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// Exemple de route pour la connexion\napp.post('/login', (req, res) => {\n  const { email, password } = req.body;\n  // Ici devrait se trouver la vérification en base de données\n  const user = { id: 1, email, role: 'user' };\n  const token = generateToken(user);\n  res.json({ token });\n});\n\n// Middleware pour vérifier le jeton\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: 'Jeton non fourni' });\n  }\n\n  jwt.verify(token, SECRET_KEY, (err, user) => {\n    if (err) {\n      return res.status(403).json({ error: 'Jeton invalide' });\n    }\n    req.user = user;\n    next();\n  });\n}\n\n// Route protégée\napp.get('/profile', authenticateToken, (req, res) => {\n  res.json({ message: 'Accès autorisé', user: req.user });\n});\n\napp.listen(3000, () => console.log('Serveur démarré sur le port 3000'));

Intégration OAuth 2.0 via Google

Ajoutons maintenant OAuth 2.0 en utilisant Google comme fournisseur. Créons 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// Route pour le début