Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

勘所１：backend.tsの修正

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

これ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

以上が実装の勘所でした

Slide 36

Slide 36 text

まとめ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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