Amplify製アプリケーションにパスキー認証を導入する

Amplify Boost Up #07
https://aws-amplify-jp.connpass.com/event/334686/

Transcript

1. Amplify製アプリケーションに パスキー認証を導入する 髙橋　透 2024/12/19 Amplify Boost Up #07
2. Name: 髙橋　透 Community: AWS Community Builders (Front-end Web and Mobile) Tech interest: • Java(本業) • AWS Amplify(趣味) Like: お酒を飲む、0歳の息子氏を愛でる
3. Q:なぜAmplifyにパスキー認証を？
4. A:個人で作ってるアプリの認証フローを 楽にしたかったからです
5. https://accounts.hatena.ne.jp/login パスキー認証とは • 生体認証を用いた認証処理 ◦ 指紋、顔など • パスワード入力が不要 • 端末ごとに生体認証キーを 管理可能
6. 個人で作ってるアプリ？？？
7. 私は家族専用の家計管理アプリを自作 してAmplifyで運用してます。 ID&パスワードで認証しているところを パスキーにしたかったのです。 ※このアプリについては過去のAmplify Boost Up#05で話したことがあります。
8. 本日お話しすること • Amplifyへのパスキー認証導入 • 実装の勘所
9. 本日お話しすること • Amplifyへのパスキー認証導入 • 実装の勘所
10. Amplifyにパスキー認証機能を導入する方法は 公式リファレンスには明記されていません
11. amazon-cognito-passwordless-authという ライブラリを利用して実装していきます
12. https://github.com/aws-samples/amazon-cognito-passwordless-auth/tree/main
13. パスキー認証に必要なAWSリソースを CDKで記述しnpmライブラリとして公開しています ※神のようなサンプル
14. 本日お話しすること • Amplifyへのパスキー認証導入 • 実装の勘所
15. 「Amplify×パスキー認証」の実装は 想像以上に大変でした 全容をこの場で喋り切ることは難しいので 主要な部分を抜粋して紹介します
16. まずはアーキテクチャ図を・・・
17. 初回認証用の キーを発行 認証履歴を保持
18. 実装の勘所を2つ紹介します 1. backend.tsの修正 2. Amazon Cognitoのカスタム認証フロー
19. 勘所１：backend.tsの修正
20. backend.tsとは • Amplifyプロジェクトの雛形作成時に自動生成され る設定ファイル • Cognito, DynamoDB, S3等のAWSリソースの作 成に必要
21. これ
22. 今回backend.tsを編集することで カスタムCDKリソースを作成していきます
23. 初回認証用の キーを発行 認証履歴を保持 カスタムCDKでこのLambda群を作成 ※aws-samplesのライブラリも利用
24. backend.tsって がっつり編集する機会が少ないですよね
25. backend.tsに実装を追記するとどうなるか？ ↓ カスタムのAWSリソースを CDK経由で作成できる
26. 例えば下記のように書くとSNSとSQSを作成できる 参考：https://docs.amplify.aws/react/build-a-backend/add-aws-services/custom-resources/
27. 今回パスキー認証のために結構手を加えました
28. 勘所２：Amazon Cognitoのカスタム認証フロー
29. Cognitoのデフォルト認証フローは ID&パスワード認証です この認証フローをパスキー認証に変更したい
30. Cognitoのデフォルト認証フローは ID&パスワード認証です この認証フローをパスキー認証に変更したい →Cognitoの「カスタム認証フロー」を使おう！
31. カスタム認証フローとは • 仕様に沿ったLambda関数を用意することで Cognitoの認証フローを変更できる • パスキー認証・二要素認証などに変更可能
32. 参考：https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-challenge.html
33. 初回認証用の キーを発行 認証履歴を保持 ここのLambda3つと対応している
34. ①クライアントからの認証リクエストを受けて 認証フローの定義を行う ②認証に利用するchallengeというランダム 文字列を生成してクライアントに返す ③クライアントが送信した署名付き challengeを検証し認証可否を判断する
35. 以上が実装の勘所でした
36. まとめ
37. まとめ • Amplifyにパスキー認証を導入するのは大変（でもいい 勉強になる） • backend.tsを拡張すると好きなAWSリソースをCDKで 作成できる • Cognitoのカスタム認証フローを使うとID&パスワード認 証以外のフローを適用することができる
38. もっと詳しく知りたくなった方へ https://qiita.com/tttol777/items/ac4f6562eee4fbe49655
39. ご清聴ありがとうございました