Comment décoder les jetons JWT en JavaScript sans bibliothèques externes ?

Décoder les jetons JWT en JavaScript sans bibliothèques

Le décodage de la charge utile d'un JWT (JSON Web Token) est essentiel pour accéder et utiliser ses revendications dans une application frontale. Vous trouverez ci-dessous deux méthodes efficaces pour décoder les jetons JWT sans bibliothèques :

Navigateur :

Dans l'environnement du navigateur, nous pouvons utiliser les étapes suivantes pour extraire la charge utile JSON :

1. Divisez le jeton en trois parties en utilisant le point ('.') comme délimiteur.
2. Décodez la deuxième partie, qui contient la charge utile, en utilisant base64url (RFC 4648 §5 ).
3. Décoder la charge utile codée en base64url en une chaîne de texte Unicode.
4. Décoder la chaîne Unicode en tant qu'objet JSON.

Code JavaScript :

<code class="javascript">function parseJwt(token) {
    const base64UrlPayload = token.split('.')[1];
    const base64Payload = base64UrlPayload.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(window.atob(base64Payload).split('').map(c => {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
}</code>

Node.js :

Node.js offre une méthode simple pour décoder les charges utiles JWT :

1. Split le jeton en trois parties en utilisant le point ('.') comme délimiteur.
2. Décoder la deuxième partie, qui contient la charge utile, en utilisant base64.
3. Convertir la charge utile décodée, qui est un Objet Buffer, dans un objet JSON.

Code JavaScript :

<code class="javascript">function parseJwt(token) {
    const base64Payload = token.split('.')[1];
    const payloadBuffer = Buffer.from(base64Payload, 'base64');
    const payload = JSON.parse(payloadBuffer.toString());

    return payload;
}</code>

Remarque : Ces méthodes ne valident pas la signature du jeton JWT. Il est fortement recommandé d'utiliser une bibliothèque pour la vérification de la signature afin de garantir l'authenticité du jeton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!