ユーザーが設定した時間に、メールでリマインダーをお知らせするアプリです。
reminder-app-demo.mp4
以下で実際の操作を体験いただけます。
username: user
password: user
- リマインダーの一覧表示
- リマインダーの追加
- リマインダーの編集
- リマインダーの更新
| カテゴリ | 技術内容 |
|---|---|
| バックエンド | Java, Spring Boot |
| フロントエンド | JavaScript, React |
| データベース | MySQL |
| インフラ | AWS (S3, CloudFront, Elastic Beanstalk, RDS など) |
| Others | Git, GitHub |
| 操作 | メソッド | URI |
|---|---|---|
| 新規登録 | POST | /auth/register |
| ログイン | POST | /auth/login |
| ログアウト | POST | /auth/logout |
| アクセストークンの再発行 | POST | /auth/token |
| 操作 | メソッド | URI | 認可 |
|---|---|---|---|
| リマインダーの一覧表示 | GET | /reminders | 全てのユーザー（ROLE_ADMIN, ROLE_USER） |
| リマインダーの追加 | POST | /reminders | 全てのユーザー（ROLE_ADMIN, ROLE_USER） |
| リマインダーの編集 | PUT | /reminders/{reminder_id} | 全てのユーザー（ROLE_ADMIN, ROLE_USER） |
| リマインダーの削除 | DELETE | /reminders/{reminder_id} | 全てのユーザー（ROLE_ADMIN, ROLE_USER） |
トークンの設定
| トークン | 有効期限 | 保管場所 |
|---|---|---|
| アクセストークン | 15分 | in-memory |
| リフレッシュトークン | 30日 | Cookie (Http-only) |
ユーザーフロー
- ユーザーがログイン情報を入力し、
POST /auth/loginというエンドポイントにリクエストを送信 - サーバーは、アクセストークンをレスポンスボディに含め、リフレッシュトークンを保存するCookieを
Set-Cookieヘッダーにセットしてクライアントに返却 - クライアント側では、メモリ内にアクセストークンを保管
- アクセストークンを使ってサーバーにリクエストを送信
- ここでアクセストークンの検証に失敗し、
401 Unauthorizedが返された場合は、/auth/token (Cookie: refresh-token=xyz...)というエンドポイントにリフレッシュトークン付きのリクエストを送信することで、新しいアクセストークンを取得 - 取得したアクセストークンを使って失敗したリクエストを再送