web-dev-qa-db-ja.com

Javascriptでjwtトークンをデコードする方法

JavaScriptを使用してJWTのペイロードをデコードする方法を教えてください。図書館なし。そのため、トークンは単に私のフロントエンドアプリケーションが消費できるペイロードオブジェクトを返すだけです。

トークンの例：xxxxxxxxx.XXXXXXXX.xxxxxxxx

そして結果はペイロードです。

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

作業用UnicodeテキストJWTパーサー機能：

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

    return JSON.parse(base64);
};
284
Peheje

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

Try - catchを使った簡単な関数

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

ありがとうございます。

21
Rajan Maharjan

@Phejeは動作しますが、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>
7
Rafael Quintela

ペイロード、ヘッダ、exp（有効期限）、iat（Issued At）を this answerに基づいて取得するためにこの関数を使用します。

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

私は 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
Nao Ito

"window"オブジェクトはnodejs環境には存在しないので、以下のコード行を使用することができます。

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

それは私にとって完璧に機能しています。それが役に立てば幸い。

2
Avik

GuyもPehejeもすでに質問に答えています。私のような全くの初心者にとっては、この例で定義されているimport行も持っていることは役に立ちました。

また、トークンがポストバックされる資格情報の完全なセットであることを把握するのに数分かかりました（JTTトークン全体、そのidToken部分だけではありません）。あなたがそれを知ってしまえば簡単です..

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

こちらの回答および こちら ：に基づく

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

JSON Webトークン（JWT）をデコードするための簡単なNodeJSソリューション 

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

jwt.ioのすべての機能がすべての言語をサポートしているわけではありません。 NodeJsではあなたが使うことができます

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