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

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 TypeScriptの型システムを活⽤した 複合認証システムの設計パターン
2. © toggle holdings inc. 2
 ⾼橋哉⼈ 所属 トグルホールディングス 25卒 X @kanayan_toggle ※哉⼈で「かなと」と読みます
3. 3
 © toggle holdings inc. ブース出してます！
4. 4
 © toggle holdings inc. 当社の開発環境 フロントエンド 
 バックエンド 

5. 5
 © toggle holdings inc. • 依存⽅向がシンプル • コードを追いやすい レイヤードアーキテクチャ
6. 6
 © toggle holdings inc. 複合認証システム (コード認証 +IP制限)
7. 7
 © toggle holdings inc. • 5回入力を間違えるとログイン画面に遷移 • 1分経つとコード再送信可能になる • 10分経つと仮ログイン破棄 コード認証の仕様
8. 8
 © toggle holdings inc. IP制限の有無も加わり実装が複雑化
9. 9
 © toggle holdings inc. • メールを無限に送れる仕様になってない？ • 認証コード不一致 or 期限切れなどのエラーを正しく返すか • タブを複数開いてそれぞれでログインしたらどうなるか 次々出てくる確認ポイント
10. 10
 © toggle holdings inc. 一個一個実装していった結果。。。
11. 11
 © toggle holdings inc. 不具合の嵐 👼
12. 12
 © toggle holdings inc. • タブを同時に 2つ開いてどっちもログインするとエラーになる 😥 • 10分経過後にコード入力してもエラー出ない 😨 • 10分経過後に再送信ボタン押すとなぜかログインできる 😱 etc… 不具合の例
13. 13
 © toggle holdings inc. どれか解決しても他の問題が再発する。。。 モグラ叩き状態
14. 14
 © toggle holdings inc. なんでこうなった？
15. 15
 © toggle holdings inc. • 問題に場当たり的に対応し、各コンポーネントが肥大化 →状態管理が困難に • エラーハンドリングが曖昧 (未ログイン・セッション無効・認証 コードの不一致・トークン期限切れ ) 悲劇の原因
16. 16
 © toggle holdings inc. 散らかり放題なので整理しよう
17. 17
 © toggle holdings inc. フローチャートで整理してみよう こんな感じに
18. 18
 © toggle holdings inc. 全体をフローチャートで整理した結果
19. 19
 © toggle holdings inc.
20. 20
 © toggle holdings inc. アリの巣みたいになった 🐜
21. 21
 © toggle holdings inc. 全体を整理しないでこれを実装するのは 無理があったことに気づいた
22. 22
 © toggle holdings inc. リファクタリング • フローチャートを元に、各クラスの役割を明確にした上で責任分離 ◦ アクセス制御、認証、認可、記録 …といったフェーズを明示的に定 義して、それを transactionとserviceで表す • Zodを用いて、フロントエンドとバックエンド境界の型安全性を担保しつ つ正しいエラーレスポンスを定義
23. 23
 © toggle holdings inc. コード認証の状態を型で表現
24. 24
 © toggle holdings inc. エラーレスポンスの洗い出し
25. 25
 © toggle holdings inc. 型を検証 認証コードを検証し、正しいエラーレスポンスを返すことを意識
26. 26
 © toggle holdings inc. これらの実装を進めていき。。。
27. 27
 © toggle holdings inc. 無事リリース完了 ✌
28. 28
 © toggle holdings inc. まとめ • 複雑な実装は視覚的に整理 • 新規の実装に場当たり的に対処しない • アーキテクチャに則った責任分離を意識 • 試行錯誤しながらも無事にリリースできた
29. 29
 © toggle holdings inc. TypeScript万歳🙌 🙌 🙌
30. 30
 © toggle holdings inc. ご清聴ありがとうございました