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

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction à OAuth 2.0 et JWT : qu'est-ce que c'est et pourquoi en avez-vous besoin ?

\n

Les applications web modernes fonctionnent rarement sans système d'autorisation. Que ce soit la connexion via Google, l'accès à une API ou la protection de routes dans votre application Node.js — vous aurez besoin de OAuth 2.0 et de JWT (JSON Web Tokens). Ces technologies sont devenues le standard de facto pour l'échange sécurisé de données entre le client et le serveur.

\n

Dans cet article, nous allons voir comment fonctionnent OAuth 2.0 et JWT, et créer un système d'autorisation simple en JavaScript (Node.js). Ce contenu est destiné aux développeurs débutants, nous passerons donc de la théorie à la pratique avec des exemples de code détaillés.

\n\n

Partie 1 : Qu'est-ce que OAuth 2.0 et comment fonctionne-t-il ?

\n

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 son mot de passe. Imaginez que vous souhaitiez vous connecter à un site via votre compte Google. OAuth 2.0 est justement responsable de ce processus.

\n

Rôles principaux dans OAuth 2.0

\n
    \n
  • Resource Owner — l'utilisateur propriétaire des données.
  • \n
  • Client — votre application (par exemple, le serveur Node.js).
  • \n
  • Authorization Server — le serveur qui délivre les jetons (par exemple, Google, GitHub).
  • \n
  • Resource Server — le serveur qui stocke les données de l'utilisateur.
  • \n
\n

Flux typique d'OAuth 2.0 (Authorization Code Grant)

\n
    \n
  1. L'utilisateur clique sur « Se connecter avec Google ».
  2. \n
  3. L'application le redirige vers le serveur d'autorisation de Google.
  4. \n
  5. L'utilisateur donne son consentement.
  6. \n
  7. Google renvoie un authorization code au serveur de l'application.
  8. \n
  9. Le serveur échange ce code contre un access token.
  10. \n
  11. Le serveur utilise le access token pour accéder aux données de l'utilisateur.
  12. \n
\n

En pratique, pour les applications simples, on utilise souvent JWT comme format de jeton d'accès.

\n\n

Partie 2 : JWT — structure et principe de fonctionnement

\n

JWT (JSON Web Token) est un moyen compact et autonome de transmettre des informations entre les parties sous la forme d'un objet JSON. Le jeton est signé, il peut donc être vérifié sans accès à la base de données.

\n

Structure d'un JWT

\n

Un JWT se compose de trois parties, séparées par des points (.) :

\n
header.payload.signature
\n
    \n
  • Header — contient le type de jeton et l'algorithme de signature (par exemple, HS256).
  • \n
  • Payload — les données (claims), par exemple, l'ID utilisateur, le rôle, la durée de vie.
  • \n
  • Signature — la signature, créée à l'aide d'une clé secrète.
  • \n
\n

Exemple de JWT décodé

\n
{\n  "alg": "HS256",\n  "typ": "JWT"\n}\n.\n{\n  "sub": "1234567890",\n  "name": "John Doe",\n  "iat": 1516239022,\n  "exp": 1516242622\n}\n.\n[signature]
\n

Important : le payload n'est pas chiffré, seulement signé. Ne stockez jamais de données confidentielles (mots de passe) dans un JWT !

\n\n

Partie 3 : Implémentation de l'autorisation JWT avec Node.js

\n

Passons maintenant à la pratique. Nous allons créer une API REST simple avec Express.js et une autorisation JWT. Pour cela, nous aurons besoin des bibliothèques jsonwebtoken et bcryptjs.

\n

Étape 1 : Installation des dépendances

\n
npm init -y\nnpm install express jsonwebtoken bcryptjs dotenv\nnpm install --save-dev nodemon
\n

Étape 2 : Configuration de base du serveur

\n
// server.js\nrequire('dotenv').config();\nconst express = require('express');\nconst jwt = require('jsonwebtoken');\nconst bcrypt = require('bcryptjs');\n\nconst app = express();\napp.use(express.json());\n\nconst users = []; // Dans un projet réel — base de données\n\nconst PORT = process.env.PORT || 3000;\nconst JWT_SECRET = process.env.JWT_SECRET || 'mysecretkey123';\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});

                
                

Blogs

Book Recommendations