§22-01
アクティブセッション一覧 / sign out all
ログイン中の端末を一覧し、個別または一括で終了する。
見覚えのない端末からのログインに気付き、自分で遮断できる。端末を紛失したときや共有端末で使った後の安全確認に効く。
実装のポイント現在の端末を明示し、個別ログアウトと「他の全端末から」を分ける。後者はサーバー側でトークンを失効させ、確認ダイアログを挟む。
- 状態管理
§22
セキュリティ・プライバシー
Security
- Patterns
- 13
- Demos
- 13
§22-02
ログイン履歴 / 不審アクセス通知
ログインの履歴を一覧し、不審なアクセスを知らせる。
いつどこからログインされたかを本人が確認し、見覚えのないアクセスに気付ける。乗っ取りを早期に発見し、被害の前に対処するために置く。
実装のポイント不審判定は新しい IP 帯・国・端末の組み合わせで行い、行のハイライトに加えて「自分ではない」導線からパスワード変更へつなげる。
- 状態管理
§22-03
データ export (GDPR/個情法)
自分のデータを一括で ZIP として受け取れる。
利用者が自分のデータを持ち出せる権利に応える。退会や他サービスへの移行の前に求められ、個人情報を扱うサービスでは求められることがある。
実装のポイントエクスポートはジョブとして非同期生成し、完了時にメール通知する。ダウンロードリンクは有効期限付きの署名 URL にする。
- 非同期
- モック
§22-04
アカウント削除フロー (確認多段)
複数の確認を経て削除し、猶予期間内なら戻せる。
退会の意思を確かめつつ、誤操作や気変わりから戻れる余地を残す。削除後の問い合わせや復旧依頼が多いサービスに効く。
実装のポイント確認文字列の入力で誤操作を防ぎ、論理削除して猶予期間を設ける。復元方法と完全消去の日時を完了画面とメールで明示する。
- フォーム
- 状態管理
§22-05
Cookie 同意バナー (GDPR)
Cookie の利用について同意・拒否・設定を求める。
法規制に沿って追跡の可否を利用者に選ばせる。EU 向けなど同意が義務となる地域にサービスを提供する場合に必要。
実装のポイント「拒否」を「すべて許可」と同じ階層・同じ強さのボタンで出し、同意前は分析系スクリプトを読み込まない。選択は保存して再表示を避ける。
- 永続化
- 状態管理
§22-06
公開範囲設定 (public/friends/private)
投稿ごとに公開範囲を全体・友達・自分だけから選ぶ。
投稿を誰に見せるかを都度選べ、意図しない相手への公開を防ぐ。知人向けと不特定多数向けの投稿が混ざる SNS で必要になる。
実装のポイント公開範囲は投稿前に現在値をアイコンと文言で常時表示し、前回の選択を既定値にする。範囲を広げる変更には一言の確認を挟む。
- 状態管理
§22-07
二段階認証 setup wizard
QR コードと確認コードで二段階認証を順に設定する。
手順を一つずつ案内するので、認証アプリに慣れていない人でも設定を完了できる。アカウントの重要度が高いサービスの安全設定に使う。
実装のポイントQR が読めない人向けに秘密鍵の文字列も表示し、テストコードの検証に成功するまで有効化しない。完了後にバックアップコードへ誘導する。
- フォーム
- 状態管理
§22-08
バックアップコード DL
認証端末を失ったときの予備コードを保存させる。
二要素認証の端末紛失でログインできなくなる事態に備える。認証を強化した結果、締め出しの問い合わせが増える問題に効く。
実装のポイントコードは一度だけ表示し、DL・コピー・印刷の手段を揃える。再生成で旧コードが無効になることを確認ダイアログで明示する。
- 状態管理
§22-09
Trusted device 一覧
2 要素認証を省略できる信頼済み端末を一覧で管理する。
普段使う端末では毎回のコード入力を省きつつ、記憶させた端末を自分で見直して外せる。2 要素認証の利便性と安全性の折り合いを取る。
実装のポイント信頼済み端末は有効期限付きのトークンで記憶し、一覧から個別に失効できるようにする。共有端末への注意はチェック時に出す。
- 永続化
- フォーム
§22-10
Permissions matrix (連携アプリ)
連携アプリに与えた権限を一覧し、解除できる。
どのアプリに何の権限を渡しているかを見直し、不要なものを切れる。使わなくなった連携が残り続けるのを防ぎ、情報漏えいの範囲を狭める。
実装のポイント連携アプリごとに付与スコープを平易な文言で並べ、広い権限や長期間未使用のアプリを強調する。解除は確認を挟み、即時にトークンを失効させる。
- 状態管理
§22-11
Audit log (個人)
自分のアカウントで行われた操作を時系列に表示する。
身に覚えのないログインや変更に自分で気付ける。アカウント乗っ取りの早期発見や、安心感を提供したいサービスで用意する。
実装のポイント個人向けは自分の操作だけを時系列で出し、操作名は内部 ID ではなく平易な文言に直す。IP や端末も添えて身に覚えのない操作を見つけやすくする。
デモはAudit logと共通です。
- 状態管理
§22-13
クリップボードコピー (一定時間で消去)
コピーした値を一定時間後にクリップボードから消す。
パスワードやトークンをコピーした後、他のアプリへ誤って貼り付ける事故を防ぐ。秘密情報を扱う管理画面で使う。
実装のポイント一定時間後に 空文字の writeText で消去するが、他のアプリで別の内容をコピーし直していないかを読み取りで確認してから消す。
- タイマー
- ブラウザ API