Amplify製アプリケーションにパスキー認証を導入する

Amplify製アプリケーションにパスキー認証を導入する髙橋　透 2024/12/19 Amplify Boost Up #07

Name: 髙橋　透 Community: AWS Community Builders (Front-end Web and Mobile)
Tech interest: • Java(本業) • AWS Amplify(趣味) Like: お酒を飲む、0歳の息子氏を愛でる

Q:なぜAmplifyにパスキー認証を？

A:個人で作ってるアプリの認証フローを楽にしたかったからです

https://accounts.hatena.ne.jp/login パスキー認証とは • 生体認証を用いた認証処理 ◦ 指紋、顔など • パスワード入力が不要 • 端末ごとに生体認証キーを
管理可能

個人で作ってるアプリ？？？

私は家族専用の家計管理アプリを自作してAmplifyで運用してます。 ID&パスワードで認証しているところをパスキーにしたかったのです。 ※このアプリについては過去のAmplify Boost Up#05で話したことがあります。

本日お話しすること • Amplifyへのパスキー認証導入 • 実装の勘所

Amplifyにパスキー認証機能を導入する方法は公式リファレンスには明記されていません

amazon-cognito-passwordless-authというライブラリを利用して実装していきます

https://github.com/aws-samples/amazon-cognito-passwordless-auth/tree/main

パスキー認証に必要なAWSリソースを CDKで記述しnpmライブラリとして公開しています ※神のようなサンプル

本日お話しすること • Amplifyへのパスキー認証導入 • 実装の勘所

「Amplify×パスキー認証」の実装は想像以上に大変でした全容をこの場で喋り切ることは難しいので主要な部分を抜粋して紹介します

まずはアーキテクチャ図を・・・

初回認証用のキーを発行認証履歴を保持

実装の勘所を2つ紹介します 1. backend.tsの修正 2. Amazon Cognitoのカスタム認証フロー

勘所１：backend.tsの修正

backend.tsとは • Amplifyプロジェクトの雛形作成時に自動生成される設定ファイル • Cognito, DynamoDB, S3等のAWSリソースの作成に必要

これ

今回backend.tsを編集することでカスタムCDKリソースを作成していきます

初回認証用のキーを発行認証履歴を保持カスタムCDKでこのLambda群を作成 ※aws-samplesのライブラリも利用

backend.tsってがっつり編集する機会が少ないですよね

backend.tsに実装を追記するとどうなるか？ ↓ カスタムのAWSリソースを CDK経由で作成できる

例えば下記のように書くとSNSとSQSを作成できる参考：https://docs.amplify.aws/react/build-a-backend/add-aws-services/custom-resources/

今回パスキー認証のために結構手を加えました

勘所２：Amazon Cognitoのカスタム認証フロー

Cognitoのデフォルト認証フローは ID&パスワード認証ですこの認証フローをパスキー認証に変更したい

Cognitoのデフォルト認証フローは ID&パスワード認証ですこの認証フローをパスキー認証に変更したい →Cognitoの「カスタム認証フロー」を使おう！

カスタム認証フローとは • 仕様に沿ったLambda関数を用意することで Cognitoの認証フローを変更できる • パスキー認証・二要素認証などに変更可能

参考：https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-challenge.html

初回認証用のキーを発行認証履歴を保持ここのLambda3つと対応している

①クライアントからの認証リクエストを受けて認証フローの定義を行う ②認証に利用するchallengeというランダム文字列を生成してクライアントに返す ③クライアントが送信した署名付き challengeを検証し認証可否を判断する

以上が実装の勘所でした

まとめ

まとめ • Amplifyにパスキー認証を導入するのは大変（でもいい勉強になる） • backend.tsを拡張すると好きなAWSリソースをCDKで作成できる • Cognitoのカスタム認証フローを使うとID&パスワード認証以外のフローを適用することができる

もっと詳しく知りたくなった方へ https://qiita.com/tttol777/items/ac4f6562eee4fbe49655

ご清聴ありがとうございました

More Decks by Toru Takahashi