以下のIIIF認証API 2.0の動作確認を行う機会がありましたので、備忘録です。
https://iiif.io/api/auth/2.0/
以下のようなデモサイトを作成しました。
https://iiif-auth-nextjs.vercel.app/ja
リポジトリは以下です。
https://github.com/nakamura196/iiif-auth-nextjs
以下、AIによる説明です。なお、Miradorではうまく動作させることができなかったため、今後の課題です。
本記事では、IIIF Authentication API 2.0 の認証フローを、実際のHTTPリクエスト/レスポンスのレベルで詳細に解説します。各ステップでどのようなリクエストが送信され、どのようなレスポンスが返されるのかを追跡していきます。
アーキテクチャ概要#
認証フローの詳細#
Step 1: 初回の画像情報リクエスト（未認証）#
リクエスト:
処理フロー（サーバー側）:
レスポンス:
Step 2: Probe Service へのリクエスト#
クライアントは401レスポンスからAuthProbeService2のURLを取得し、認証状態を確認します。
リクエスト:
処理フロー（サーバー側）:
レスポンス（未認証）:
Step 3: 認証ウィンドウの開始#
クライアントはProbe ServiceのレスポンスからAuthAccessTokenService2のURLを取得し、ポップアップウィンドウを開きます。
クライアント側の処理:
生成されるURL:
Step 4: Token Service のリダイレクト処理#
リクエスト:
処理フロー（サーバー側）:
0
レスポンス:
1
Step 5: ログインページでの認証#
ログインフォーム送信:
2
処理フロー（サーバー側）:
3
JWT生成の詳細:
4
レスポンス:
5
Step 6: トークンの伝達（postMessage）#
ログイン成功後、クライアント側でトークンを受け取り、Token Service経由で元のウィンドウに送信します。
クライアント側（auth/page.tsx）:
6
Step 7: 元のウィンドウでのトークン受信#
クライアント側（メインウィンドウ）:
7
Step 8: 認証済みでの画像リクエスト#
リクエスト:
8
処理フロー（サーバー側）:
9
レスポンス:
0
トークンの永続化と同期#
localStorage による永続化#
1
タブ間の同期#
2
CORS設定#
Image API エンドポイント#
3
Probe/Access Service#
4
エラーハンドリング#
トークン有効期限切れ#
5
認証エラーのハンドリング#
6
セキュリティ考慮事項#
1. トークンの署名検証#
7
2. HTTPS の使用（本番環境）#
8
3. Origin の検証#
9
パフォーマンス最適化#
1. トークンのキャッシング#
0
2. 並列リクエストの処理#
1
トラブルシューティング#
1. ポップアップブロッカー#
2
2. postMessage の受信失敗#
3
まとめ#
IIIF Authentication API 2.0 の実装では、以下の流れでリクエストが処理されます：
- 初回アクセス → 401 with Probe Service
- Probe Service → 401 with Access Service
- Token Service → Login Page redirect
- Login → JWT Token generation
- postMessage → Token delivery to main window
- Authenticated Request → Protected resource access
各ステップで適切なエラーハンドリングとセキュリティ対策を実装することで、安全で使いやすい認証システムを構築できます。
参考資料#