web-dev-qa-db-de.com

Wie man jwt token in Javascript dekodiert

Wie kann ich die Nutzdaten von JWT mithilfe von JavaScript entschlüsseln? Ohne eine Bibliothek. Das Token gibt also nur ein Nutzobjekt zurück, das von meiner Front-End-App verwendet werden kann.

Beispiel-Token: xxxxxxxxx.XXXXXXXX.xxxxxxxx

Und das Ergebnis ist die Nutzlast:

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

Ob das funktioniert?

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

Wie in den Kommentaren von Racing Tadpole erwähnt, ersetzt Javascript nur das erste Vorkommen. Verwenden Sie stattdessen einen regulären Ausdruck:

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

Sie können jwt-decode verwenden, dann könnten Sie schreiben:

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']}*/
33
Guy

Einfache Funktion mit Try-Catch

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

Vielen Dank!

15
Rajan Maharjan

@Peheje wird funktionieren, aber Sie werden Probleme mit Unicode haben. Um das Problem zu beheben, verwende ich den Code unter 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>

6
Rafael Quintela

Ich benutze diese Funktion, um Payload, Header, Exp (Ablaufzeit), IAT (Issued At) basierend auf this answer abzurufen

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)
}
4
Softmixt

Ich habe diesen Code bei jwt.io gefunden und funktioniert gut. 

//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;
  }
}

In einigen Fällen (bestimmte Entwicklungsplattformen)
die beste Antwort (vorerst) hat ein Problem mit ungültiger Länge von base64.
Ich brauchte also einen stabileren Weg.

Ich hoffe es würde dir helfen.

2
Nao Ito

Sowohl Guy als auch Peheje haben die Frage bereits beantwortet. Für einen Anfänger wie mich war es hilfreich, auch die Importlinie im Beispiel definieren zu lassen.

Es dauerte einige Minuten, bis ich herausfand, dass das Token die gesamten Anmeldeinformationen ist, die zurückgeschickt werden (das gesamte JWT-Token, nicht nur der idToken-Teil). Einfach, wenn Sie es wissen ..

import jwt_decode from 'jwt-decode';

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

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

2
Campo Blanco

Da das "window" -Objekt in der nodejs-Umgebung nicht vorhanden ist, könnten __. 

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

Es funktioniert perfekt für mich. Ich hoffe es hilft.

1
Avik

Basierend auf Antworten hier und hier :

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);
};
0
webjay

Einfache NodeJS-Lösung zum Dekodieren eines JSON-Web-Tokens (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}`)
0
Derek Soike

alle Funktionen von jwt.io unterstützen nicht alle Sprachen. In NodeJs können Sie verwenden 

var decoded = jwt.decode(token);
0
Jithin Vijayan