একটি লাইব্রেরি ব্যবহার না করে জাভাস্ক্রিপ্টে jwt টোকেন কীভাবে ডিকোড করবেন?


208

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে জেডাব্লুটিটির পেডলোড ডিকোড করতে পারি? লাইব্রেরি ছাড়া। সুতরাং টোকেনটি কেবলমাত্র একটি পে-লোড অবজেক্ট ফিরিয়ে দেয় যা আমার ফ্রন্ট-এন্ড অ্যাপ্লিকেশনটি গ্রাস করতে পারে।

টোকেন উদাহরণ: xxxxxxxxx.XXXXXXXX.xxxxxxxx

এবং ফলাফলটি হ'ল পেਲੋਡ:

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

1
এটি কীভাবে এনকোড করা হয়েছিল? শুধু বিপরীত কাজ। আপনার ভাগ করা গোপনীয়তার প্রয়োজন হবে।
ভাগ্যবান সনি

এটি পিএইচপি লাইব্রেরি ব্যবহৃত ব্যাকেন্ড এপি দ্বারা এনকোড করা হয়েছিল। এখানে আমার দরকার এমন
পেডলোড যা

1
আপনি jwt.io ওয়েবসাইটে গিয়ে জাভাস্ক্রিপ্ট লাইব্রেরি সরবরাহ করে এটির চেষ্টা করতে পারেন ।
কোয়ান্টিন

12
যেহেতু এই প্রশ্নের কিছু ট্র্যাফিক রয়েছে, তাই আমি একটি দাবি অস্বীকার করতে চাই: আপনি যদি স্বাক্ষরকে বৈধতা না দিয়ে টোকেনের পেডলোডকে অন্ধভাবে ডিকোড করেন, তবে আপনি সুরক্ষার সমস্যাগুলিতে (বা নাও) চালাতে পারেন! এই স্ট্যাকওভারফ্লো প্রশ্নটিতে প্রদত্ত যে কোনও কোড অন্ধভাবে ব্যবহার করার আগে আপনি নিজের সুরক্ষা আর্কিটেকচারটি বুঝতে পেরেছেন তা নিশ্চিত করুন।
কার্স্টেন হফম্যান

4
@ কার্সটেনহফম্যান এবং আমি কীভাবে স্বাক্ষরটি বৈধ করব ??
সৌরভ তিওয়ারি

উত্তর:


468

ইউনিকোড পাঠ্য 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);
};

2
দুর্ভাগ্যক্রমে এটি ইউনিকোড পাঠ্যের সাথে কাজ করে বলে মনে হচ্ছে না।
পল ম্যাকমাহন

2
এই সমাধানটি এমনকি পোস্টম্যানেও ব্যবহার করা যেতে পারে (টেস্টগুলির ট্যাপ) কারণ এটির জন্য কোনও অতিরিক্ত লাইব্রেরি ইনস্টলেশন প্রয়োজন হয় না। আমি এটিকে লেখক-টোকেন থেকে ইউজারিড নিষ্কাশন করতে ব্যবহার করেছি।
খুশি

2
দ্রষ্টব্য: পোস্টম্যানে আমাকে JSON.parse(window.atob(base64))এটি কাজ করতে "উইন্ডো" সরিয়ে ফেলতে হয়েছিল । ঠিক return JSON.parse(atob(base64));তখনই postman.setEnvironmentVariable("userId", parseJwt(jsonData.access_token)); "অ্যাক্সেস_ টোকেন" আমার ক্ষেত্রে প্রতিক্রিয়াতে টোকেনের মানটির কী (আপনার ক্ষেত্রে পৃথক হতে পারে)।
খুশী

12
উপরের সমাধানটি টোকেনের প্রথম "-" এবং "_" কে প্রতিস্থাপন করে (একটি জাভাস্ক্রিপ্ট "বৈশিষ্ট্য" যা আমাকে ব্যথিত করে তোলে) উত্তরের সাথে কেবল তৃতীয় লাইনটি প্রতিস্থাপন করুন:var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
রেডিং ট্যাডপোল

2
এটি jwt-decodeমডিউলটি ব্যবহার করা ভাল কারণ এটি ছোট তবে কিছুটা আরও ভাল পরিচালনা করা।
রণটিভ

64

চেষ্টা - ধরা সঙ্গে সহজ ফাংশন

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

ধন্যবাদ!


সুন্দর, সংক্ষিপ্ত এবং সমস্ত দেশীয় পদ্ধতি ব্যবহার করে!
ক্রিস লাভ


47

আপনি 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']}*/

66
"মানে কোন লাইব্রেরি নেই।"
শেরলক্সটিভি

তারা এই লাইব্রেরিতে সমস্যা। মূলত ফায়ারফক্স ব্যবহারে। আমার যে সমস্যাটি দেখা গিয়েছিল তা হ'ল লগ আউট বা মেয়াদ শেষ হওয়ার কারণে যদি কোনও টোকেন == নাল থাকে; এটি কেবল একটি ত্রুটি সহ পৃষ্ঠাটিকে হত্যা করে।
LUser

1
@ অ্যাপারচারসিকিউরিটি আপনার এই ত্রুটিটি ধরা দরকার তবে স্বীকার করেছেন যে এই কারণেই আমি এই লাইব্রেরিটি ব্যবহার করতে চাই না
লূক রবার্টসন

এটি GZIP সমর্থন করে বলে মনে হচ্ছে না। প্রকৃতপক্ষে, আমি এমন কোনও জেএস লাইব্রেরি খুঁজে পাই না যা দাবিগুলির জন্য জিজেআইপি সমর্থন করে।
অ্যান্ড্রু টি ফিনেল

18

টোকেনটিকে atob()স্ট্রিংয়ে ডিকোড করতে আপনি খাঁটি জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করতে পারেন :

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

বা এটি সরাসরি একটি জসন বস্তুর মধ্যে পার্স করুন:

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

জাভাস্ক্রিপ্ট ফাংশনগুলি সম্পর্কে বিল্ট-ইন পড়ুন atob()এবং বেস 64 এনকোডিং এবং ডিকোডিং - ওয়েব এপিআই | MDNbtoa()


9

@ পেহেজে কাজ করবে তবে ইউনিকোড নিয়ে আপনার সমস্যা হবে। এটি ঠিক করতে আমি 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>


+1 তবে পেহেজের উত্তরের বিষয়ে রেসিং ট্যাডপোলের মন্তব্যটি যদি সঠিক হয় (যে প্রতিস্থাপন কলগুলি কেবল প্রথম উদাহরণটিকে প্রতিস্থাপন করবে), তবে এখানে একই ফিক্স প্রয়োগ করা হবে।
গ্যারি ম্যাকগিল

9

নোডেজ পরিবেশে "উইন্ডো" অবজেক্টটি উপস্থিত না থাকায় আমরা নিম্নলিখিত কোডের লাইনগুলি ব্যবহার করতে পারি:

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

এটা আমার জন্য নিখুঁতভাবে কাজ করছে। আশা করি এটা সাহায্য করবে.


1
নোড
জেসের

7
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

6

এই উত্তরটির উপর ভিত্তি করে আমি পেইলড, শিরোনাম, এক্সপ্রেস (মেয়াদোত্তীকরণের সময়), আইএটি (ইস্যু করা হয়েছে) পেতে এই ফাংশনটি ব্যবহার করি

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)। দ্বিতীয়ত, রিপ্লেসগুলি সঠিকভাবে কাজ করবে না, কারণ তারা রেজেক্সে "জি" পতাকাটি মিস করে (কেবলমাত্র রেডিং ট্যাডপোল অন্য পোস্টে মন্তব্য করার মতো জেডাব্লুটিটিতে - এবং _ এর প্রথম উপস্থিতি প্রতিস্থাপন করবে)। এবং অর্ধেক: অ্যারে আইটেমগুলি 0 এবং 1 ডিকোড করতে আপনি পুরো কোডটি নকল করার পরিবর্তে একটি ফর লুপ ব্যবহার করতে পারতেন (এটি একটি সংক্ষিপ্ত কোড, তবে আরও কার্যকর করা যেতে পারে যেমনভাবে, এসপিএলআইটি দু'বার কার্যকর করা হয় )।
সাইবারকনাইট

4

jwt.io এর সমস্ত বৈশিষ্ট্য সমস্ত ভাষাকে সমর্থন করে না। নোডজেগুলিতে আপনি ব্যবহার করতে পারেন

var decoded = jwt.decode(token);

1
লাইব্রেরি ব্যতীত আপনি টোকেনের দ্বিতীয় অংশে মাত্র 6464 ডিকোডিং করছেন pay } তারপরে বেস 64 ডিকোডিং সম্পাদন করুন {var ডিকোডডডাটা = atob (পেলোড); }
জিতিন বিজয়ন

4

আমি 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;
  }
}

কিছু ক্ষেত্রে (নির্দিষ্ট বিকাশ প্ল্যাটফর্ম),
সেরা উত্তর (এখন জন্য) অবৈধ বেস 64 দৈর্ঘ্যের সমস্যার সম্মুখীন হয়।
সুতরাং, আমার আরও স্থিতিশীল উপায় দরকার ছিল।

আমি আশা করি এটি আপনাকে সাহায্য করবে।


2

গাই এবং পেহেজে উভয়ই ইতিমধ্যে প্রশ্নের উত্তর দিয়েছিলেন। আমার মতো সামগ্রিক প্রাথমিকের জন্য উদাহরণটিতে আমদানি লাইনটি সংজ্ঞায়িত করাও সহায়ক।

এছাড়াও টোকেনটি শংসাপত্রগুলির সম্পূর্ণ সেট যা আবার পোস্ট হয় (পুরো জেডাব্লুটি টোকেন, এটির কেবল আইডটোকেন অংশ নয়) তা বুঝতে আমার কয়েক মিনিট সময় লেগেছে। সোজা হয়ে একবার আপনি এটি জানতে পারবেন ..

import jwt_decode from 'jwt-decode';

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

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


2
অপর ব্যবহারকারী হিসাবে ঠিক একই উত্তর পোস্ট করা যা ওপি যা চেয়েছিল তার বিপরীতে চলে যা খুব বেশি সহায়ক নয়
কাকুন

2

একটি 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}`)

2

গিটহাব থেকে ভিত্তিক উত্তর - auth0 / jwt-decode । স্ট্রিং বিভক্তকরণ এবং রিটার্ন অবজেক্ট {শিরোনাম, পেডলোড, স্বাক্ষর include অন্তর্ভুক্ত করতে ইনপুট / আউটপুটকে পরিবর্তিত করেছে যাতে আপনি কেবল পুরো টোকেনটি পাস করতে পারেন।

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

    };

1

এই প্রশ্নটি অধ্যয়ন করার পরে আমি এখানে আরও একটি বৈশিষ্ট্য সমৃদ্ধ সমাধান তৈরি করেছি:

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.',
        };
    }
};

এখানে কিছু ব্যবহারের নমুনা রয়েছে:

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
}

স্ট্যাকওভারফ্লো কোড স্নিপেট সরঞ্জামে আমি সেই রানযোগ্য করতে সক্ষম হইনি, তবে আপনি যদি সেই কোডটি চালিয়ে যান তবে আপনি প্রায় কী দেখতে পাবেন তা এখানে:

এখানে চিত্র বর্ণনা লিখুন

আমি parseJwtফাংশনটি সর্বদা একটি বস্তুকে (স্থায়ী-টাইপিংয়ের কারণে কিছুটা ডিগ্রীতে) ফিরিয়ে দিয়েছি ।

এটি আপনাকে সিনট্যাক্স যেমন:

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

তারপরে আপনি নির্দিষ্ট ধরণের ত্রুটির জন্য রান-টাইমে পরীক্ষা করতে পারেন এবং নামকরণের কোনও সংঘাত এড়াতে পারেন।

যদি কেউ এই কোডটিতে কোনও নিম্ন প্রচেষ্টা, উচ্চ মানের পরিবর্তনের কথা ভাবতে পারে তবে এর উত্তরটির জন্য আমার উত্তরটি সম্পাদনা করতে নির্দ্বিধায় অনুভব করুন next(person)


0

এখানে এবং এখানে উত্তরের ভিত্তিতে :

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

-1

জাভাস্ক্রিপ্ট নোড.জেএস এক্সপ্রেস চালানো আমাকে প্রথমে নীচে প্যাকেজটি ইনস্টল করতে হয়েছিল:

npm install jwt-decode --save

তারপরে আমার অ্যাপ্লিকেশন.জেএস কোডে প্যাকেজটি পান:

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

তারপরে কোডটি চালান:

let jwt_decoded = jwt_decode(jwt_source);

তারপরে যাদু:

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

4
"লাইব্রেরি ব্যবহার না করে" মনে রাখবেন
ওলাফ

1
যথেষ্ট ঠিক পরিষ্কার. যাইহোক, আমি একই সমস্যার মুখোমুখি হয়েছিলাম এবং আমার কাছে একটি লাইব্রেরি ব্যবহার না করার সীমাবদ্ধতা ছিল না। এটি আমার পক্ষে কাজ করেছে। আমি এটিকে পোস্ট করতে থাকি কারণ সম্ভবত অন্য কেউ একই ধরণের সমস্যার মুখোমুখি হচ্ছে এবং তার মতো বাধা নেই।
ডেভিড হোয়াইট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.