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
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é

É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.

JWT, OAuth2, OpenID Connect

Notions théoriques

1. JSON Web Token (JWT)

Structure d’un JWT :

2. OAuth2 : Protocole d’autorisation

Principaux rôles :

Flux d’autorisation :

3. OpenID Connect (OIDC) : Authentification basée sur OAuth2

Différences entre OAuth2 et OpenID Connect :

Exemple pratique

1. Création d’un compte Auth0

2. Intégration d’Auth0 dans une application Web

Test de mémorisation/compréhension

Quelle est la fonction principale d'un JWT ?

Quelle est la partie d'un JWT qui contient les informations sur l'utilisateur ?

Quel protocole permet de gérer l'autorisation d'accès aux ressources d'un utilisateur ?

Quel type de token est utilisé par OpenID Connect pour vérifier l'identité d'un utilisateur ?

Quel rôle joue le 'Resource Owner' dans OAuth2 ?

TP pour réfléchir et résoudre des problèmes

Étape 1 : Création d’une application OAuth sur GitHub

Instructions :

Étape 2 : Mise en place du projet Node.js

Instructions :

Étape 3 : Création du serveur Express

Instructions :

Étape 4 : Récupération du code d’autorisation

Instructions :

Étape 5 : Récupération des informations de l’utilisateur

Instructions :

Conclusion

Notions théoriques​

1. JSON Web Token (JWT)​

Structure d’un JWT :​

2. OAuth2 : Protocole d’autorisation​

Principaux rôles :​

Flux d’autorisation :​

3. OpenID Connect (OIDC) : Authentification basée sur OAuth2​

Différences entre OAuth2 et OpenID Connect :​

Exemple pratique​

1. Création d’un compte Auth0​

2. Intégration d’Auth0 dans une application Web​

Test de mémorisation/compréhension​

Quelle est la fonction principale d'un JWT ?

Quelle est la partie d'un JWT qui contient les informations sur l'utilisateur ?

Quel protocole permet de gérer l'autorisation d'accès aux ressources d'un utilisateur ?

Quel type de token est utilisé par OpenID Connect pour vérifier l'identité d'un utilisateur ?

Quel rôle joue le 'Resource Owner' dans OAuth2 ?

TP pour réfléchir et résoudre des problèmes​

Étape 1 : Création d’une application OAuth sur GitHub​

Instructions :​

Étape 2 : Mise en place du projet Node.js​

Instructions :​

Étape 3 : Création du serveur Express​

Instructions :​

Étape 4 : Récupération du code d’autorisation​

Instructions :​

Étape 5 : Récupération des informations de l’utilisateur​

Instructions :​

Conclusion​

Notions théoriques

1. JSON Web Token (JWT)

Structure d’un JWT :

2. OAuth2 : Protocole d’autorisation

Principaux rôles :

Flux d’autorisation :

3. OpenID Connect (OIDC) : Authentification basée sur OAuth2

Différences entre OAuth2 et OpenID Connect :

Exemple pratique

1. Création d’un compte Auth0

2. Intégration d’Auth0 dans une application Web

Test de mémorisation/compréhension

TP pour réfléchir et résoudre des problèmes

Étape 1 : Création d’une application OAuth sur GitHub

Instructions :

Étape 2 : Mise en place du projet Node.js

Instructions :

Étape 3 : Création du serveur Express

Instructions :

Étape 4 : Récupération du code d’autorisation

Instructions :

Étape 5 : Récupération des informations de l’utilisateur

Instructions :

Conclusion