【ITニュース解説】Adding a "Last Used" Badge to Your Website Login Page

ウェブサイトのログインページで複数の認証方法が提供されている場合、ユーザーは次にログインしようとしたときに、前回どの方法でログインしたかを思い出せないという問題に直面することがある。たとえば、Googleアカウントで登録したのか、それともメールアドレスとパスワードで登録したのか、といった混乱が生じやすい。このような小さなストレスは、ログインの失敗、パスワードのリセット、さらにはユーザーがそのウェブサービスを利用しなくなる原因にもなりかねない。

この問題を解決するため、「Last Used（最後に使用）」というバッジをログインページに追加することが有効な手段となる。これは、ユーザーが前回利用した認証方法を視覚的に示し、ログインの際の迷いを解消するための工夫だ。このバッジの実装は、以下の3つの主要なステップで構成される。まず、ユーザーが最後に利用した認証方法の情報をブラウザの「ローカルストレージ」に保存する。次に、この情報をもとに「Last Used」バッジの表示部分を作成する。最後に、作成したバッジをログインページ上の適切な位置に配置する。この記事では、Next.jsというフレームワークを例に挙げて説明するが、基本的な考え方は他のどのようなフロントエンド技術を使っても応用可能だ。

最初のステップとして、ログインコンポーネントを設定する。ここでは、メールアドレスとパスワードによるログイン、そしてGoogleアカウントによるログインといった複数の認証オプションを想定する。ページが最初に表示されたときには、メールアドレスとパスワードの入力欄は表示せず、代わりに「メールで続行」のようなボタンを配置する構成が一般的だ。このボタンがクリックされると、他の認証方法のボタンが隠れ、メールアドレスとパスワードの入力フォームが表示されるようにする。

このログインコンポーネントでは、ブラウザが初めてロードされたとき、またはコンポーネントが画面に表示されたときに一度だけ、ローカルストレージに保存されている最後の認証方法の情報を読み込む処理が必要だ。これは、useEffectという機能を使って実現できる。読み込んだ情報はuseStateという機能でコンポーネントの状態として保持し、その状態に応じて「Last Used」バッジを表示するかどうかを制御する。たとえば、ローカルストレージに「EMAIL」と保存されていれば「メールで続行」ボタンの横に、もし「GOOGLE」と保存されていれば「Googleで続行」ボタンの横にバッジが表示されるようにする。

次に、この「Last Used」バッジそのものを作成する。これは、例えば「Last used」というテキストを表示する小さな四角形のコンポーネントとして実装できる。デザインは自由だが、ユーザーにとって分かりやすく、他の要素の邪魔にならないように配置することが重要だ。一般的には、関連する認証ボタンの右上などに小さく表示させ、相対的な位置指定や絶対的な位置指定といったCSSの機能を使って実現する。これにより、ユーザーは一目で前回のログイン方法を識別できる。

そして最も重要なステップとして、認証方法を追跡する仕組みを実装する。これは、ユーザーが実際にログインに成功したときに、その認証方法をローカルストレージに保存する処理を指す。例えば、ユーザーがメールアドレスとパスワードでログインフォームを送信し、認証が成功した場合、saveLoginMethod('EMAIL')という関数を呼び出してローカルストレージに「EMAIL」という値を保存する。同様に、Googleアカウントでログインが成功した場合は、saveLoginMethod('GOOGLE')を呼び出して「GOOGLE」という値を保存する。このsaveLoginMethod関数は、localStorage.setItem(キー名, 値)という命令を使って、指定したキー（例: _app_last_login_method）に対応する値をローカルストレージに書き込む。これにより、次回ログインページを訪れたときに、この保存された情報をもとに「Last Used」バッジを表示できるようになる。

特にOAuth（Open Authorization）を利用した認証方法、例えばGoogleログインなどでは、認証プロセス中にウェブページが別のURLにリダイレクトされることがあるため、認証方法の追跡が少し複雑になる場合がある。クライアントサイドで完結するOAuthフローの場合、リダイレクトが始まる前にsaveLoginMethod('GOOGLE')を呼び出して情報を保存しておくことが可能だ。しかし、サーバーサイドでのコールバックを伴うOAuthフローの場合、サーバー側で認証が完了した後に、ユーザーをダッシュボードなどのページにリダイレクトする際に、URLのパラメータとしてログイン方法の情報を含める方法がある。たとえば、/dashboard?login_method=GOOGLEのようにURLに情報を付加し、リダイレクト先のページでこのURLパラメータを読み取り、ローカルストレージに保存する。保存が完了したら、URLからそのパラメータを削除して、URLをクリーンな状態に戻す処理も重要だ。これは、URLSearchParamsなどの機能を使って実現できる。

この「Last Used」バッジの実装にあたっては、いくつかの重要な考慮事項がある。 まずセキュリティについてだが、ローカルストレージには認証方法の種類（例: 'EMAIL', 'GOOGLE'）のみを保存し、ユーザー名やパスワードといった機密性の高い情報は絶対に保存してはいけない。もし、より厳格なセキュリティが必要なアプリケーションであれば、ローカルストレージよりも有効期間の短いsessionStorageを使うか、サーバーからのhttpOnlyクッキーを利用するなどの方法も検討すべきである。 次にプライバシーだが、ユーザーがローカルストレージにデータが保存されていることを明確に認識できるように、プライバシーポリシーなどで説明を加えることが望ましい。また、ユーザーがいつでもこの設定をクリアできるようなオプションを提供することも、ユーザーフレンドリーな設計と言える。 最後にアクセシビリティも重要だ。視覚的なバッジがスクリーンリーダーなどの支援技術の邪魔にならないように注意し、キーボード操作だけでログインプロセスが完結できることを確認する。必要に応じて、ARIAラベルなどのアクセシビリティ機能を活用することも検討すべきだ。

このように、「Last Used」バッジの追加は、一見すると小さな改善に思えるかもしれないが、ユーザー体験を劇的に向上させる効果が期待できる。ログイン時の摩擦を減らし、直感的な操作を促すことで、ユーザーのエンゲージメントと定着率を高めることにつながるだろう。実装自体は比較的シンプルで、最小限のコード変更で大きな効果が得られるため、多要素認証を提供するウェブサイトにとって、このような細やかな気配りは今後のウェブ開発においてますます重要になっていくと考えられる。