Skip to content

testlog.md

Latest commit

 

History

History
214 lines (148 loc) · 9.08 KB

testlog.md

File metadata and controls

214 lines (148 loc) · 9.08 KB
Raw

🔷 ログイン機能 仕様書

  1. 処理概要 本画面では、ユーザーがメールアドレスとパスワードを入力し、認証を行う。 ログイン処理は AWS Cognito を使用しており、認証に成功した場合は、JWT トークンを取得してセッション情報として保持する。 ログイン後、ユーザーは認証された状態でアプリ内の保護されたページに遷移する。

  2. 処理フロー bash 复制 编辑 ① ユーザーがメールアドレス・パスワードを入力
    　　　↓
    ② フロントエンド（React）が Cognito の signIn API を呼び出す
    　　　↓
    ③ Cognito にて認証処理（ユーザー情報・パスワードの確認）
    　　　↓
    ④ 認証成功 → JWT トークンを取得し、ローカルストレージに保存
    　　　↓
    ⑤ 保護された画面に遷移（例：/dashboard）

※ 認証失敗 → エラー内容を画面に表示（例：パスワード間違い、ユーザー未確認など） （如果你需要，我可以将此流程画成图并附加在后面）

  1. 処理詳細 📌 使用ライブラリ・サービス AWS Cognito（User Pool）

AWS Amplify（JavaScript SDK）

React（ログイン画面）

📌 処理内容 Auth.signIn(email, password) を実行し、Cognito に認証要求を送信。

Cognito から返却された JWT トークン（ID Token, Access Token）を取得。

トークンをローカルストレージに保存し、後続の API 通信時に Authorization ヘッダーに付加。

認証成功時：/dashboard などのログイン後ページにリダイレクト。

認証失敗時：画面上にエラー内容（例：「ユーザーが存在しません」「パスワードが間違っています」）を表示。

📌 エラーハンドリング エラー種別 対応方法 パスワード間違い 「パスワードが正しくありません」と表示 ユーザー未確認 「メールアドレスの確認が必要です」と表示 ユーザーが存在しない 「該当するユーザーが見つかりません」と表示 その他ネットワークエラー等 「通信エラーが発生しました」と表示

🔷 ログイン画面 仕様書

1. 処理概要

本画面は、既存のユーザーがメールアドレスおよびパスワードを入力し、本人認証を行うためのログイン画面である。
認証には AWS Cognito（ユーザープール）を利用し、認証後は JWT トークンを取得して保持する。
ログインに成功した場合、ユーザーはアプリケーションの保護されたページに遷移可能となる。

2. 処理フロー

① ユーザーがメールアドレス・パスワードを入力  
↓  
② 「ログイン」ボタン押下  
↓  
③ React（フロントエンド）が Cognito の signIn API を呼び出す  
↓  
④ 認証成功 → JWT トークンを受け取り、ローカルストレージに保存  
　→ 認証後ページ（例：ダッシュボード）へ遷移  
　→ 必要に応じてユーザー情報を取得し表示  
↓  
⑤ 認証失敗 → エラーメッセージを画面に表示（再入力可能）

3. 処理詳細

🔹 使用技術・サービス

項目 内容
フロントエンド React（JavaScript）
認証サービス AWS Cognito ユーザープール
状態管理 JWT トークン（localStorage 保存）
通信ライブラリ AWS Amplify / fetch API

🔹 入力項目（バリデーション含む）

フィールド名 種別 必須 バリデーション
メールアドレス text 〇 メール形式（@ 含む、有効なドメイン）
パスワード password 〇 最低 8 文字以上、大文字・小文字・数字含む

🔹 成功時の動作

  • JWT トークンを localStorage に保存（ID Token, Access Token）
  • 認証後のトップページ（例：/dashboard）へリダイレクト
  • 認証済みユーザーとして以降の API 呼び出しが可能（Authorization: Bearer）

🔹 失敗時の動作（エラー制御）

エラー種別 画面表示例
ユーザーが存在しない 「このメールアドレスのアカウントは存在しません」
パスワード不一致 「パスワードが正しくありません」
メール未確認 「メールアドレスの確認が完了していません」
一時的な通信エラー 「現在ログインできません。時間を置いて再試行してください」

🔹 セキュリティ対応

  • トークンは httpOnly cookie ではなく localStorage に保存（→ XSS 対策検討必要）
  • ログインフォームに対するブルートフォース攻撃防止（Cognito 側に回数制限あり）
  • パスワード入力欄は type="password"、マスク表示

🔹 その他仕様

  • ログインに連続失敗した場合、アカウントが一時ロックされる（Cognito の設定による）
  • 「パスワードを忘れた場合」のリンクを設置（次期実装予定）

4. 画面イメージ（参考）

項目 内容
タイトル ログイン
入力フォーム メールアドレス／パスワード
ボタン 「ログイン」
補助リンク 「パスワードを忘れた方はこちら」（今後）

🔷 ログイン機能 仕様書（テンプレート準拠）

1. 処理概要

本画面では、既存のユーザーがメールアドレスおよびパスワードを入力し、本人認証を行う。
認証には AWS Cognito（ユーザープール）を使用し、認証に成功した場合は JWT トークンを取得し、ログイン状態を確立する。
ログイン後、ユーザーは保護されたページに遷移し、認証済みの状態でアプリケーションを利用可能となる。

2. 処理フロー（処理の流れ）

① ユーザーがメールアドレス・パスワードを入力  
↓  
② 「ログイン」ボタン押下  
↓  
③ React（フロントエンド）が Cognito の signIn API を呼び出す  
↓  
④ Cognito にて認証処理（メール・パスワード確認）  
↓  
┌────────── 成功 ──────────┐       ┌────────── 失敗 ──────────┐
↓                                      ↓
JWT トークンを取得                     エラーメッセージ返却
↓                                      ↓
ローカルストレージに保存               エラー内容を画面に表示
↓
保護されたページへ遷移（例：/dashboard）

3. 処理詳細

🔹 通信・動作内容

  • ユーザー入力後、Amplify.Auth.signIn(email, password) を実行。
  • AWS Cognito ユーザープールに対して認証要求を送信。
  • 認証成功時：JWT（ID Token、Access Token）を取得し、localStorage に保存。
  • トークンは今後の API 通信時の Authorization ヘッダーに付加される。

🔹 成功時のアクション

  • ログイン完了後、/dashboard などの認証済み画面に遷移。
  • 必要に応じてユーザー情報（ユーザー名、権限など）を取得して画面に表示。

🔹 失敗時のアクション

エラー内容 想定される表示内容
パスワード間違い 「パスワードが正しくありません」
ユーザー未確認 「メールアドレスの確認が必要です」
ユーザーが存在しない 「該当するユーザーが見つかりません」
ネットワークエラー 「通信エラーが発生しました。時間をおいて再試行してください」

本仕様は、AWS Cognito を用いた標準的なログイン処理に準拠しており、セキュリティ対策・エラーハンドリングを含めたフロー設計を行っています。