Все дело в форматах и ​​кодировках.

На https://jwt.io вы получаете этот токен на основе ваших входных значений и секрета:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M

Мы хотим доказать, что подпись:

3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M

верно.

Подпись - это хэш HMAC-SHA256, закодированный в Base64url. (как описано в RFC7515)

Когда вы используете онлайн генератор HMAC для вычисления хэша для

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ

с секретом

hONPMX3tHWIp9jwLDtoCUwFAtH0RwSK6

ты получаешь

de921a2a4b225fd66ff0983e8566eb0f6e1584bdfa84120568da40e1f571dbd3

как результат, который является значением HMAC-SHA256, но не в кодировке Base64url. Этот хеш представляет собой шестнадцатеричное строковое представление большого числа.

Чтобы сравнить его со значением из https://jwt.io, вам нужно преобразовать значение из его шестнадцатеричного строкового представления обратно в число и Base64url закодировать его.

Следующий скрипт делает это, а также использует crypto-js для вычисления собственного хэша. Это также может быть способом проверки без библиотек JWT.

var CryptoJS = require("crypto-js");

// the input values
var base64Header = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9";
var base64Payload = "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ";
var secret = "hONPMX3tHWIp9jwLDtoCUwFAtH0RwSK6";

// two hashes from different online tools
var signatureJWTIO = "3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M";
var onlineCaluclatedHS256 =  "de921a2a4b225fd66ff0983e8566eb0f6e1584bdfa84120568da40e1f571dbd3";

// hash calculation with Crypto-JS. 
// The two replace expressions convert Base64 to Base64url format by replacing 
// '+' with '-', '/' with '_' and stripping the '=' padding
var base64Signature = CryptoJS.HmacSHA256(base64Header + "." + base64Payload , secret).toString(CryptoJS.enc.Base64).replace(/\+/g,'-').replace(///g,'_').replace(/\=+$/m,'');

// converting the online calculated value to Base64 representation
var base64hash = new Buffer.from(onlineCaluclatedHS256, 'hex').toString('base64').replace(///g,'_').replace(/\+/g,'-').replace(/\=+$/m,'')


// the results:
console.info("Signature from JWT.IO             : " + signatureJWTIO);
console.info("NodeJS calculated hash            : " + base64Signature);
console.info("online calulated hash (converted) : " + base64hash);

Результаты следующие:

Signature from JWT.IO             : 3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M

NodeJS calculated hash            : 3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M

online calulated hash (converted) : 3pIaKksiX9Zv8Jg-hWbrD24VhL36hBIFaNpA4fVx29M

идентичный!

Заключение:

Значения, рассчитанные различными онлайн-инструментами, верны, но не могут быть напрямую сопоставлены из-за разных форматов и кодировок. Небольшой сценарий, показанный выше, может быть лучшим решением.

У меня была такая же проблема, пока я не понял, что использую простую кодировку base64 вместо base64url. Между ними есть еще несколько мелких деталей. Вот пошаговое руководство, которое, надеюсь, сделает весь процесс более понятным.

Заметки

Примечание 1: Вы должны удалить все пробелы и символы новой строки из ваших строк JSON (заголовок и полезные данные). Это неявно выполняется на jwt.io, когда вы генерируете токен JWT.

Заметка 2: Для преобразования строки JSON в строку base64url на сайте cryptii.com создайте следующую конфигурацию:

First view: Text

Second view: Encode
    Encoding: Base64
    Variant: Standard 'base64url' (RFC 4648 §5)

Third view: Text

Заметка 3: Чтобы преобразовать HEX-код (подпись) HMAC в строку base64url на сайте cryptii.com, создайте следующую конфигурацию:

First view: Bytes
    Format: Hexadecimal
    Group by: None

Second view: Encode
    Encoding: Base64
    Variant: Standard 'base64url' (RFC 4648 §5)

Third view: Text

Руководство по эксплуатации

Вам понадобятся всего два онлайн-инструмента:

1. [Инструмент 1]:cryptii.com - для кодировки base64url,
2. [Инструмент 2]:codebeautify.org - для расчета HMAC.

На cryptii.com вы можете выполнять как кодирование / декодирование base64url, так и вычисление HMAC, но для HMAC вам необходимо предоставить ключ HEX, который отличается от ввода jwt.io, поэтому я использовал отдельный сервис для расчета HMAC.

Входные данные

В этом руководстве я использовал следующие данные:

• Заголовок:

  {"alg":"HS256","typ":"JWT"}
  

• Полезная нагрузка:

  {"sub":"1234567890","name":"John Doe","iat":1516239022}
  

• Секретный ключ):

  The Earth is flat!
  

Секрет не в кодировке base64.

Шаг 1. Преобразование заголовка [Инструмент 1]

• Заголовок (простой текст):

  {"alg":"HS256","typ":"JWT"}
  

• Заголовок (в кодировке base64url):

  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
  

Шаг 2. Преобразование полезной нагрузки [Инструмент 1]

• Полезная нагрузка (простой текст):

  {"sub":"1234567890","name":"John Doe","iat":1516239022}
  

• Полезная нагрузка (в кодировке base64url):

  eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
  

Шаг 3. Рассчитайте код HMAC (подпись) [Инструмент 2]

Рассчитайте HMAC с использованием алгоритма SHA256.

• Входная строка (заголовок и полезная нагрузка в кодировке base64url, соединенные точкой):

  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
  

• Расчетный код (шестнадцатеричное число):

  c8a9ae59f3d64564364a864d22490cc666c74c66a3822be04a9a9287a707b352
  

Вычисленный код HMAC - это шестнадцатеричное представление подписи. Примечание: его следует кодировать в base64url не как обычную текстовую строку, а как последовательность байтов.

Шаг 4. Закодируйте вычисленный код HMAC в base64url [Инструмент 1]:

• Подпись (байты):

  c8a9ae59f3d64564364a864d22490cc666c74c66a3822be04a9a9287a707b352
  

• Подпись (в кодировке base64url):

  yKmuWfPWRWQ2SoZNIkkMxmbHTGajgivgSpqSh6cHs1I
  

Резюме

Вот наши результаты (все в кодировке base64url):

• Заголовок:

  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
  

• Полезная нагрузка:

  eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
  

• Подпись:

  yKmuWfPWRWQ2SoZNIkkMxmbHTGajgivgSpqSh6cHs1I
  

Результаты jwt.io:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.yKmuWfPWRWQ2SoZNIkkMxmbHTGajgivgSpqSh6cHs1I

Как видите, все три части идентичны.