如何在不使用库的情况下在javascript中解码jwt令牌？


How to decode jwt token in javascript without using a library?

如何使用JavaScript解码JWT的有效负载？ 没有图书馆。 因此，令牌仅返回可由我的前端应用程序使用的有效负载对象。

令牌示例：xxxxxxxxx.XXXXXXXX.xxxxxxxx

结果是有效负载：

1
{exp: 10012016 name: john doe, scope:['admin']}
相关讨论

起作用的Unicode文本JWT解析器功能：

1
2
3
4
5
6
7
8
9
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);
};
相关讨论

您可以使用jwt-decode，因此可以编写：

1
2
3
4
5
6
7
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']}*/
相关讨论

使用try-catch的简单功能

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

谢谢！

相关讨论

@Peheje可以工作，但是您会遇到unicode问题。
要修复它，我使用https://stackoverflow.com/a/30106551/5277071上的代码；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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();
})
1
textarea{width:300px; height:60px; display:block}
1
2
3
4
5
<form id="form" action="parse">
  <textarea name="jwt">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkrDtGhuIETDs8OoIiwiYWRtaW4iOnRydWV9.469tBeJmYLERjlKi9u6gylb-2NsjHLC_6kZNdtoOGsA</textarea>
  <textarea name="out"></textarea>
  <input type="submit" value="parse" />
</form>

由于Node.js环境中不存在"窗口"对象，
我们可以使用以下代码行：

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

它为我完美地工作。希望能帮助到你。

我根据此答案使用此函数来获取有效载荷，标头，exp(到期时间)，iat(发行日期)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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)
}

我在jwt.io上找到了此代码，并且运行良好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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长度无效的问题。
因此，我需要一种更稳定的方法。

希望对您有帮助。

用于解码JSON Web令牌(JWT)的简单NodeJS解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
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}`)

Guy和Peheje都已经回答了这个问题。对于像我这样的新手来说，在示例中定义导入行也很有帮助。

另外，我花了几分钟的时间才弄清楚令牌是要回发的完整凭据的集合(整个JWT令牌，而不仅仅是IDToken的一部分)。一旦知道就直接

1
2
3
4
5
6
import jwt_decode from 'jwt-decode';

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

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

相关讨论

来自GitHub的答案-auth0 / jwt-decode。更改了输入/输出，以包括字符串拆分和返回对象{标头，有效负载，签名}，因此您只需传递整个令牌即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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])
        };

    };

运行Javascript node.js express，我必须首先按照以下步骤安装软件包：

1
npm install jwt-decode --save

然后在我的app.js代码中获取软件包：

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

然后运行代码：

1
let jwt_decoded = jwt_decode(jwt_source);

然后魔术：

1
console.log('sub:',jwt_decoded.sub);
相关讨论

jwt.io的所有功能并不支持所有语言。在NodeJs中，您可以使用

1
var decoded = jwt.decode(token);
相关讨论

根据此处和此处的答案：

1
2
3
4
5
6
7
8
9
10
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);
};