Comment décoder le jeton jwt en javascript

Question

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 pouvant être utilisé 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']}
 

Answer 1

Est-ce que ça va marcher?

 function parseJwt (token) {
            var base64Url = token.split('.')[1];
            var base64 = base64Url.replace('-', '+').replace('_', '/');
            return JSON.parse(window.atob(base64));
        };
 

Comme mentionné dans les commentaires de Racing Tadpole, remplacer javascript remplace uniquement la première occurrence, utilisez plutôt l'expression régulière:

 var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
 

Answer 2

Fonction simple avec try - catch

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

Merci!

Answer 3

Vous pouvez utiliser jwt-decode pour é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']}*/
 

Answer 4

@Peheje va fonctionner, mais vous avez un problème avec les caractères unicode. Pour corriger cela 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>

Answer 5

Les deux Gars et Peheje déjà répondu à la question. Pour un débutant comme moi, il a été utile d'avoir aussi l'importation de la ligne définie dans l'exemple.

Aussi il m'a fallu quelques minutes pour comprendre que le jeton est l'ensemble des informations d'identification qui sont affichées à l'arrière (l'ensemble de JWT jeton, et pas seulement les idToken partie). Simple une fois que vous savez..

import jwt_decode from 'jwt-decode';

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

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