TypeScriptの型システムを活用した複合認証システムの設計パターン

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 TypeScriptの型システムを活⽤した複合認証システムの設計パターン

© toggle holdings inc. 2  ⾼橋哉⼈所属トグルホールディングス 25卒 X
@kanayan_toggle ※哉⼈で「かなと」と読みます

3  © toggle holdings inc. ブース出してます！

4  © toggle holdings inc. 当社の開発環境フロントエンド   バックエンド  

5  © toggle holdings inc. • 依存⽅向がシンプル • コードを追いやすいレイヤードアーキテクチャ

6  © toggle holdings inc. 複合認証システム (コード認証 +IP制限)

7  © toggle holdings inc. • 5回入力を間違えるとログイン画面に遷移 • 1分経つとコード再送信可能になる •
10分経つと仮ログイン破棄コード認証の仕様

8  © toggle holdings inc. IP制限の有無も加わり実装が複雑化

9  © toggle holdings inc. • メールを無限に送れる仕様になってない？ • 認証コード不一致 or
期限切れなどのエラーを正しく返すか • タブを複数開いてそれぞれでログインしたらどうなるか次々出てくる確認ポイント

10  © toggle holdings inc. 一個一個実装していった結果。。。

11  © toggle holdings inc. 不具合の嵐 👼

12  © toggle holdings inc. • タブを同時に 2つ開いてどっちもログインするとエラーになる 😥 •
10分経過後にコード入力してもエラー出ない 😨 • 10分経過後に再送信ボタン押すとなぜかログインできる 😱 etc… 不具合の例

13  © toggle holdings inc. どれか解決しても他の問題が再発する。。。モグラ叩き状態

14  © toggle holdings inc. なんでこうなった？

15  © toggle holdings inc. • 問題に場当たり的に対応し、各コンポーネントが肥大化 →状態管理が困難に • エラーハンドリングが曖昧
(未ログイン・セッション無効・認証コードの不一致・トークン期限切れ ) 悲劇の原因

16  © toggle holdings inc. 散らかり放題なので整理しよう

17  © toggle holdings inc. フローチャートで整理してみようこんな感じに

18  © toggle holdings inc. 全体をフローチャートで整理した結果

19  © toggle holdings inc.

20  © toggle holdings inc. アリの巣みたいになった 🐜

22  © toggle holdings inc. リファクタリング • フローチャートを元に、各クラスの役割を明確にした上で責任分離 ◦ アクセス制御、認証、認可、記録
…といったフェーズを明示的に定義して、それを transactionとserviceで表す • Zodを用いて、フロントエンドとバックエンド境界の型安全性を担保しつつ正しいエラーレスポンスを定義

30  © toggle holdings inc. ご清聴ありがとうございました

TypeScriptの型システムを活用した複合認証システムの設計パターン

TypeScriptの型システムを活用した複合認証システムの設計パターン

Kanato

Featured

Transcript

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 TypeScriptの型システムを活⽤した複合認証システムの設計パターン

© toggle holdings inc. 2  ⾼橋哉⼈所属トグルホールディングス 25卒 X

3  © toggle holdings inc. ブース出してます！

4  © toggle holdings inc. 当社の開発環境フロントエンド   バックエンド

5  © toggle holdings inc. • 依存⽅向がシンプル • コードを追いやすいレイヤードアーキテクチャ

6  © toggle holdings inc. 複合認証システム (コード認証 +IP制限)

7  © toggle holdings inc. • 5回入力を間違えるとログイン画面に遷移 • 1分経つとコード再送信可能になる •

8  © toggle holdings inc. IP制限の有無も加わり実装が複雑化

9  © toggle holdings inc. • メールを無限に送れる仕様になってない？ • 認証コード不一致 or

10  © toggle holdings inc. 一個一個実装していった結果。。。

11  © toggle holdings inc. 不具合の嵐 👼

12  © toggle holdings inc. • タブを同時に 2つ開いてどっちもログインするとエラーになる 😥 •

13  © toggle holdings inc. どれか解決しても他の問題が再発する。。。モグラ叩き状態

14  © toggle holdings inc. なんでこうなった？

15  © toggle holdings inc. • 問題に場当たり的に対応し、各コンポーネントが肥大化 →状態管理が困難に • エラーハンドリングが曖昧

16  © toggle holdings inc. 散らかり放題なので整理しよう

17  © toggle holdings inc. フローチャートで整理してみようこんな感じに

18  © toggle holdings inc. 全体をフローチャートで整理した結果

19  © toggle holdings inc.

20  © toggle holdings inc. アリの巣みたいになった 🐜

21  © toggle holdings inc. 全体を整理しないでこれを実装するのは無理があったことに気づいた

22  © toggle holdings inc. リファクタリング • フローチャートを元に、各クラスの役割を明確にした上で責任分離 ◦ アクセス制御、認証、認可、記録

23  © toggle holdings inc. コード認証の状態を型で表現

24  © toggle holdings inc. エラーレスポンスの洗い出し

25  © toggle holdings inc. 型を検証認証コードを検証し、正しいエラーレスポンスを返すことを意識

26  © toggle holdings inc. これらの実装を進めていき。。。

27  © toggle holdings inc. 無事リリース完了 ✌

28  © toggle holdings inc. まとめ • 複雑な実装は視覚的に整理 • 新規の実装に場当たり的に対処しない

29  © toggle holdings inc. TypeScript万歳🙌 🙌 🙌

30  © toggle holdings inc. ご清聴ありがとうございました