COSIMO AI 完全版認証フロー - 外部メール認証を含む完全体 Phase 2-3: 認証システム
開始
ログイン画面表示
アクション 選択?
新規登録フロー 新規登録 新規登録フォーム メールアドレス パスワード入力 入力検証OK? エラー表示 Firebase Auth createUser 登録成功?
エラー: 既存メール ログインへ誘導
sendEmail Verification() 確認メール送信画面
外部システム ユーザーの メールボックス 認証メール受信 リンククリック ブラウザ起動 Firebase Auth メール認証完了 認証完了画面
ログインフロー ログイン ログインフォーム メールアドレス パスワード入力 入力検証OK? エラー表示 Firebase Auth signIn 認証成功?
認証失敗処理 エラー種別 ユーザー未登録: 新規登録へ誘導 パスワード間違い: PW再設定へ
メール 確認済み?
メール未確認 警告表示 再送信オプション sendEmailVerification() メール再送信画面
外部システム ユーザーの メールボックス 認証メール受信 リンククリック ブラウザ起動 Firebase Auth メール認証完了 再度ログイン画面へ
パスワード再設定フロー PW忘れ PW再設定画面 メール入力 Firebase Auth sendPasswordReset 送信完了画面
外部システム ユーザーの メールボックス PWリセットメール リンククリック ブラウザ起動 新PW設定画面 PW一致 確認OK? PW更新完了
セッション保存 ダッシュボード
完了
メール送信 外部アクション
メール送信 外部アクション 認証後再ログイン
メール送信 外部アクション
利用制限管理フロー(詳細版) Phase 3&5: 利用制限・レポート生成・決済
レポート生成ボタンクリック
ダッシュボード表示 利用可能回数: UsageCounter(表示) 最終リセット: {data} 表示リセット日: {nextResetDate} [コンサルティングのお問い合わせボタン]
レポート生成ボタンクリック 利用回数チェック開始
Firestoreから ユーザー情報取得 plan, lifetimeUsageCount, monthlyUsageCount, lastResetDate
ユーザーの プランは? free normal
無料トライアル 月間3回まで(累計) lifetimeUsageCount確認 リセットなし
ノーマルプラン ¥11,000/月(税込) 月間15回まで monthlyUsageCount確認
Stripe Webhook受信 invoice.payment_succeeded 毎月1日(次の満額決済)
月別リセット実行 monthlyUsageCount = 0 lastResetDate = time()
月次リセット通知メール 新しい月の利用開始のお知らせ 「今月も15回ご利用いただけます」 [フィードバック入力欄] ※将来実装:気づいた点を記入可能
lastResetDateチェック 月がまたいでいる場合リセット
累計利用回数 < 3回? Yes No
月間利用回数 < 15回? Yes No
生成可能 残り: {3 - count}回 満回まで減る
生成不可 無料回数を使い切りました アップグレードが必要 ノーマルプランに申し込む
生成可能 残り: {15 - count}回 満回まで減る
月間上限到達 今月は利用可能回数に達しました 翌月まで待機 または コンサルティングのお問い合わせ
コンサルティングのお問い合わせ お名前 * 会社名 * 部署名 メールアドレス * ご相談内容 * 事業承継の為のAIナレッジマネジメントシステム構築
利用 可能? Yes No
利用制限エラー画面 利用制限に達しました アップグレード または コンサルティングのお問い合わせ
AI APIの呼び出し レポート生成実行 (OpenAI API / Claude API)
利用回数更新 free: lifetimeUsageCount++ normal: monthlyUsageCount++ Firestore更新(トランザクション)
レポート表示 残り使用回数も表示(最新情報)
いつでもアクセス可能
完全版認証フローの各要素 画面/状態: システムの画面や状態を表す 分岐判定: 条件による処理の分岐 ユーザー入力: ユーザーがデータを入力する画面 システム処理: Firebase Auth等のバックエンド処理 エラー処理: エラー表示や例外処理 メール関連: メール送信・受信に関する処理 PW再設定: パスワードリセット関連の処理 外部システム: ユーザーのメールボックス(システム外)
システムアーキテクチャ
フロントエンド (React) Pages - Dashboard - Plans / Login/Register - Terms / Privacy / Tokushoho Features - Reports / Auth - Subscription - CMS / Admin Services - API連携 - 状態管理 - ルーティング
バックエンド (Firebase Functions) stripeWebhook 決済イベント処理 月次リセット処理 isNewMonth() チェック
外部システム連携
Firebase (外部) Authentication Firestore Database users, reports, usage_logs Hosting
Stripe (外部) Checkout Session Webhook Events invoice.payment_succeeded Customer Portal
AI API (外部) OpenAI API Claude API (予定) レポート生成処理
メール (外部) 認証メール 月次リセット 通知 フィードバック 収集(将来)
セキュリティ設計 • Firebase Authentication による認証 • Firestore セキュリティルールによるアクセス制御 • APIキーの環境変数管理 • Stripe Webhook署名検証
Phase 5: 決済フロー(Stripe統合)
プラン選択画面 無料トライアル → ノーマルプランへアップグレード
createCheckoutSession(priceId) Firebase Functions呼び出し
Stripeページへリダイレクト カード情報入力・決済
決済 成功?
決済成功 Stripe Webhook受信 checkout.session.completed subscription作成 月間利用回数リセット
決済失敗 エラー表示 プラン選択画面へ戻る カスタマーサポート案内
月次更新処理 invoice.payment_succeeded 自動更新完了 月間利用回数リセット 通知メール送信
サブスクリプション管理 Customer Portal 決済方法変更 請求書ダウンロード プランキャンセル
アップグレード促進からの遷移
決済完了後ダッシュボードへ
Phase 実装状況 Phase 1: ディレクトリ構造整備 ✓ Phase 2: 認証機能実装 ✓ Phase 3: メール認証フロー+拡張機能 ✓ - メール認証、パスワード強度表示、法的ページ、コンサルティングプラン Phase 4: レポート生成機能(AI API統合)△ - 現在3秒待機のダミー実装 Phase 5: 決済機能(Stripe統合)△ -
Webhook処理、月次リセット機能実装予定 -->