JWT エンコーダー＆ジェネレーター

JWTエンコーダーとは？

// Sign a JWT in the browser with the Web Crypto API (HS256)
async function encodeJwt(payload, secret) {
  const b64url = (bytes) =>
    btoa(String.fromCharCode(...new Uint8Array(bytes)))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
  const enc = (obj) =>
    b64url(new TextEncoder().encode(JSON.stringify(obj)));

  const header = { alg: 'HS256', typ: 'JWT' };
  const signingInput = `${enc(header)}.${enc(payload)}`;

  const key = await crypto.subtle.importKey(
    'raw', new TextEncoder().encode(secret),
    { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
  const sig = await crypto.subtle.sign(
    'HMAC', key, new TextEncoder().encode(signingInput));

  return `${signingInput}.${b64url(sig)}`;
}

const token = await encodeJwt({ sub: 'user_123', exp: 1999999999 }, 'my-secret');
// → eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyXzEyMyIsImV4cCI6MTk5OTk5OTk5OX0....

主な機能

使用例

{
  "sub": "user_123",
  "name": "Alice",
  "role": "admin",
  "iat": 1715000000,
  "exp": 1999999999
}
secret: a-string-secret-at-least-256-bits-long

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyXzEyMyIsIm5hbWUiOiJBbGljZSIsInJvbGUiOiJhZG1pbiIsImlhdCI6MTcxNTAwMDAwMCwiZXhwIjoxOTk5OTk5OTk5fQ.<HMAC-SHA256 signature>

{
  "iss": "https://auth.example.com",
  "aud": "api.example.com",
  "sub": "90087165",
  "scope": "read:user write:post",
  "iat": 1715000000,
  "exp": 1999999999
}
private key: -----BEGIN PRIVATE KEY----- (PKCS8)

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2F1dGguZXhhbXBsZS5jb20iLCJhdWQiOiJhcGkuZXhhbXBsZS5jb20iLCJzdWIiOiI5MDA4NzE2NSIsInNjb3BlIjoicmVhZDp1c2VyIHdyaXRlOnBvc3QiLCJpYXQiOjE3MTUwMDAwMDAsImV4cCI6MTk5OTk5OTk5OX0.<RSA signature>

{
  "sub": "device-42",
  "iat": 1715000000,
  "exp": 1999999999
}
private key: -----BEGIN PRIVATE KEY----- (P-256)

eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkZXZpY2UtNDIiLCJpYXQiOjE3MTUwMDAwMDAsImV4cCI6MTk5OTk5OTk5OX0.<ECDSA P-256 signature>

使い方

1. 1

   ペイロードのクレームを編集

   トークンに必要なクレームをペイロードエディタにJSONとして記述します。クイッククレームチップを使えば、タイムスタンプを手入力せずにiss、sub、aud、iat、nbf、1時間後のexpを挿入できます。

2. 2

   アルゴリズムを選び鍵を入力

   署名アルゴリズムを選びます。HS256/384/512ではシークレットを入力し、RS、PS、ESアルゴリズムではPKCS8 PEMの秘密鍵を貼り付けます。トークンは入力するそばからローカルで署名されます。

3. 3

   署名済みJWTをコピー

   署名済みトークンがセグメントごとに色分けされて即座に表示されます。コピーをクリックして、Authorizationヘッダー、curlコマンド、テストに取り込みます。鍵がブラウザから外に出ることはありませんでした。

Common Errors

secret: "password123"  // guessable, low entropy

secret: base64(crypto.randomBytes(32))  // >=256 random bits

{ "sub": "user_123", "role": "admin" }  // no exp

{ "sub": "user_123", "role": "admin", "exp": 1715003600 }

-----BEGIN RSA PRIVATE KEY-----  // PKCS1, not supported

openssl pkcs8 -topk8 -nocrypt -in pkcs1.pem -out pkcs8.pem

一般的なユースケース

APIテスト用トークンを生成

HS256のBearerトークンを数秒で生成し、curl、Postman、結合テストから保護されたエンドポイントを試せます。

OAuth・OIDCトークンを再現

認可サーバーが発行するものを反映したRS256やES256のトークンを構築し、クレームやaudienceの不一致をデバッグできます。

テストフィクスチャを作成

完全な認証サーバーを立ち上げることなく、ユニットテストや結合テスト用に決定的な署名済みトークンを生成します。

認可の失敗をデバッグ

顧客のトークン形状 — 発行者、audience、scope、有効期限 — を再現し、バックエンドが拒否する理由を突き止めます。

検証者を検証

既知の鍵でトークンに署名し、検証ミドルウェアが有効なトークンを受け入れ、改ざんされたものを拒否することを確認します。

認証フローのプロトタイプ

新しいログイン、マイクロサービス、サービス間呼び出しを構築する間、チームメイトにすぐ使えるトークンを渡せます。

技術的な詳細

RFC 7519 / 7515 / 7518準拠

RFC 7519（JWT）、RFC 7515（JWS）、RFC 7518（JWA）に準拠したJWSトークンを生成し、登録済みのアルゴリズム識別子をヘッダーに記載します。

ネイティブWeb Crypto署名

HMAC、RSASSA-PKCS1-v1_5、RSA-PSS、ECDSAについてcrypto.subtleで署名します。ECDSAの署名はJWSが要求するとおり、生のr||sとして出力されます。

Base64URL・依存ゼロ

ヘッダーとペイロードはURLセーフなアルファベット（RFC 4648）でパディングなしのBase64URLエンコードを行います。外部ライブラリも、ネットワーク呼び出しも、テレメトリもありません。

ベストプラクティス

必ず有効期限を設定する

expクレームを含めて、漏洩したトークンが有効でなくなるようにします。短い有効期限は影響範囲を縮めます — アクセストークンは日単位ではなく分単位で。

ペイロードに秘密を入れない

JWTのペイロードはトークンを持つ者なら誰でも読めます。識別子やスコープは入れても、パスワード、APIキー、完全なPIIは決して入れないでください。

本番環境ではサーバー側で署名する

本ツールはテストとデバッグに使ってください。実際のシステムでは、メンテナンスされているライブラリとシークレットマネージャーの鍵を使い、サーバーでトークンに署名します。

よくある質問