Open2023/11/16にコメント追加2

Cognito を IdP をして JWT を用いて認証情報を交換する Web アプリのフロントエンド／バックエンド実装についてメモ

hassaku63

https://jwt.io/introduction

署名で本人確認できる。ログイン後に（認証付き URL に）アクセスする場合の後続リクエストには JWT が含まれるので、バックエンドはでそれを検証する

JWT の構造

. 区切りで以下の3つを含む

Header
Payload
Signature

<header>.<payload>.<signature>

{
  "alg": "HS256",
  "typ": "JWT"
}

Body

クレームが含まれる

iss, exp, sub, aud とか。

ちなみに AWS の OIDCProvider にも同じようなパラメータがあって、clientIdList が aud に対応している

signature

HMAC SHA256 を使ってるなら以下のようなデータを Base64 エンコードしたものになる

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

秘密鍵ないとデコードできないのでここの中身はそのへんの実在の web サービスから直で引っ張ってくるのを諦めた

Auth0 のドキュメントにサンプルの payload が出ている。こんな感じ

https://auth0.com/docs/get-started/apis/scopes/sample-use-cases-scopes-and-claims

{
  "name": "John Doe",
  "nickname": "john.doe",
  "picture": "https://myawesomeavatar.com/avatar.png",
  "updated_at": "2017-03-30T15:13:40.474Z",
  "email": "john.doe@test.com",
  "email_verified": false,
  "iss": "https://{yourDomain}/",
  "sub": "auth0|USER-ID",
  "aud": "{yourClientId}",
  "exp": 1490922820,
  "iat": 1490886820,
  "nonce": "crypto-value",
  "at_hash": "IoS3ZGppJKUn3Bta_LgE2A"
}

hassaku63

Web アプリの世界だと Authorization ヘッダで交換する

Authorization: Bearer <token>

認証終わってトークン生成されたレスポンスが返ってきたら、LocalStorage か SessionStorage あたりに格納しておいて、認証付きリクエストはここからデータを拾って Authorization ヘッダにくっつける

JWT の構造

Header

Body

signature