Comment décoder le jeton jwt en javascript sans utiliser de bibliothèque?

Comment puis-je décoder la charge utile de JWT en utilisant JavaScript? Sans bibliothèque. Ainsi, le jeton renvoie simplement un objet de charge utile qui peut être consommé par mon application frontale.

Exemple de jeton: xxxxxxxxx.XXXXXXXX.xxxxxxxx

Et le résultat est la charge utile:

{exp: 10012016 name: john doe, scope:['admin']}

Fonction d'analyseur JWT de texte unicode de travail:

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
};

Fonction simple avec try - catch

const parseJwt = (token) => {
  try {
    return JSON.parse(atob(token.split('.')[1]));
  } catch (e) {
    return null;
  }
};

Merci!

Vous pouvez utiliser jwt-decode , vous pouvez donc écrire:

import jwt_decode from 'jwt-decode';

var token = 'eyJ0eXAiO.../// jwt token';

var decoded = jwt_decode(token);
console.log(decoded);
/*{exp: 10012016 name: john doe, scope:['admin']}*/

vous pouvez utiliser la atob()fonction javascript pur pour décoder le jeton en une chaîne:

atob(token.split('.')[1]);

ou l'analyser directement dans un objet json:

JSON.parse(atob(token.split('.')[1]));

lire atob()et btoa()fonctions javascript intégrées Encodage et décodage Base64 - API Web | MDN .

@Peheje fonctionnera, mais vous aurez un problème avec unicode. Pour le corriger, j'utilise le code sur https://stackoverflow.com/a/30106551/5277071 ;

let b64DecodeUnicode = str =>
  decodeURIComponent(
    Array.prototype.map.call(atob(str), c =>
      '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    ).join(''))

let parseJwt = token =>
  JSON.parse(
    b64DecodeUnicode(
      token.split('.')[1].replace('-', '+').replace('_', '/')
    )
  )


let form = document.getElementById("form")
form.addEventListener("submit", (e) => {
   form.out.value = JSON.stringify(
      parseJwt(form.jwt.value)
   )
   e.preventDefault();
})

textarea{width:300px; height:60px; display:block}

<form id="form" action="parse">
  <textarea name="jwt">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkrDtGhuIETDs8OoIiwiYWRtaW4iOnRydWV9.469tBeJmYLERjlKi9u6gylb-2NsjHLC_6kZNdtoOGsA</textarea>
  <textarea name="out"></textarea>
  <input type="submit" value="parse" />
</form>

Comme l'objet "window" n'est pas présent dans l'environnement nodejs, nous pourrions utiliser les lignes de code suivantes:

let base64Url = token.split('.')[1]; // token you get
let base64 = base64Url.replace('-', '+').replace('_', '/');
let decodedData = JSON.parse(Buffer.from(base64, 'base64').toString('binary'));

Cela fonctionne parfaitement pour moi. J'espère que ça aide.

function parseJwt(token) {
  var base64Payload = token.split('.')[1];
  var payload = Buffer.from(base64Payload, 'base64');
  return JSON.parse(payload.tostring());
}

let payload= parseJwt("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c");
console.log("payload:- ", payload);

Si vous utilisez un nœud, vous devrez peut-être utiliser un package de tampon:

npm install buffer
var Buffer = require('buffer/').Buffer

J'utilise cette fonction pour obtenir la charge utile, l'en-tête, exp (heure d'expiration), iat (émis à) en fonction de cette réponse

function parseJwt(token) {
  try {
    // Get Token Header
    const base64HeaderUrl = token.split('.')[0];
    const base64Header = base64HeaderUrl.replace('-', '+').replace('_', '/');
    const headerData = JSON.parse(window.atob(base64Header));

    // Get Token payload and date's
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace('-', '+').replace('_', '/');
    const dataJWT = JSON.parse(window.atob(base64));
    dataJWT.header = headerData;

// TODO: add expiration at check ...


    return dataJWT;
  } catch (err) {
    return false;
  }
}

const jwtDecoded = parseJwt('YOUR_TOKEN') ;
if(jwtDecoded)
{
    console.log(jwtDecoded)
}

toutes les fonctionnalités de jwt.io ne prennent pas en charge toutes les langues. Dans NodeJs, vous pouvez utiliser

var decoded = jwt.decode(token);

J'ai trouvé ce code sur jwt.io et cela fonctionne bien.

//this is used to parse base64
function url_base64_decode(str) {
  var output = str.replace(/-/g, '+').replace(/_/g, '/');
  switch (output.length % 4) {
    case 0:
      break;
    case 2:
      output += '==';
      break;
    case 3:
      output += '=';
      break;
    default:
      throw 'Illegal base64url string!';
  }
  var result = window.atob(output); //polifyll https://github.com/davidchambers/Base64.js
  try{
    return decodeURIComponent(escape(result));
  } catch (err) {
    return result;
  }
}

Dans certains cas (certaines plates-formes de développement),
la meilleure réponse (pour l'instant) fait face à un problème de longueur de base64 non valide.
Donc, j'avais besoin d'un moyen plus stable.

J'espère que ça t'aidera.

Guy et Peheje ont déjà répondu à la question. Pour un débutant total comme moi, il était utile d'avoir également défini la ligne d'importation dans l'exemple.

De plus, il m'a fallu quelques minutes pour comprendre que le jeton est l'ensemble complet des informations d'identification qui sont publiées (le jeton JWT entier, pas seulement la partie idToken). Simple une fois que vous le savez ..

import jwt_decode from 'jwt-decode';

var token = 'eyJ0eXAiO.../// jwt token';
var decoded = jwt_decode(token);

/*{exp: 10012016 name: john doe, scope:['admin']}*/

Solution NodeJS simple pour décoder un jeton Web JSON (JWT)

function decodeTokenComponent(value) {
    const buff = new Buffer(value, 'base64')
    const text = buff.toString('ascii')
    return JSON.parse(text)
}

const token = 'xxxxxxxxx.XXXXXXXX.xxxxxxxx'
const [headerEncoded, payloadEncoded, signature] = token.split('.')
const [header, payload] = [headerEncoded, payloadEncoded].map(decodeTokenComponent)

console.log(`header: ${header}`)
console.log(`payload: ${payload}`)
console.log(`signature: ${signature}`)

Réponse basée sur GitHub - auth0 / jwt-decode . Modification de l'entrée / sortie pour inclure le fractionnement de chaîne et l'objet de retour {en-tête, charge utile, signature} afin que vous puissiez simplement passer tout le jeton.

var jwtDecode = function (jwt) {

        function b64DecodeUnicode(str) {
            return decodeURIComponent(atob(str).replace(/(.)/g, function (m, p) {
                var code = p.charCodeAt(0).toString(16).toUpperCase();
                if (code.length < 2) {
                    code = '0' + code;
                }
                return '%' + code;
            }));
        }

        function decode(str) {
            var output = str.replace(/-/g, "+").replace(/_/g, "/");
            switch (output.length % 4) {
                case 0:
                    break;
                case 2:
                    output += "==";
                    break;
                case 3:
                    output += "=";
                    break;
                default:
                    throw "Illegal base64url string!";
            }

            try {
                return b64DecodeUnicode(output);
            } catch (err) {
                return atob(output);
            }
        }

        var jwtArray = jwt.split('.');

        return {
            header: decode(jwtArray[0]),
            payload: decode(jwtArray[1]),
            signature: decode(jwtArray[2])
        };

    };

Voici une solution plus riche en fonctionnalités que je viens de faire après avoir étudié cette question:

const parseJwt = (token) => {
    try {
        if (!token) {
            throw new Error('parseJwt# Token is required.');
        }

        const base64Payload = token.split('.')[1];
        let payload = new Uint8Array();

        try {
            payload = Buffer.from(base64Payload, 'base64');
        } catch (err) {
            throw new Error(`parseJwt# Malformed token: ${err}`);
        }

        return {
            decodedToken: JSON.parse(payload),
        };
    } catch (err) {
        console.log(`Bonus logging: ${err}`);

        return {
            error: 'Unable to decode token.',
        };
    }
};

Voici quelques exemples d'utilisation:

const unhappy_path1 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvtmalformedtoken');
console.log('unhappy_path1', unhappy_path1);

const unhappy_path2 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvt.malformedtoken');
console.log('unhappy_path2', unhappy_path2);

const unhappy_path3 = parseJwt();
console.log('unhappy_path3', unhappy_path3);

const { error, decodedToken } = parseJwt('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
if (!decodedToken.exp) {
    console.log('almost_happy_path: token has illegal claims (missing expires_at timestamp)', decodedToken);
    // note: exp, iat, iss, jti, nbf, prv, sub
}

Je n'ai pas pu rendre ce fichier exécutable dans l'outil d'extrait de code StackOverflow, mais voici approximativement ce que vous verriez si vous exécutiez ce code:

J'ai fait que la parseJwtfonction retourne toujours un objet (dans une certaine mesure pour des raisons de typage statique).

Cela vous permet d'utiliser une syntaxe telle que:

const { decodedToken, error } = parseJwt(token);

Ensuite, vous pouvez tester au moment de l'exécution des types d'erreurs spécifiques et éviter toute collision de noms.

Si quelqu'un peut penser à un faible effort, à des modifications de grande valeur de ce code, n'hésitez pas à modifier ma réponse au profit de next(person).

Basé sur les réponses ici et ici :

const dashRE = /-/g;
const lodashRE = /_/g;

module.exports = function jwtDecode(tokenStr) {
  const base64Url = tokenStr.split('.')[1];
  if (base64Url === undefined) return null;
  const base64 = base64Url.replace(dashRE, '+').replace(lodashRE, '/');
  const jsonStr = Buffer.from(base64, 'base64').toString();
  return JSON.parse(jsonStr);
};

En exécutant Javascript node.js express, j'ai d'abord dû installer le package comme suit:

npm install jwt-decode --save

puis dans mon code app.js récupérez le package:

const jwt_decode = require('jwt-decode');

Exécutez ensuite le code:

let jwt_decoded = jwt_decode(jwt_source);

Puis la magie:

console.log('sub:',jwt_decoded.sub);