Cogonito の Managed Login でパスキー認証を試す

# Managed Login でパスキーを利用する

パスキーは、デバイス内に保存された鍵を利用してウェブサイトやアプリにログインできる、比較的新しい仕組みです。パスワードの代わりに、パスキーを利用したログインができるサイトが増えてきています。

Amazon Cognito の Managed Login でパスキーが対応されたので、さっそく使い方を見ていきましょう。



# パスキーで利用するサービス

今回は、個人所有のスマートフォンで利用している Google アカウントで、パスキーを利用していきます。Google アカウントのパスキー提供機能は、複数のデバイス間で共有することができ、利便性や紛失時にも対応がやりやすいです。以下の記事でパスキーそのものの紹介が日本語でわかりやすくされているので、興味がある方は読んでみてください。

https://developers-jp.googleblog.com/2022/11/securitey-ofs-passkeys.html



# Cognito の設定変更

[前]回の記事で Cognito の UserPool や ALB と連携設定](https://qiita.com/sugimount-a/items/9ea49664e360e0370ae9)を行いました。この既存の環境を利用していきます。

まず、Cognito の User Pool の画面で、Sign-in メニューから、パスキーに関する設定項目を入れていきます。

![image-20241223163623422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/06807033-ad62-a6fc-3e89-27ceb632138e.png)



以下の画面で Passkey を選択します。これだけで、Managed Login でパスキーの登録や認証が有効になります。スゴイ簡単でいいですね。

![image-20241223164300695.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/9e306032-e231-536f-4797-575fbea2d1e6.png)



# ユーザー登録とパスキー登録

実際に Managed Login の画面を見てみましょう。まずは新規アカウント登録から見ていきます。

![image-20241223205325217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/611e2aa9-3540-a254-c0d9-70d319580e91.png)



新規メールアドレスやパスワードを入力して、サインアップを押します。

![image-20241223205447645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/2551af95-3fda-c6b8-2b9a-c98e79008c00.png)



登録したメールアドレスに一時的なコードが送信されます。

![image-20241223205509218.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/9341757f-8d0b-6b22-ea62-898d72c353ac.png)



送信されたコードを入力します。

![image-20241223205524057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/57a0d0e6-3a5a-cca5-6542-579af016c90d.png)



そのあとの手順で、アカウントにパスキーを登録できます。

![image-20241223205535901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/b2dc8cc4-0a09-5ae8-27f1-1b5e489dfc4f.png)



この時に、手持ちのスマートフォンにある Google アカウントを利用したいので、別のスマートフォンを選びます。

![image-20241223205654705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/aa373a1e-acc1-18cd-1c86-507c32fcaaa9.png)



QR コードが表示されるので、これをスマートフォンで読み取ります。

![image-20241223205900652.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/4e72eba2-509f-a496-3b85-2f753b53b5de.png)



すると、以下のように Google アカウント上にパスキーが作成される旨が表示されます。

![image-20241223210836518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/310a6422-574b-c264-f16e-d42b3444e5a2.png)



これで続行を押すと、無事にアカウント登録ができ、独自に実装した動作確認用のWeb サイトを表示できました。

![image-20241226224444712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/681b7b00-afd4-3b09-0831-cb4e79327fb1.png)



# パスキーを利用してログインする

登録したメールアドレスを入れます。

![image-20241226225802623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/3453ae3f-44f7-af35-3237-5a050e10ba98.png)



![image-20241226225824632.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/58a9d791-0216-db3f-d70e-9e060348bd08.png)

![image-20241226225841923.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/e60ff0e3-46c5-b5f1-c1ae-a5c64c6e5434.png)



![image-20241226225855785.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/2808c1ff-dbd8-3eca-c92f-fce52846fdfa.png)



ことあとは、スマホ側のセキュリティで設定されている認証を行います。例えば、以下のような認証があります。

- 指紋認証
- 顔認証
- 画面ロックを指でなぞって認証



これでクリアすればログインが行われる仕組みです。パスワードがなくなり、よりセキュアなログインが実現されます。



# あとからパスキー登録

今回はパスキーの登録は必須にはしなかったので、ログイン後にあとからパスキーを登録したくなります。その場合、Managed Login で後からパスキーを登録できる機能が提供されています。

> https://<<COGNITOカスタムドメイン名>>/passkeys/add?client_id=<<COGNITOのクライアントID>>&redirect_uri=<<COGNITOに登録しているコールバックURL>>&lang=ja



これを実際の URL にするとこんな感じです。(ログインができないので)

https://auth.cognito-nginx01.sugiaws.tokyo/passkeys/add?client_id=5ehctf8ikmlvo1grqk7id5v4a2&redirect_uri=https%3A%2F%2Fcognito-nginx01.sugiaws.tokyo&lang=ja



上記の Endpoint が説明されているドキュメントはこちらです。

https://docs.aws.amazon.com/cognito/latest/developerguide/managed-login-endpoints.html




# 参考 URL

https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-authentication-flow-methods.html#amazon-cognito-user-pools-authentication-flow-methods-passkey

https://blog.agektmr.com/2023/12/passkey-mythbusting