Promiseがresolveされることはないので、ページロードの時点では上記部分までのコードが走ることになります。値の設定これは厳密には「ページロード時処理」ではないのですが、上記のコードをページロード時に実行しただけだと、ブラウザはパスキー候補をユーザーに表示してくれません。input要素にも改修が必要です。設定されているフィールドにパスキー候補を表示します。追加してあげる必要があります。webauthn"/>これで、ユーザーがページを開いた際に、利用可能なパスキー候補が表示されるようになりました。autofillが有効なログインページでは、主に2通りのケースがあります。authenticatorからのレスポンスが返却されます。このレスポンスをbackendに送信し検証した上で、検証に成功させた場合はログインさせます。表示されたパスキー候補を無視し、普通にemailを入力するこの場合は通常のフォーム送信処理になるので、普通にハンドリングをすればOKです。私達のサービスの場合は、パスワード入力ページにユーザーを誘導します。autofillですが、それだけでは解決できない課題もあります。フィールドにパスキー候補が表示されるようになります。autofillでパスキー候補を表示する術がない」ということになります。「そんなページあるの?」と思うかもしれません。IDには「アカウント確認画面」というページが存在します。これは、マネーフォワードの各サービス(家計簿・会計、etc.)にSSOする際に挟む、ログインするアカウントが正しいかを確認するためのページです。WebAuthnで挙げたような課題を解決できません。autofillが実現しているような「パスキーを利用していることを意識させない体験」を提供したいところです。autofillで「ログイン時のパスキー利用フロー」は改善しましたが、依然解決できていないのが「パスキー登録時のフロー」です。RPの開発側としては、そもそもユーザーにパスキーを登録してもらえないと意味がありません。ようなオプションは存在しないので、必ず以下のようなフローを踏む必要があります。IDのようなIdPにおいて、上記のパスキー登録を行ってもらうタイミングというのは主に「アカウント登録」「ログイン」の2種類しかありません。想像していただくと分かると思うのですが、アカウント登録時やログイン時に余計なページが挟まるのは、ユーザーからすると邪魔でしかないはずです。ユーザーからすると、IdPというのはもともと自身が利用したいサービスを利用するために通らなくてはいけない邪魔な存在、障壁であり、パスキーでログインを可能にすることでその障壁を取り除こうとしているにもかかわらず、その前段階の登録で障壁を増やす必要があるという、本末転倒な状況です。この問題に関しては、以下のような実装を可能にするWebAuthn仕様が出てくることを期待したいです。アカウント登録のパスワード設定時に、「ついでに」パスキーも登録できる(OSパスワードマネージャーなどを利用している場合)パスワードでのログイン時に、「ついでに」パスキーも登録できるこのような実装を可能にすることで、ログイン時だけではなく登録時も含めて、ユーザーにパスキーを意識させる必要がなくなると思っています。autofillリリースとほぼ同じタイミングで、関連する機能をリリースしています。autocompleteをoffにしてしまいます。(恐らく、パスワードマネージャー自身の自動補完とブラウザの自動補完がコンフリクトしないようにするためと思われます)このような条件ではパスキーが利用できなくなることが判明したので、「パスワードマネージャーなどを利用してEmailの自動補完を行った場合、パスワード入力画面を表示することなくそのままログインが完了する」1ステップログインという機能をリリースしました。以下が1ステップログインの流れです。Email入力欄の下に、パスワードマネージャーが持っているパスワード候補が表示されるユーザーが候補をクリックする。autofillと見比べていただくと分かると思うのですが、ユーザーから見た見かけ上のUXはほぼ同じです。autofillを利用したパスキーログイン図らずも上記2パターンのユーザー体験を揃えることができました。このような変更を通して、そもそもユーザーが「今自分がパスワードでログインしたのか、パスキーでログインしたのか」を強く意識しなくても自然とログインが完了するUXを提供していきたいと思っています。注釈デバイスでパスキーを利用するために使える認証手段。APIを利用するサービスのこと。IDがそれに相当する。specにも記載されています。開発チームのMapdu...2021-09-07グループ会社横断でシングルサインオンをできるようにしてみたこんにちは。読者になるこのブログについてはてなブログをはじめよう!moneyforwardDevさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。