§04-01
Passkey / WebAuthn
生体認証などでパスワードなしにログインする。
パスワードの記憶や入力を不要にし、フィッシングにも強い。ログインの離脱を減らしたいサービスに向く。
実装のポイントnavigator.credentials.get に publicKey オプションを渡して認証する。入力欄に autocomplete=「username webauthn」を付けると自動入力の候補にパスキーが出る。
- ブラウザ API
§04
認証・アカウント
Auth
- Patterns
- 13
- Demos
- 13
§04-03
Magic link
メールに届くリンクを開くだけでログインする。
パスワードを覚えたり管理したりする負担がなくなる。利用頻度が低いサービスや、登録のハードルを下げたい場面に向く。
実装のポイントリンクのトークンは単回使用・短い有効期限にする。送信後は「届かない場合」の再送ボタンとアドレス修正の導線を出す。
- フォーム
- モック
§04-04
OTP (SMS/email)
SMS やメールで届いた 6 桁コードを入力させる。
ログインや重要操作の前に本人確認を挟む。パスワードだけでは不安な場面や、二要素認証の導入時に使う。
実装のポイント1 桁ずつの入力欄は自動フォーカス移動と Backspace での戻りを実装し、貼り付けで 6 桁を分配する。autocomplete=「one-time-code」で SMS の自動入力に対応する。
- フォーム
- キーボード操作
§04-05
TOTP / Authenticator
認証アプリの時間ベースコードで 2 要素認証する。
パスワード漏洩時でもアカウントを守る追加の確認手段になる。SMS に依存せず、オフラインでもコードを得られる。
実装のポイントコードは Unix 時刻を 30 秒で割った値をカウンタとして HMAC-SHA1 から算出する。残り時間はサーバーとの時計ずれを考慮し、前後 1 ステップを許容して検証する。
- タイマー
- モック
§04-06
SSO (SAML/OIDC)
企業の認証基盤でまとめてログインする。
勤務先の ID でログインでき、サービスごとの資格情報を管理しなくてよい。企業導入で、管理者が利用者の出入りを一括管理したいときに必要。
実装のポイントまずメールアドレスを入力させ、ドメインから組織の IdP を判別して SAML または OIDC の認可へリダイレクトする。
- モック
§04-07
ゲストモード / 非ログイン体験
登録せずに主要な機能を試せるようにする。
価値を体験してから登録を判断できるので、入口の離脱を減らせる。試してみないと良さが伝わりにくいツールやエディタで使う。
実装のポイントゲスト中のデータはローカルに保持し、登録時にアカウントへ移行する。保存できない制約は操作の前に明示する。
- 永続化
§04-08
Sign in with Google one-tap
画面上部の小さな案内から一度の操作でログインする。
新規登録やログインの入力を省き、離脱を減らす。アカウント作成の手間が障壁になる閲覧中心のサービスに向く。
実装のポイント公式の Identity Services スクリプトが iframe でプロンプトを描画し、返却された ID トークンをサーバーで検証する。閉じた後は一定期間抑制する。
- モック
§04-09
マルチアカウント切替
複数アカウントをログアウトせずに切り替える。
個人用と仕事用など複数のアカウントを再ログインなしで行き来できる。組織ごとに環境が分かれるサービスで必要になる。
実装のポイント現在のアカウントをトリガーに表示し、メニュー内で選択中にチェックを付ける。切替時はアカウント依存のキャッシュを破棄し、未保存の変更があれば確認する。
- 状態管理
- キーボード操作
§04-11
メアド変更 / 確認
新しいアドレスの確認を経てメールアドレスを変更する。
誤入力や乗っ取りによる連絡手段の喪失を防ぎながら、利用者自身で連絡先を更新できる。ログイン ID がメールのサービスには欠かせない。
実装のポイント確認リンクを踏むまでは旧アドレスを有効なまま保持し、変更後は旧アドレスにも通知を送る。乗っ取り時に元に戻す手段を残しておく。
- フォーム
- モック
§04-13
reCAPTCHA / Turnstile
bot による自動送信をフォームで防ぐ。
登録や問い合わせフォームへのスパム投稿や総当たりを抑える。人間の利用者には負担を掛けずに判定したい場面で使う。
実装のポイントウィジェットが返すトークンをフォームと一緒に送り、サーバー側で検証 API に問い合わせて判定する。クライアントの結果だけで通過させない。
- モック
- 非同期