JWT.io v2 Beta changelog（日本語訳+α）

[neri78]

こちらはJWT.io v2で追加された日本語版についてフィードバックをいただくissueです。機能やユーザー体験、コンテンツ内容についてフィードバックがあればぜひコメントをお寄せください。

ベータ版へのアクセス方法と更新されたページ

• https://jwt.io/beta/jaにアクセスし、
• 次のコードを入力してプレビューにアクセスします。

jwtv2

今回、v2の開発にあたり、下記のページが日本語化されています。

• JSON Web Tokensデバッガー
• JSON Web Tokenの概要
• JSON Web Tokenライブラリ

v2ではサイトデザインを含めて多くの改善、変更を行っています。以下はオリジナルPRの#723に記載されている変更点を抄訳したものです。

---

主な変更点

新しい JWT ウィジェット

• JWT デバッガーツールを2つの主要ウィジェットに分割し、それぞれ異なるJWT操作を処理することで、より優れたエラー処理とユーザーフィードバックを提供します。
• JWTデコーダー
  • デコーダーは、JWTを入力として受け取り、デコードされたヘッダーとペイロードを出力します。
  • デコードされた出力は、JSONオブジェクトとして、または、クレームに関する役立つ説明、ヒント、その他のメタデータを含むテーブルとして表示できます。
    • expやiatなどの時間関連のクレームでは、人間が読める形式の日付が表示されます。
    • デコーダーは、JWTが期限切れの場合に警告を発します。
    • シークレットまたは公開鍵を入力して、署名を検証することができます。
    • シークレットと公開鍵のそれぞれが持つことのできる異なるエンコードと形式について、コミュニケーションを改善しました。
    • シークレット: UTF-8およびbase64urlエンコーディング。
    • 公開鍵: PEMまたはJWK形式。
• JWTエンコーダー
  • エンコーダーは、ヘッダーとペイロード用の入力JSONオブジェクトを受け取ります。
  • トークンに署名するために、シークレットまたは秘密鍵を入力することができます。これはJWTを生成する際に必要なステップです。
  • シークレットと秘密鍵がそれぞれ持つことのできる異なるエンコーディングとフォーマットについて、コミュニケーションを改善しました。
    • シークレット：UTF-8およびbase64urlエンコーディング。
    • 秘密鍵：PEMまたはJWKフォーマット。
• 両方のウィジェットは、JWTのエンコードまたはデコードが機能しない理由と、その問題の解決方法を理解できるよう、よりわかりやすいエラーメッセージを提供します。
• 両方のウィジェットは、いくつかの入力と出力にユーティリティボタンがあり、一般的な操作を実行するのに役立ちます。
  • ボタンを使用して、いくつかの入力と出力の内容をコピーすることができます。
  • ボタンをクリックして、入力の内容をクリアすることができます。
  • 「同期」トグルボタンを使用して、デコーダー出力をエンコーダーの入力に「プッシュ」したり、その逆を行うこともできます。
  • ウィジェットの分割は最大のUI/UXの変更であるため、この機能については最もフィードバックを必要としています。
  • 現在のコードベースではエラーを一貫して処理しておらず、エンコードとデコードの操作を単一のフローに混在させることで、エラーが処理されなかったり、UXが混乱したり、応答しなくなったりしていました。
• デコーダーとエンコーダーのウィジェットを同期させるオプションを選択できます。
  • デコーダーの出力はエンコーダーの入力となり、その逆も同様です。
  • デコーダーでのエラーはエンコーダーでのエラーを発生させ、その逆も同様です。
  • この動作は、jwt.io v1 が現在行っている動作と多少似ていますが、JWTでエラーが発生する原因をよりよく理解し、より効果的にトラブルシューティングを行うために、デコーダーとエンコーダーの動作間に明確な分離レイヤーを導入しています。

サイトアーキテクチャ

• おそらく最も重要なアーキテクチャの変更は、PugとExpressを使用したJavaScriptから、TypeScriptを使用したNext.jsへのコードベースの移行です。
  • この新しいスタックにより、より優れたUXとJWT関連のサービスを設計する上で相乗効果が得られました。
  • この新しいスタックにより、アプリケーションの反復をより迅速に行い、フィードバックに迅速に対応し、機能セットを拡張できるようになります。
• ライブラリをフィルタリングするために使用されるクエリパラメータは、?language=から?filter=に更新されました。
• クエリパラメータの値は、安全なURL文字を使用するように更新されました。
  • 例えば、kdb+/Qの値はkdb-qに変更されます。
• URLクエリパラメータの使用から、JWTデコーダへのJWTプリロード、URLフラグメントへの移行を行いました。
  • サポートされるフラグメントは#token=のみです。
• JWT.ioの日本語版ローカライズ版を来年リリースする予定であるため、国際化をサポートするようサイトを構築しました。

デザイン

• サイトは現在、ダークテーマとライトテーマをサポートしています。
• ヒーローバナーとJWTの警告メッセージはよりコンパクトになり、最小化して開発者ツールに適したより合理化されたUIを提供できるようになりました。
  • JWT.ioを必要なだけご利用ください。数回、あるいは1回でも利用すれば、ウェブ上のJWTのコピー＆ペーストに関する参考情報や警告を何度も見つめる必要はなくなります。
• ピッカーにより、シークレットのエンコード形式とプライベート/パブリックキーの形式を選択できるようになりました。
  • これにより、より優れたユーザー体験と、より洞察に富んだエラーメッセージを提供できるようになりました。
  • ピッカーのラベルにより、その機能のより適切なコンテキストが提供されます。

ユーザー体験

• このサイトでは、クッキーを使用してユーザーの選択内容を記憶します。
  • ボックスを最小化したり、デコードされたプレゼンテーションを選択すると、次回訪問時やリフレッシュ時に、以前の設定が反映されます。

廃止された項目

• JWTクレームに関するツールチップは、クレームの分解機能のために廃止されました。
  • この変更により、必要なときにこの情報にアクセスしやすくなりました。
  • 必要がなくなったら、デコードされた出力テーブルのクレームの説明を非表示にすることができます。
• 時刻関連のクレーム（exp、nbf、iat、auth_time、updated_atなど）のツールチップは、時刻を読みやすい形式で表示する機能が廃止され、クレームの分解タブで時刻を表示する機能に置き換えられました。
• 脆弱なシークレットのツールチップは、詳細で役立つエラーメッセージを表示するために廃止されました。
  -「JWTの共有」機能は廃止されました。
  -「作成されたトークン」カウンターは廃止されました。
  • 復活させるべきでしょうか？ 見るのは楽しいですが、機能的な目的には役立ちません。

今後の予定

• ディレクトリページでJWTライブラリを管理するプロセスを定義する必要があります。
  • ライブラリを一覧から削除すべきタイミングはいつでしょうか？
  • ライブラリに接続しているレポジトリがアーカイブされた場合や、メンテナンスされていない兆候が見られる場合など、エンドユーザーに役立つ情報を反映させることができます。
    • snyff によるレポートをご覧ください。
• 暗号化されたJWTに対するサポートをサイトに追加したいと思います。サイトに直接使用することに興味がありますか？そのために時間とリソースを投資してもいいですか？
• ウェブサイトのリポジトリがプライベートになった場合、JWT ライブラリを提出するリポジトリはパブリックのままでも問題ありませんか？
  • jwt.io v1 と v2 の両方のフッターまでスクロールすると、私たちが開発者のアイデンティティ関連のタスクを支援する他のツールをいくつか構築していることが分かるでしょう。
  • 私は、これらの他のツールを更新し、改良し、Google Chrome が Google アプリに提供している「アプリピッカー」のようなものを使ってそれらを接続するというビジョンとミッションを持っています。しかし、それらはプライベートリポジトリとパブリックリポジトリが混在しています。それらをすべて単一のモノリポジトリにまとめることができれば、設計とエンジニアリングのプロセスを加速させるのに役立つでしょう。しかし、そのリポジトリはプライベートにする必要があるでしょう。