search

commew / timelogger-web

時間記録アプリ
https://timmew.commew.net
MIT License
2 stars 0 forks source link

SessionにバックエンドAPIとの認証に利用する `appToken` を追加 #35

Closed keitakn closed 1 year ago

keitakn commented 1 year ago

issueURL

https://github.com/commew/timelogger-web/issues/13

この PR で対応する範囲 / この PR で対応しない範囲

Storybook の URL、 スクリーンショット

https://63d52217f1430a5ad69846cd-dhgnptiomn.chromatic.com/?path=/story/components-errorfallback-errormessage--default

変更点概要

Sessionに https://github.com/commew/timelogger-api との認証に利用する appToken という値を追加しました。

これらはNextAuth.jsのSessionやJWTの型を流用しているので、型の拡張を行っています。

例えばNext.jsからは以下のようにアクセスします。

import { getSession } from 'next-auth/react';

const session = await getSession(context);

// JWT形式の文字列が取得出来ます
console.log(session?.appToken);

payloadの仕様は下記のようになっています。

{
  "sub": "ユーザーの識別子が入ります。Googleは数値で入っていますが、Providerによってはランダムな文字列だったりするので型は文字列で統一しています。",
  "provider": "初期リリースだと固定文字で google が入りますが、他の認証手段が増えるとこちらの文字列のバリエーションも増えます。",
  "exp": 数値型、有効期限,
  "jti": "UUID（今のところv4）形式の文字列",
  "iat": このJWTを発行した日時がUnixTimeスタンプ形式で入ります
}

exp, jti, iat に関してはRFC7519に定義されています。

https://tools.ietf.org/html/rfc7519

https://github.com/commew/timelogger-api へのリクエスト例です。

appTokenが以下の内容だと仮定すると、、、

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

以下のようになります。

curl -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" https://example.com/api/endpoint

レビュアーに重点的にチェックして欲しい点

@c501306014 @stkzk3110

情報共有の為、レビュアーに設定させて頂いております。

しばらくは開発が出来る状態までプロジェクトを整備している状況です。

お時間がありましたら、目を通して頂く程度の温度感で問題ありません。

※ 初期構築が完了した時点でフロントエンドメンバーには別途説明会の機会を作らせて頂きます。

@HAYASHI-Masayuki @HaruyaFujimoto

こちらですが、情報共有の為、レビュアーに設定させて頂いております。

PRの説明欄に書いてある通り、appToken というJWT形式の値を Authorization Headerに送信する予定です。（JWTの検証に利用する秘密鍵は後ほど共有します）

見ての通りpayloadから sub , provider が取得出来ますが、これらをどのようなデータ構造でバックエンドのDBに保存するかはバックエンドチームにお任せ出来ればと思いますが問題ないでしょうか？

補足情報

インラインコメントに記載。

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
timelogger-web ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 19, 2023 at 1:58PM (UTC)
keitakn commented 1 year ago

@HAYASHI-Masayuki @HaruyaFujimoto

こちらのPRですが事前準備の為の必須課題なので先行してマージさせて頂きます。

レビュアーに重点的にチェックして欲しい点

こちらに記載してある内容だけご確認頂き、不明点があればマージ後でも問題ありませんのでこちらのPRにコメントを頂ければと思います。

お手数ですがよろしくお願いします！

HAYASHI-Masayuki commented 1 year ago

@keitakn ありがとうございます。

見ての通りpayloadから sub , provider が取得出来ますが、これらをどのようなデータ構造でバックエンドのDBに保存するかはバックエンドチームにお任せ出来ればと思いますが問題ないでしょうか？

はい、大丈夫です。こちらはバックエンドチームで検討します。(というほど複雑なことは必要ないと思いますが)。