Portfolioこの記事について
ヘッドレスECでは、フロントエンドとバックエンドが分離しているため、認証の仕組みが複雑になります。本プロジェクトではパスワードレス認証を採用し、顧客体験とセキュリティの両立を図りました。
なぜパスワードレスなのか
パスワード認証の問題点
従来のパスワード認証には、多くの課題があります。
パスワードレス認証のメリット
認証フローの全体像
ログインの流れ
ログイン要求
顧客がメールアドレスを入力して「ログイン」をクリック
確認コード送信
システムがワンタイムパスワード（6桁の数字）を生成し、メールで送信
コード入力
顧客が受信したコードを画面に入力
コード検証
入力されたコードが正しいか、有効期限内かを検証
セッション発行
検証成功で、認証状態を維持するトークンを発行
認証維持
以降のリクエストはトークンで認証。有効期限切れで再ログイン
システム間の連携
パスワードレス認証の構成
顧客
メール入力、OTP入力、認証済みでアクセス
自社サーバー
OTP生成・検証、セッショントークン発行
メールサーバー
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等との連携（将来対応）
この認証方式がもたらす効果
お客様にとって
- パスワードを覚える必要がない
- メールアドレスだけで簡単ログイン
- セキュリティの不安が軽減
運営側にとって
- パスワードリセット対応が不要
- アカウント乗っ取りリスクの低減
- セキュリティ実装の簡素化