Portfolioこの記事について
ヘッドレスECでは、フロントエンドとバックエンドが分離しているため、認証の仕組みが複雑になります。本プロジェクトではパスワードレス認証を採用し、顧客体験とセキュリティの両立を図りました。
なぜパスワードレスなのか
パスワード認証の問題点
従来のパスワード認証には、多くの課題があります。
| 問題 | 具体的な影響 |
|---|---|
| パスワード漏洩リスク | 他サービスとの使い回しによる被害拡大 |
| 管理負担 | ユーザーが複雑なパスワードを覚えられない |
| フィッシング攻撃 | 偽サイトでパスワードを盗まれる |
| リセット対応 | 忘れた際のサポート工数 |
| ブルートフォース攻撃 | 総当たり攻撃への対策が必要 |
パスワード漏洩リスク
具体的な影響他サービスとの使い回しによる被害拡大
管理負担
具体的な影響ユーザーが複雑なパスワードを覚えられない
フィッシング攻撃
具体的な影響偽サイトでパスワードを盗まれる
リセット対応
具体的な影響忘れた際のサポート工数
ブルートフォース攻撃
具体的な影響総当たり攻撃への対策が必要
パスワードレス認証のメリット
| メリット | 詳細 |
|---|---|
| 漏洩リスクの排除 | パスワードがないので漏洩しない |
| ユーザー負担軽減 | パスワードを覚える必要がない |
| フィッシング耐性 | ワンタイムコードは使い捨て |
| サポート工数削減 | パスワードリセット対応が不要 |
| UX向上 | メールアドレスだけでログイン可能 |
漏洩リスクの排除
詳細パスワードがないので漏洩しない
ユーザー負担軽減
詳細パスワードを覚える必要がない
フィッシング耐性
詳細ワンタイムコードは使い捨て
サポート工数削減
詳細パスワードリセット対応が不要
UX向上
詳細メールアドレスだけでログイン可能
認証フローの全体像
ログインの流れ
ログイン要求
顧客がメールアドレスを入力して「ログイン」をクリック
確認コード送信
システムがワンタイムパスワード（6桁の数字）を生成し、メールで送信
コード入力
顧客が受信したコードを画面に入力
コード検証
入力されたコードが正しいか、有効期限内かを検証
セッション発行
検証成功で、認証状態を維持するトークンを発行
認証維持
以降のリクエストはトークンで認証。有効期限切れで再ログイン
システム間の連携
パスワードレス認証の構成
顧客
メール入力、OTP入力、認証済みでアクセス
自社サーバー
OTP生成・検証、セッショントークン発行
メールサーバー
OTPをメールで顧客に送信
セキュリティ対策
不正アクセス防止策
パスワードレス認証を安全に運用するために、以下の対策を実装しています。
| 対策 | 目的 | 具体的な実装 |
|---|---|---|
| 短い有効期限 | OTP漏洩時の被害軽減 | 確認コードは5分間のみ有効 |
| レート制限 | ブルートフォース防止 | 同一IPからの試行回数を制限 |
| 試行回数制限 | 総当たり攻撃防止 | 3回失敗でOTP無効化 |
| トークン更新 | セッションハイジャック防止 | 定期的にトークンを更新 |
| ログ記録 | 不正アクセス検知 | 全ての認証試行を記録 |
短い有効期限
目的OTP漏洩時の被害軽減
具体的な実装確認コードは5分間のみ有効
レート制限
目的ブルートフォース防止
具体的な実装同一IPからの試行回数を制限
試行回数制限
目的総当たり攻撃防止
具体的な実装3回失敗でOTP無効化
トークン更新
目的セッションハイジャック防止
具体的な実装定期的にトークンを更新
ログ記録
目的不正アクセス検知
具体的な実装全ての認証試行を記録
セッション管理の考え方
セッショントークンのライフサイクル
ログイン成功
OTP検証が通り、認証が完了
トークン発行
有効期限7日のセッショントークンを発行
アクセス時に有効期限チェック
有効 → 継続利用 / 期限切れ → 再ログイン要求
ヘッドレス構成での実装ポイント
フロントエンドとバックエンドの分離
ヘッドレス構成では、認証状態の管理に注意が必要です。
ヘッドレス構成での認証
フロントエンド（Next.js等）
ログインUI、トークン保存、認証状態管理、自動ログアウト
バックエンド（API Routes）
OTP生成、OTP検証、トークン発行、Shopify API連携
トークン保存場所: HttpOnly Cookie（推奨）、Secure属性付きで送信、SameSite=Strictで保護
複数の認証方式への対応
お客様の利便性を考え、複数の認証方式に対応しています。
- メールOTP: 標準のパスワードレス認証
- Shopify Customer Account API: Shopifyの認証基盤を活用
- ソーシャルログイン: Google、Apple等との連携（将来対応）
この認証方式がもたらす効果
お客様にとって
- パスワードを覚える必要がない
- メールアドレスだけで簡単ログイン
- セキュリティの不安が軽減
運営側にとって
- パスワードリセット対応が不要
- アカウント乗っ取りリスクの低減
- セキュリティ実装の簡素化