online - ¿Cómo decodificar el token jwt en javascript sin usar una biblioteca?

jwt-decode angular

Question

¿Cómo puedo decodificar la carga útil de JWT usando JavaScript? Sin una biblioteca Entonces, el token solo devuelve un objeto de carga útil que puede consumir mi aplicación front-end.

Token de ejemplo: xxxxxxxxx.XXXXXXXX.xxxxxxxx

Y el resultado es la carga útil:

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

Answer 1

@Peheje funcionará, pero tendrá problemas con Unicode. Para solucionarlo, uso el código en https://.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 2

Basado en respuestas aquí y here :

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

Answer 3

Como el objeto "ventana" no está presente en el entorno de nodejs, podríamos usar las siguientes líneas de código:

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

Me está funcionando perfectamente. Espero eso ayude.

Answer 4

Encontré este código en jwt.io y funciona 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;
  }
}

En algunos casos (ciertas plataformas de desarrollo),
la mejor respuesta (por ahora) enfrenta un problema de longitud base64 no válida.
Entonces, necesitaba una forma más estable.

Espero que te ayude.

Answer 5

Función de analizador JWT de texto unicode de trabajo:

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

Answer 6

Función simple con try - catch

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

¡Gracias!

Answer 7

Puede usar jwt-decode , para poder escribir:

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 8

Tanto Guy como Peheje ya respondieron la pregunta. Para un principiante como yo, también fue útil tener la línea de importación definida en el ejemplo.

También me llevó algunos minutos darme cuenta de que el token es el conjunto completo de credenciales que se publican de nuevo (todo el token JWT, no solo la parte idToken). Directo una vez que lo sabes ...

import jwt_decode from ''jwt-decode'';

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

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

Answer 9

Todas las características de jwt.io no son compatibles con todos los idiomas. En NodeJs puedes usar

var decoded = jwt.decode(token);

Answer 10

Utilizo esta función para obtener carga útil, encabezado, exp (tiempo de caducidad), iat (emitido en) en función de share respuesta

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

Answer 11

Solución NodeJS simple para decodificar un token 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}`)