JavaScriptとcrypto-jsでJWTトークンをデコード：詳細解説

JavaScript でライブラリを使わずに JWT トークンをデコードする方法

通常、JWT トークンのデコードには、jsonwebtoken や jwt-decode のようなライブラリを使用します。しかし、ライブラリを使用せずにトークンをデコードすることも可能です。これは、ライブラリを使用できない、または使用したくない場合に役立ちます。

以下は、ライブラリを使用せずに JavaScript で JWT トークンをデコードする方法の例です。

function decodeJWT(token) {
  const parts = token.split('.');
  if (parts.length !== 3) {
    throw new Error('Invalid JWT token');
  }

  const header = JSON.parse(atob(parts[0]));
  const payload = JSON.parse(atob(parts[1]));

  // 署名検証（オプション）
  if (header.alg === 'HS256') {
    const secret = 'YOUR_SECRET_KEY'; // シークレットキーを挿入
    const hash = crypto.subtle.sign('SHA-256', new TextEncoder().encode(parts[0] + '.' + parts[1]), secret);
    if (hash !== parts[2]) {
      throw new Error('Invalid signature');
    }
  }

  return payload;
}

このコードは、次のことを行います。

1. トークンを . で分割し、ヘッダー、ペイロード、署名の 3 つの部分に分割します。
2. ヘッダーとペイロードを BASE64 デコードして JSON オブジェクトに変換します。
3. オプションで、署名を検証します。これは、トークンが改ざんされていないことを確認するために行われます。
4. ペイロードを返します。

例

const token = 'eyJhbGciOiAiSEI1NiJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWQiOiJiYzUzYjEwMi01YjUwLTQ2MzctODBjMi02YjY3ZTY1YjI2NDUiLCJpYXQiOjE2NTk1MzY5MzYsImV4cCI6MTU5OTYzNzUzNn0.eyJpZGVudGl0eSI6Ik15V2ViU2l0ZSIsImVtYWlsIjoibW90aGVyQGV4YW1wbGUubmV0In0.ZGVmY2JkMzQ2MzI2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q

サンプルコード：ライブラリを使わずにJWTトークンをデコードする方法

function decodeJWT(token) {
  const parts = token.split('.');
  if (parts.length !== 3) {
    throw new Error('Invalid JWT token');
  }

  const header = JSON.parse(atob(parts[0]));
  const payload = JSON.parse(atob(parts[1]));

  // 署名検証（オプション）
  if (header.alg === 'HS256') {
    const secret = 'YOUR_SECRET_KEY'; // シークレットキーを挿入
    const hash = crypto.subtle.sign('SHA-256', new TextEncoder().encode(parts[0] + '.' + parts[1]), secret);
    if (hash !== parts[2]) {
      throw new Error('Invalid signature');
    }
  }

  return payload;
}

// 例

const token = 'eyJhbGciOiAiSEI1NiJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWQiOiJiYzUzYjEwMi01YjUwLTQ2MzctODBjMi02YjY3ZTY1YjI2NDUiLCJpYXQiOjE2NTk1MzY5MzYsImV4cCI6MTU5OTYzNzUzNn0.eyJpZGVudGl0eSI6Ik15V2ViU2l0ZSIsImVtYWlsIjoibW90aGVyQGV4YW1wbGUubmV0In0.ZGVmY2JkMzQ2MzI2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVm

ライブラリを使わずにJWTトークンをデコードする別の方法

この方法の利点:

• コードが少し短くなる
• エラー処理が容易になる

• crypto-js ライブラリをインストールする必要がある

以下は、crypto-js を使用して JWT トークンをデコードする方法の例です。

const JWT = require('crypto-js/jwt');
const secret = 'YOUR_SECRET_KEY'; // シークレットキーを挿入

function decodeJWT(token) {
  try {
    const decoded = JWT.verify(token, secret);
    return decoded.payload;
  } catch (err) {
    return null;
  }
}

// 例

const token = 'eyJhbGciOiAiSEI1NiJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWQiOiJiYzUzYjEwMi01YjUwLTQ2MzctODBjMi02YjY3ZTY1YjI2NDUiLCJpYXQiOjE2NTk1MzY5MzYsImV4cCI6MTU5OTYzNzUzNn0.eyJpZGVudGl0eSI6Ik15V2ViU2l0ZSIsImVtYWlsIjoibW90aGVyQGV4YW1wbGUubmV0In0.ZGVmY2JkMzQ2MzI2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2Q2YjY1YjVmY2