JWT, OAuth2, OpenID Connect
Sécurisation des accès et authentification
Notions théoriques
L’authentification et l’autorisation sont essentielles pour sécuriser les applications Web et mobiles.
Plusieurs technologies permettent de gérer ces aspects de manière efficace et sécurisée :
- JWT (JSON Web Token),
- OAuth2
- et OpenID Connect.
1. JSON Web Token (JWT)
Un JSON Web Token (JWT) est un format standard de jeton utilisé pour l’échange sécurisé d’informations entre deux parties. Il est compact, auto-contenu et signé numériquement.
Structure d’un JWT :
Un JWT est composé de trois parties encodées en Base64 et séparées par des points (.
) :
- Header : Contient le type de jeton (
JWT
) et l’algorithme de signature (HS256
,RS256
, etc.). - Payload : Contient les claims (informations sur l’utilisateur, permissions, etc.).
- Signature : Permet de vérifier l’intégrité du jeton.
Exemple de JWT :
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsInJvbGUiOiJ1c2VyIn0.4f3Y8...
2. OAuth2 : Protocole d’autorisation
OAuth2 est un protocole permettant à une application d’accéder aux ressources d’un utilisateur sur un autre service sans exposer ses identifiants.
Principaux rôles :
- Resource Owner : L’utilisateur qui possède les données.
- Client : L’application qui demande l’accès aux ressources.
- Authorization Server : Le serveur qui authentifie l’utilisateur et délivre un token.
- Resource Server : Le serveur qui héberge les ressources protégées.
Flux d’autorisation :
- L’utilisateur accède à une application tierce (
Client
). - L’application redirige l’utilisateur vers le serveur d’autorisation.
- L’utilisateur s’authentifie et autorise l’accès.
- Le serveur d’autorisation délivre un Access Token.
- L’application utilise ce token pour accéder aux ressources de l’utilisateur.
3. OpenID Connect (OIDC) : Authentification basée sur OAuth2
OpenID Connect (OIDC) est une extension d’OAuth2 qui ajoute une couche d’authentification.
Il permet aux applications de vérifier l’identité d’un utilisateur via un ID Token.
Différences entre OAuth2 et OpenID Connect :
OAuth2 | OpenID Connect |
---|---|
Gère l’autorisation | Gère l’authentification |
Utilise un Access Token | Utilise un ID Token |
Ne garantit pas l’identité de l’utilisateur | Vérifie l’identité de l’utilisateur |
OIDC permet d’obtenir des informations sur l’utilisateur (sub
, name
, email
, etc.) via un ID Token.
Exemple pratique
Il est possible de mettre en place une authentification avec OAuth2 et OpenID Connect en utilisant Auth0 comme fournisseur d’identité.
1. Création d’un compte Auth0
- Se rendre sur Auth0.
- Créer un compte et accéder au tableau de bord.
- Ajouter une nouvelle application.
- Sélectionner Single Page Application (SPA).
- Noter l’identifiant client (
Client ID
) et l’URL de domaine (Auth0 Domain
).
2. Intégration d’Auth0 dans une application Web
Créer un fichier index.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script>
<script>
let auth0 = null;
const configureAuth = async () => {
auth0 = await createAuth0Client({
domain: "VOTRE-DOMAINE.auth0.com",
client_id: "VOTRE-CLIENT-ID",
redirect_uri: window.location.origin
});
};
const login = async () => {
await auth0.loginWithRedirect();
};
const logout = () => {
auth0.logout({ returnTo: window.location.origin });
};
</script>
</head>
<body>
<button onclick="login()">Se connecter</button>
<button onclick="logout()">Se déconnecter</button>
</body>
</html>
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Intégration de l'authentification OAuth2 avec GitHub
L’objectif de ce TP est d’implémenter une authentification OAuth2 avec GitHub dans une application Web.
Étape 1 : Création d’une application OAuth sur GitHub
Avant de pouvoir authentifier des utilisateurs via GitHub, il est nécessaire de configurer une application OAuth sur la plateforme.
Instructions :
- Se rendre sur GitHub Developer Settings.
- Cliquer sur New OAuth App.
- Remplir les champs suivants :
- Application name :
MonAppOAuth
- Homepage URL :
http://localhost:3000
- Authorization callback URL :
http://localhost:3000/callback
- Application name :
- Valider la création de l’application.
- Noter les valeurs suivantes :
- Client ID : Identifiant public de l’application.
- Client Secret : Clé secrète permettant d’échanger un code temporaire contre un access token.
Étape 2 : Mise en place du projet Node.js
L’application sera développée avec Node.js et le framework Express pour gérer les routes.
Instructions :
- Installer Node.js si ce n’est pas déjà fait.
- Ouvrir un terminal et exécuter les commandes suivantes :
mkdir oauth-github
cd oauth-github
npm init -y
- Installer les dépendances nécessaires :
npm install express axios dotenv
- Créer un fichier
.env
pour stocker les variables sensibles :
touch .env
- Ajouter les informations suivantes dans
.env
:
GITHUB_CLIENT_ID=VOTRE_CLIENT_ID
GITHUB_CLIENT_SECRET=VOTRE_CLIENT_SECRET
Étape 3 : Création du serveur Express
Le serveur Express servira à rediriger l’utilisateur vers GitHub pour l’authentification.
Instructions :
- Créer un fichier
server.js
:
touch server.js
- Ajouter le code suivant dans
server.js
:
const express = require("express");
const axios = require("axios");
require("dotenv").config();
const app = express();
const PORT = 3000;
app.get("/login", (req, res) => {
const redirectUrl = `https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_CLIENT_ID}`;
res.redirect(redirectUrl);
});
app.listen(PORT, () => console.log(`Serveur en cours d'exécution sur http://localhost:${PORT}`));
- Démarrer le serveur :
node server.js
- Ouvrir un navigateur et accéder à
http://localhost:3000/login
pour vérifier la redirection vers GitHub.
Étape 4 : Récupération du code d’autorisation
Après l’authentification sur GitHub, un code d’autorisation est transmis en paramètre dans l’URL de redirection.
Instructions :
- Modifier
server.js
pour gérer le retour de GitHub :
app.get("/callback", async (req, res) => {
const code = req.query.code;
if (!code) {
return res.send("Erreur : Aucun code reçu.");
}
try {
const response = await axios.post("https://github.com/login/oauth/access_token", {
client_id: process.env.GITHUB_CLIENT_ID,
client_secret: process.env.GITHUB_CLIENT_SECRET,
code: code
}, {
headers: { Accept: "application/json" }
});
const accessToken = response.data.access_token;
res.send(`Access Token : ${accessToken}`);
} catch (error) {
res.send("Erreur lors de l'échange du code contre un token.");
}
});
- Redémarrer le serveur :
node server.js
- Tester l’authentification :
- Accéder à
http://localhost:3000/login
- Se connecter avec un compte GitHub
- Observer la redirection vers
http://localhost:3000/callback
- Vérifier que l’Access Token est affiché
- Accéder à
Étape 5 : Récupération des informations de l’utilisateur
Une fois l’Access Token obtenu, il est possible de récupérer les informations du compte GitHub de l’utilisateur.
Instructions :
- Modifier
server.js
pour ajouter une route/user
:
app.get("/user", async (req, res) => {
const accessToken = req.query.token;
if (!accessToken) {
return res.send("Erreur : Aucun token fourni.");
}
try {
const response = await axios.get("https://api.github.com/user", {
headers: { Authorization: `Bearer ${accessToken}` }
});
res.json(response.data);
} catch (error) {
res.send("Erreur lors de la récupération des informations utilisateur.");
}
});
- Redémarrer le serveur :
node server.js
- Tester l’API :
- Copier l’Access Token obtenu précédemment.
- Accéder à
http://localhost:3000/user?token=VOTRE_ACCESS_TOKEN
- Vérifier que les informations du compte GitHub sont affichées.
Conclusion
Ce TP a permis d’implémenter une authentification OAuth2 avec GitHub en plusieurs étapes :
- Création d’une application OAuth sur GitHub.
- Mise en place d’un serveur Node.js avec Express.
- Redirection de l’utilisateur vers GitHub pour l’authentification.
- Récupération du code d’autorisation et échange contre un access token.
- Utilisation de l’access token pour récupérer les informations de l’utilisateur.
Cette approche est couramment utilisée pour sécuriser l’accès aux applications Web sans stocker les identifiants des utilisateurs.
Ce principe est également utilisé par d’autres fournisseurs OAuth2 comme Google, Facebook ou Microsoft.