Blog株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。IDサービス開発部のyamato(@8ma10s)です。IDという、当社サービス向けのIdPを開発しています。IDにおいて、パスワードを使わずに、生体認証などを利用してログインできる「パスワードレスログイン」という機能をリリースしました。(恐らく日本のサービスで初めて。エンドユーザーの目に触れるサービスという意味では、おそらく世界でも初めて)導入しています。autofillの導入を決めリリースに至ったか、また、リリース後の今後の課題についてご紹介します。passwordless我々がパスワードレス認証を導入したかった理由は色々ありますが、主に以下のようなものです。技術的チャレンジ将来的には「パスワードの完全無効化」なども視野に入れていますが、あくまで直近の目標としては「ユーザーが使いたいサービスにより早くアクセスできるようになればいいな」くらいの気持ちでパスワードレス認証の対応を始めました。WebAuthn後述する課題などもあり、当時は対外的にアナウンスなどはしていなかったのですが、実はパスワードレス認証の実装そのものは2022年11月の時点でユーザー向けにひっそりとリリースしていました。WebAuthnの流れは以下のようなものでした。emailを入力する「ログインする」ボタンを押すと、認証プロンプトが表示されるローカル認証1が完了するとパスキーでログインできる「もうこの時点でパスキーでログインは完成しているのでは?」と思うかもしれません。この初期実装にはいくつか課題がありました。WebAuthnの認証フローは、Emailを入力してログインボタンを押すと、いきなり認証プロンプトが出てきて認証を求められます。UI上のボタンを押すといきなり顔認証や指紋認証を要求される」というUIは、今までのパスワードログインではあまり見なかったUIであり、パスワードからのシームレスな移行を阻害する要因になっていました。呼ぶ前に確認する手段はありません。呼んでしまうことになり、以下のようなプロンプトが出てきてしまいます。ユーザーとしてはパスワード入力に進みたくて送信ボタンを押したのに、邪魔なプロンプトが出てきて、それをキャンセルすることで初めてパスワード入力画面に進めるという非常に分かりにくいUXになってしまいました。RP」としては、以下の2点がパスキー導入における必須要件でした。前述したような課題が存在し、移行がシームレスでなかったり、パスワードを利用しているユーザーのUXを損なってしまうことは、初期実装を進めている時点で既に分かっていたので、初期実装のリリース時に大々的に告知をして利用ユーザー数を増やすことはしませんでした。autofillの実装でした。呼ばれている技術です。Microsoftの3社が「パスキーのサポートを拡大する」という共同声明を出しました。autofillです。機能としては、「利用しているデバイスでログインに利用できるパスキーの候補を、ブラウザの自動補完機能を使って表示する」というものです。文字だと若干分かりづらいので、以下の動画をご覧ください。autofillはいくつか解決できています。WebAuthnにおいては、パスワードでログインする際と劇的に違うUIになってしまい、ユーザーの混乱を招く懸念がありました。autofillを使うと、ログインの流れは以下のようになります。Email入力欄の下に「利用できるパスキー候補」が自動的に表示されるユーザーが候補をクリックすると、認証プロンプトが表示される認証を通ると、ログインが完了するこの流れは、ブラウザなどに標準で搭載されているパスワードマネージャーでパスワードを補完する流れと全く同じです。ユーザーにそもそもパスキーとパスワードの違いを意識させないということが達成できます。WebAuthnでは、「パスキーを登録したデバイスと異なるデバイスからログインを行おうとすると、パスキーではログイン不可能なのにもかかわらず認証プロンプトが表示されてしまう」という問題がありました。autofillは、「デバイスで利用可能なパスキーしか表示されない」という特徴があります。パスキーを利用できるデバイスではパスキーでログインしてもらい、利用できないデバイスでは自然にパスワード入力画面に誘導できるため、より理想に近いUXのパスキーログインを提供できます。実装例パスキーが解決する課題について一通りご紹介したところで、実際のコードの解説をしていきたいと思います。WebAuthnについては、解説記事も既に沢山あるのでここでは触れません。メソッドの返り値をバックエンドで検証するという一連の流れを理解していれば大丈夫かと思います。WebAuthnについて更に詳しく知りたい方は、以下のcodelabsなどが参考になるかと思います。autofill全体の流れまず、全体の流れをシーケンス図で。こちらが、ページロード時に走るフロントエンドのコードサンプルです。}};このシーケンス図及びコードをベースに、順を追って解説していきます。autofillでは多くの処理が「ページのロード時」に行われます。autofillを利用したいページのロード時に走らせることになります。利用できるかのチェックを行います。いう非同期メソッドがあるので、こちらの結果を確認すればOKです3。optionsオブジェクトが必要です。backendにリクエストをします。optionsオブジェクトが返ってきます。credentials.getの呼び出しになってしまい、いきなり認証プロンプトが表示されてしまいます。