Как расшифровать токенов JWT в JavaScript

Как я могу декодировать полезную нагрузку JWT с помощью JavaScript? Без библиотеки. Таким образом, маркер просто возвращает объект полезной нагрузки, который может использоваться моим интерфейсным приложением.

пример маркера: xxxxxxxxx.XXXXXXXX.xxxxxxxx

и результатом является полезная нагрузка:

{exp: 10012016 name: john doe, scope:['admin']}
8 80
javascript jwt

8 ответов:

будет ли это работать?

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

Как уже упоминалось в комментариях Racing Tadpole javascript replace заменяет только первое вхождение, вместо этого используйте регулярное выражение:

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

можно использовать jwt-decode, тогда вы могли бы написать:

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

простая функция с try-catch

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

спасибо!

7

@Peheje будет работать, но у вас будут проблемы с unicode. Чтобы исправить это я использую код на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>
5

Я нашел этот код в jwt.io и это работает хорошо. 

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

в некоторых случаях(определенные платформы развития),
лучший ответ(на данный момент) сталкивается с проблемой недопустимой длины base64.
Поэтому мне нужен был более стабильный способ.

Я надеюсь, что это поможет вам.

2

Я использую эту функцию, чтобы получить полезную нагрузку, заголовок, exp (время истечения), iat (выданный At) на основе этой ответ

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

и Гай, и Пехедже уже ответили на вопрос. Для полного новичка, такого как я, было полезно также иметь строку импорта, определенную в Примере.

также мне потребовалось несколько минут, чтобы понять, что токен-это полный набор учетных данных, которые отправляются обратно (весь токен JWT, а не только его часть idToken). Просто, как только вы это знаете..

import jwt_decode from 'jwt-decode';

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

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

все особенности jwt.io не поддерживает все языки. В NodeJs вы можете использовать 

var decoded = jwt.decode(token);
1