[javascript] 라이브러리를 사용하지 않고 자바 스크립트에서 JWT 토큰을 디코딩하는 방법은 무엇입니까?

JavaScript를 사용하여 JWT의 페이로드를 어떻게 디코딩 할 수 있습니까? 도서관없이 따라서 토큰은 내 프론트 엔드 앱에서 사용할 수있는 페이로드 객체를 반환합니다.

토큰 예 : xxxxxxxxx.XXXXXXXX.xxxxxxxx

그리고 결과는 페이로드입니다.

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

답변

유니 코드 텍스트 작업 JWT 파서 기능 :

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

답변

try-catch를 사용한 간단한 기능

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

감사!

답변

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

답변

순수 자바 스크립트 atob()함수를 사용 하여 토큰을 문자열로 디코딩 할 수 있습니다 .

atob(token.split('.')[1]);

또는 json 객체로 직접 구문 분석하십시오.

JSON.parse(atob(token.split('.')[1]));

Javascript 함수에 대한 읽기 atob()및 btoa()기본 제공 Base64 인코딩 및 디코딩-웹 API | MDN .

답변

@Peheje는 작동하지만 유니 코드에 문제가 있습니다. 그것을 고치기 위해 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>

스 니펫 확장

답변

nodejs 환경에는 “window”객체가 없으므로 다음 코드 줄을 사용할 수 있습니다.

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

완벽하게 작동합니다. 도움이 되길 바랍니다.

답변

function parseJwt(token) {
  var base64Payload = token.split('.')[1];
  var payload = Buffer.from(base64Payload, 'base64');
  return JSON.parse(payload);
}

let payload= parseJwt("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c");
console.log("payload:- ", payload);

노드를 사용하는 경우 버퍼 패키지를 사용해야 할 수도 있습니다.

npm install buffer
var Buffer = require('buffer/').Buffer