spa-security

このリポジトリは、様々なセキュリティ実装を試すための遊び場です。

前提

• Docker / Docker Compose
• Node.js

このアプリは http://localhost:8080 の Keycloak（realm: demo / client: vue-demo）に依存します（src/lib/oidc/config.ts）。先に Keycloak を起動してください。

セットアップ

1. Keycloak の起動

docker compose up -d

• keycloak/import/ の realm 定義が --import-realm で読み込まれ、realm demo・client vue-demo・ユーザー test が作成されます。
• 初回は Postgres の初期化と realm インポートで 30〜60 秒ほどかかります。docker compose logs -f keycloak に Running the server in development mode が出れば準備完了です。
• 管理コンソール: http://localhost:8080/admin （admin / admin）

2. 依存パッケージのインストール

npm install

3. 開発用コンパイルとホットリロード

npm run dev

ブラウザで http://localhost:5173 を開きます。

注意: ポート 5173 は固定です。vue-demo の redirectUris / webOrigins と config.ts の redirectUri が http://localhost:5173 決め打ちのため、5173 が使用中で Vite が 5174 にフォールバックすると Keycloak が invalid redirect_uri を返して失敗します。

停止

docker compose down

Keycloak の realm 設定を変更したとき

keycloak/import/demo-realm.json を編集しただけでは反映されません。 --import-realm は「同名 realm が既に DB に存在する場合、import をスキップする」ためです。 本構成は Postgres を postgres_data ボリュームで永続化しているので、必ずボリュームごと破棄します。

docker compose down -v   # postgres_data ごと削除
docker compose up -d     # demo-realm.json が再 import される

docker compose restart や down（-v なし）では反映されません。

Keycloak ログイン情報

Keycloak のログインページにリダイレクトされた際は、以下の認証情報を使用してください：

• ユーザー名: test
• パスワード: test