Làm cách nào để giải mã mã thông báo jwt trong javascript mà không cần sử dụng thư viện?

Làm cách nào để giải mã tải trọng của JWT bằng JavaScript? Không có thư viện. Vì vậy, mã thông báo chỉ trả về một đối tượng tải trọng có thể được sử dụng bởi ứng dụng giao diện người dùng của tôi.

Mã thông báo ví dụ: xxxxxxxxx.XXXXXXXX.xxxxxxxx

Và kết quả là tải trọng:

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

Hoạt động chức năng trình phân tích cú pháp văn bản 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);
};

Chức năng đơn giản với thử - bắt

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

Cảm ơn!

Bạn có thể sử dụng jwt-decode , sau đó bạn có thể viết:

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

bạn có thể sử dụng atob()chức năng javascript thuần túy để giải mã mã thông báo thành một chuỗi:

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

hoặc phân tích trực tiếp nó thành một đối tượng json:

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

đọc atob()và tích btoa()hợp các chức năng javascript Mã hóa và giải mã Base64 - API Web | MDN .

@Peheje sẽ hoạt động, nhưng bạn sẽ gặp vấn đề với unicode. Để sửa lỗi, tôi sử dụng mã trên 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>

Vì đối tượng "window" không có trong môi trường nodejs, chúng ta có thể sử dụng các dòng mã sau:

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

Nó làm việc cho tôi hoàn hảo. Hy vọng nó giúp.

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

Nếu sử dụng nút, bạn có thể phải sử dụng gói bộ đệm:

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

Tôi sử dụng chức năng này để nhận tải trọng, tiêu đề, exp (Thời gian hết hạn), iat (Đã phát hành) dựa trên câu trả lời này

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

tất cả các tính năng của jwt.io không hỗ trợ tất cả các ngôn ngữ. Trong NodeJs bạn có thể sử dụng

var decoded = jwt.decode(token);

Tôi tìm thấy mã này tại jwt.io và nó hoạt động tốt.

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

Trong một số trường hợp (nền tảng phát triển nhất định),
câu trả lời tốt nhất (hiện tại) phải đối mặt với vấn đề về độ dài cơ sở64 không hợp lệ.
Vì vậy, tôi cần một cách ổn định hơn.

Tôi hy vọng nó sẽ giúp bạn.

Cả Guy và Peheje đều đã trả lời câu hỏi. Đối với một người mới bắt đầu như tôi, thật hữu ích khi có dòng nhập được xác định trong ví dụ.

Ngoài ra, tôi đã mất vài phút để nhận ra rằng mã thông báo là tập hợp đầy đủ các thông tin đăng nhập được gửi lại (toàn bộ mã thông báo JWT, không chỉ là phần idToken của nó). Nói thẳng một khi bạn biết điều đó ..

import jwt_decode from 'jwt-decode';

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

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

Giải pháp NodeJS đơn giản để giải mã mã thông báo 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}`)

Trả lời dựa trên GitHub - auth0 / jwt-decode . Đã thay đổi đầu vào / đầu ra để bao gồm tách chuỗi và trả về đối tượng {tiêu đề, tải trọng, chữ ký} để bạn có thể chuyển toàn bộ mã thông báo.

var jwtDecode = function (jwt) {

        function b64DecodeUnicode(str) {
            return decodeURIComponent(atob(str).replace(/(.)/g, function (m, p) {
                var code = p.charCodeAt(0).toString(16).toUpperCase();
                if (code.length < 2) {
                    code = '0' + code;
                }
                return '%' + code;
            }));
        }

        function 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!";
            }

            try {
                return b64DecodeUnicode(output);
            } catch (err) {
                return atob(output);
            }
        }

        var jwtArray = jwt.split('.');

        return {
            header: decode(jwtArray[0]),
            payload: decode(jwtArray[1]),
            signature: decode(jwtArray[2])
        };

    };

Đây là một giải pháp giàu tính năng hơn mà tôi vừa thực hiện sau khi nghiên cứu câu hỏi này:

const parseJwt = (token) => {
    try {
        if (!token) {
            throw new Error('parseJwt# Token is required.');
        }

        const base64Payload = token.split('.')[1];
        let payload = new Uint8Array();

        try {
            payload = Buffer.from(base64Payload, 'base64');
        } catch (err) {
            throw new Error(`parseJwt# Malformed token: ${err}`);
        }

        return {
            decodedToken: JSON.parse(payload),
        };
    } catch (err) {
        console.log(`Bonus logging: ${err}`);

        return {
            error: 'Unable to decode token.',
        };
    }
};

Dưới đây là một số mẫu sử dụng:

const unhappy_path1 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvtmalformedtoken');
console.log('unhappy_path1', unhappy_path1);

const unhappy_path2 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvt.malformedtoken');
console.log('unhappy_path2', unhappy_path2);

const unhappy_path3 = parseJwt();
console.log('unhappy_path3', unhappy_path3);

const { error, decodedToken } = parseJwt('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
if (!decodedToken.exp) {
    console.log('almost_happy_path: token has illegal claims (missing expires_at timestamp)', decodedToken);
    // note: exp, iat, iss, jti, nbf, prv, sub
}

Tôi không thể làm cho nó có thể chạy được trong công cụ đoạn mã StackOverflow, nhưng đây là khoảng những gì bạn sẽ thấy nếu bạn chạy mã đó:

Tôi đã làm cho parseJwthàm luôn trả về một đối tượng (ở một mức độ nào đó vì lý do gõ tĩnh).

Điều này cho phép bạn sử dụng cú pháp như:

const { decodedToken, error } = parseJwt(token);

Sau đó, bạn có thể kiểm tra tại thời điểm chạy cho các loại lỗi cụ thể và tránh mọi xung đột đặt tên.

Nếu bất cứ ai có thể nghĩ về bất kỳ nỗ lực thấp, giá trị cao nào thay đổi mã này, vui lòng chỉnh sửa câu trả lời của tôi vì lợi ích của next(person).

Dựa trên câu trả lời ở đây và đây :

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

Chạy Javascript node.js express trước tiên tôi phải cài đặt gói như sau:

npm install jwt-decode --save

sau đó trong mã app.js của tôi lấy gói:

const jwt_decode = require('jwt-decode');

Sau đó chạy mã:

let jwt_decoded = jwt_decode(jwt_source);

Rồi phép màu:

console.log('sub:',jwt_decoded.sub);