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

Introduction : pourquoi OAuth 2.0 et JWT sont la norme de l'autorisation moderne

Dans le développement web moderne, l'authentification et l'autorisation sécurisées des utilisateurs sont l'une des tâches clés. Les deux protocoles et formats les plus populaires qui résolvent ce problème sont OAuth 2.0 et JWT (JSON Web Token). Bien qu'ils soient souvent utilisés ensemble, ce sont des choses différentes : OAuth 2.0 est un protocole de délégation d'accès, tandis que JWT est un format de jeton.

Dans cet article, nous allons voir comment fonctionne OAuth 2.0, ce qu'est JWT, et comment les implémenter en JavaScript (Node.js). Ce contenu est destiné aux développeurs débutants, nous allons donc passer de la théorie à la pratique avec des exemples de code clairs.

Qu'est-ce que OAuth 2.0 et comment ça fonctionne

OAuth 2.0 (Open Authorization) est un protocole qui permet à une application d'obtenir un accès limité aux ressources d'un utilisateur sans transmettre son identifiant et son mot de passe. Imaginez que vous souhaitiez vous connecter à un site via Google ou GitHub — c'est OAuth 2.0.

Rôles principaux dans OAuth 2.0

• Resource Owner — l'utilisateur propriétaire des données
• Client — l'application qui demande l'accès
• Authorization Server — le serveur qui délivre les jetons (ex : Google)
• Resource Server — le serveur qui stocke les données de l'utilisateur

Flux Authorization Code Grant (exemple avec Node.js)

Le flux OAuth 2.0 le plus courant et le plus sécurisé est Authorization Code Grant. Voyons son implémentation avec Express.js.

// Installation des dépendances// npm install express axios dotenv

// .envCLIENT_ID=your_client_idCLIENT_SECRET=your_client_secretREDIRECT_URI=http://localhost:3000/callback

const express = require('express');const axios = require('axios');require('dotenv').config();

const app = express();

// Étape 1 : Redirection de l'utilisateur vers la page d'autorisationapp.get('/auth', (req, res) => {    const authUrl = `https://provider.com/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${process.env.REDIRECT_URI}&response_type=code&scope=email`;    res.redirect(authUrl);});

// Étape 2 : Traitement du callback avec le code d'autorisationapp.get('/callback', async (req, res) => {    const { code } = req.query;

    try {        // Échange du code d'autorisation contre un access token        const tokenResponse = await axios.post('https://provider.com/oauth/token', {            client_id: process.env.CLIENT_ID,            client_secret: process.env.CLIENT_SECRET,            code,            redirect_uri: process.env.REDIRECT_URI,            grant_type: 'authorization_code'        });

        const { access_token, refresh_token } = tokenResponse.data;                // Sauvegarde des jetons (dans un projet réel, en base de données)        req.session.accessToken = access_token;        req.session.refreshToken = refresh_token;

        res.send('Autorisation réussie !');    } catch (error) {        res.status(500).send('Erreur d\\'autorisation');    }});

app.listen(3000, () => console.log('Serveur démarré sur le port 3000'));

JWT (JSON Web Token) : structure et création

JWT est un moyen compact et autonome de transmettre des informations entre les parties sous la forme d'un objet JSON. Le jeton se compose de trois parties séparées par des points :

• Header — le type de jeton et l'algorithme de signature (ex : HS256)
• Payload — les données (claims) que nous souhaitons transmettre
• Signature — la signature garantissant l'intégrité des données

Création d'un JWT sur Node.js

Pour travailler avec JWT, nous utiliserons la bibliothèque jsonwebtoken.

// npm install jsonwebtoken

const jwt = require('jsonwebtoken');

const secretKey = 'votre_clé_secrète