Cognitoのマネージドログインでpasskeyログインを試してみる

Cognitoのマネージドログインでpasskeyログインを試してみる

Amazon Cognitoのアップデートがあり、 Essentials以上のプランでPasskeyを使ったログインが可能になりました。 マネージドログイン機能でPasskeyを使ったログインをすると、どんな感じになるのか試してみました。
Clock Icon2024.11.27

Amazon Cognitoのアップデートがあり、 Passkey を使ったログインが可能になりました。

最近Amazon Cognitoのアップデートがあり、マネージドログイン機能の導入や機能Tier概念の追加がされて、大きく変わっています。

詳しくは弊社ブログをご覧ください。

そのアップデートの中の1つで、Essentials以上のプランでは、 Passkey を使ったログインが可能になっています。

マネージドログイン機能で Passkey を使ったログインをすると、どんな感じになるのか試してみました。

Passkeyを使ったログインの様子

認証したいWebアプリケーションからマネージドログイン機能のログイン画面を開いて、ユーザー名を入力します。

image.png

ログインしようとしているユーザーにPasskeyが登録されていると、Passkeyでログインすることを促されます。

image.png

続行すると、Passkeyを入力する画面が表示されたり、別のデバイスのPasskeyを使用するためにQRコードが表示されたりします。

image.png

Passkeyでログインできると、Webアプリケーションへ 認可コード がリダイレクトで返されます。

後は、Webアプリケーション側で認可コードを使って、トークンを取得してログイン処理を完了します。

この辺のPasskey前後の認証フローの細かい話が気になる方は、以前ブログで詳しく解説したのでこちらをご覧ください。

設定の前提

ここから先は、以下の環境が構築済みであることを前提とします。

  • Cognitoユーザープールが作成済み
  • カスタムドメインが設定済み
  • ブランディングのマネージドログインが設定済み
  • マネージドログインを利用したWebアプリケーションでのログインが実装済み

Passkeyを使ったログインの設定

まずはドキュメントを見ましょう。
2024/11/27時点では、日本語ドキュメントがまだなかったので英語のドキュメントを見ます。

Console

To activate sign-in with passkeys, configure your user pool to permit primary sign-in with one or more passwordless types, then configure your app client to permit the USER_AUTH flow. In the Amazon Cognito console, navigate to the Sign-in menu under Authentication in your user pool configuration. Edit Options for choice-based sign-in and add Passkey to the list of Available choices.

文章だけどだとよくわからないので、あわせてマネジメントコンソールを見てみましょう。

Passkeyを有効にするには、選択ベースのサインインのオプションから、Passkeyを使用可能にする必要があるようです。

image.png
image.png

サイドバーの認証方法から、Passkeyの利用を必須にするか、任意にするかを設定できます。

image.png

今回は優先を設定しておきます。
ドメインは、Cognitoのカスタムドメインを設定していることを前提に、カスタムドメインを選択しておきます。

image.png

Navigate to the App clients menu and choose an app client or create a new one. Select Edit and under Authentication flows, choose Select an authentication type at sign-in: ALLOW_USER_AUTH.

アプリケーションクライアントで、ALLOW_USER_AUTH の認証フローを許可するように設定します。

具体的な手順は、サイドバーのアプリケーションクライアントから、アプリケーションクライアントを選択します。

image.png

編集します。

image.png

認証フローに、 選択ベースのサインイン:ALLOW_USER_AUTH が許可されていればOKです。

image.png

これで、Passkeyを使ったログインするためのCognitoの設定ができました。

Passkeyの登録

Cognito側の設定が完了したので、ユーザーのPasskeyを登録してみましょう。

マネージドログイン画面で新規ユーザーのサインアップをすると、サインアップ完了後にPasskeyの登録画面が表示されます。

image.png

MacでGoogle Chromeを使っている場合、こんな感じでPasskeyの保存場所を選択する画面が表示されます。

image.png

Passkeyの登録が完了すると、次回ログイン時にPasskeyでログインできるようになります。

サインアップ時にPasskeyを登録せず、後から登録も可能です。

その場合は、マネージドログイン画面でサインインした後、以下URLへアクセスすることでPasskeyの登録が可能です。

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

登録したPasskeyの確認

登録したPasskeyの情報も確認してみます。

2024/11/27時点では、マネジメントコンソールからPasskeyの情報を確認する方法は見つかりませんでした。

APIを確認してみると、それっぽいAPIが増えています。

  • DeleteWebAuthnCredential
  • ListWebAuthnCredentials

参考:

AWS CLIも、 v2.22.4 でこれらのAPIに対応しているようです。

aws cognito-idp list-web-authn-credentials コマンドを使って、登録したPasskeyの情報を確認してみます。

aws cognito-idp list-web-authn-credentials コマンドの実行には、スコープに aws.cognito.signin.user.admin を持っているユーザーのアクセストークンが必要です。
アプリケーションクライアントのマネージドログインページの設定のOpenID Connectのスコープで許可していることを確認してください。

image.png

何らかの方法でアクセストークンを取得して次のコマンドを実行すると、登録したPasskeyの情報が確認できます。

$ export ACCESS_TOKEN=<<アクセストークン>>
$ aws cognito-idp list-web-authn-credentials --access-token ${ACCESS_TOKEN}
{
    "Credentials": [
        {
            "CredentialId": "ge6yIN1nCTyM_qKmkcuoow",
            "FriendlyCredentialName": "1Password",
            "RelyingPartyId": "<<Cognitoのカスタムドメイン>>",
            "AuthenticatorAttachment": "platform",
            "AuthenticatorTransports": [
                "hybrid",
                "internal"
            ],
            "CreatedAt": "2024-11-27T18:40:36.983000+09:00"
        }
    ]
}

delete-web-authn-credential を使えば、このPasskeyの登録情報を削除できます。

$ export ACCESS_TOKEN=<<アクセストークン>>
$ export CREDENTIAL_ID=<<先ほど表示したCredentialId>>
$ aws cognito-idp delete-web-authn-credential \
  --access-token ${ACCESS_TOKEN} \
  --credential-id ${CREDENTIAL_ID}

Passkey情報を削除して再度ログインを試みると、当然Passkeyのログインはできなくなり、パスワードでのログインを促されるようになります。

image.png

こんな感じで、Passkeyの登録情報を確認・削除できます。

おわりに

Cognitoのマネージドログイン機能にPasskeyが導入され、Passkeyが簡単に取り扱えるようになりました!

設定はちょっとややこしいところもありますが、その設定さえ済ませてしまえば、簡単にPasskeyを使ってログインできるようになります。
ぜひご活用ください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.