2つのPWA間での署名付きトークン：バックエンドなしのHMAC-SHA256
あるPWAから別のPWAへユーザーのアイデンティティを渡す必要があります。両方のアプリは別々のFirebaseプロジェクトで動作しており、データベースも認証も共有していません。
これはバックエンドのコードを書かずに解決できます。ブラウザのWeb Crypto APIと署名付きURLさえあれば十分です。
問題点： PanelControlという社内ツールから、Ordersという別のサイトを開く必要があります。ユーザーがボタンをクリックしたとき、Ordersサイトはユーザーが誰であるかを認識しなければなりません。ユーザーに再度ログインさせるべきではありません。
これを実現する3つの方法：
- Firebaseの共有: データベースの共有が必要です。今回は不可能です。
- postMessage: 同一ドメインまたはポップアップが必要です。管理が難しくなります。
- HMAC署名付きURL: トークンを含むリンクを使用します。これが最適です。
仕組み： HMACは秘密鍵（secret key）を使用して署名を作成します。受信側は同じ鍵を使用して署名を検証します。署名が一致すれば、送信者は信頼できると判断されます。
ワークフロー：
- 送信側：
- ユーザー名とタイムスタンプを含むペイロードを作成する。
- HMAC-SHA256を使用してペイロードに署名する。
- 署名とペイロードをURLに付加する。
- 受信側：
- URLからトークンを読み取る。
- ペイロードから署名を分離する。
- 共有された秘密鍵を使用して署名を再計算する。
- トークンが期限切れでないか確認する（例：5分後など）。
- 有効であれば、アプリ内でユーザーのアイデンティティを設定する。
実装の詳細：
Web Crypto APIはすべてのモダンなブラウザにネイティブで搭載されています。ArrayBufferで動作し、追加のライブラリは不要です。
処理をクリーンに保つため、受信側のスクリプトはドキュメントのhead内で実行します。トークンを検証し、時間をチェックした後、history.replaceStateを使用して即座にURLをクリーンアップします。これにより、ブラウザのアドレスバーからトークンが削除され、非表示の状態に保たれます。
セキュリティに関する注意： 秘密鍵はクライアント側のコード内に存在します。DevToolsを使用すれば誰でも見ることができます。名前のような機密性の低いデータのみを渡す社内向けビジネスツールであれば、これで問題ありません。
機密データを扱う公開アプリを構築する場合は、代わりにサーバーサイドのトークンを使用してください。社内ツールであれば、このクライアントのみの手法は迅速かつ効果的です。
追加のインフラは不要。追加のデータベースも不要。ブラウザのネイティブツールだけで完結します。
出典: https://dev.to/androve2k/signed-token-between-two-pwas-hmac-sha256-with-no-backend-3jod