「ヘッダだけ読むアプリ に、段階的に本物の認証 を被せていく」 を end-to-end で体験するハンズオン。
対話形式 (先輩 / 後輩) + Mermaid 図 + 実際に叩いた curl ログ で、なぜそうするか / どこを触るかを追える。
flowchart LR
P1[Part 1<br/>mock auth<br/>ローカル localhost]
P2[Part 2<br/>本物 auth-proxy<br/>独自 DB / Magic Link / Passkey / Invite]
P3[Part 3<br/>Google OIDC<br/>+ Cloudflare Tunnel<br/>+ 自分のドメイン]
P1 --> P2 --> P3
style P1 fill:#e0e7ff
style P2 fill:#dbeafe
style P3 fill:#fde68a
| Part | 目的 | 外部依存 | 所要時間 |
|---|---|---|---|
| Part 1 | 配管の理解 | なし | 30 分 |
| Part 2 | 認証 backend の動作理解 (3 方式比較) | Docker (Postgres) | 1 時間 |
| Part 3 | 本番想定の公開構成 | ドメイン / Cloudflare / GCP | 半日 |
mock の認証 backend で、配管がどう繋がっているか を理解する。
| # | ファイル | 内容 |
|---|---|---|
| 00 | 00-現状確認.md | 認証なしで動いてる todo-sample を触る |
| 01 | 01-アーキテクチャ決定.md | proxy パターン / ヘッダ信頼モデル |
| 02 | 02-todo-sample書き換え.md | TodoServlet を 2 行直す |
| 03 | 03-volta-auth-proxy起動.md | mock_auth で代用起動 |
| 04 | 04-volta-gateway設定.md | YAML を書いて gateway を立てる |
| 05 | 05-疎通確認.md | 3 プロセスで end-to-end curl |
| 06 | 06-振り返り.md | やったこと / Part 2 への橋渡し |
外部 IdP (Google など) なし で、volta-auth-proxy 本体を立てて 3 方式の認証を試す。 今日やる。
flowchart LR
U[Browser/curl] --> GW[volta-gateway :28888]
GW --> AP[volta-auth-proxy :27070<br/>DEV_MODE=true]
GW --> APP[todo-sample :27743]
AP --> PG[(PostgreSQL<br/>:25432<br/>dev 独立)]
style AP fill:#fef3c7
style PG fill:#fef3c7
| # | ファイル | 内容 |
|---|---|---|
| 10 | 10-Part2はじめに.md | 3 認証方式の比較 / DEV_MODE / 「signup 画面が無い」設計 |
| 11 | 11-本物auth-proxy起動.md | Postgres 起動 / JWT 鍵生成 / .env / 起動 / healthz |
| 12 | 12-gateway-todo連携.md | gateway を本物 auth-proxy に向ける |
| 13 | 13-Magic-Link認証.md | DEV_MODE で curl → リンク取得 → ログイン |
| 14 | 14-Passkey認証.md | /login ページから WebAuthn 登録 → ログイン |
| 15 | 15-Invite認証.md | admin が invitation 作成 → 招待リンク踏む |
| 16 | 16-Part2振り返り.md | 3 方式比較表 / Part 3 への橋渡し |
| 17 | 17-docker-compose化.md | 手起動の 4 プロセスを docker compose up 一発に。console / mailpit も追加 |
自分のドメイン + Cloudflare Tunnel + 本物の Google OAuth で世界に公開する。
flowchart LR
U[Internet User] -->|HTTPS| CF[Cloudflare<br/>edge / TLS]
CF -->|cloudflared tunnel| H[自宅マシン]
H --> GW[gateway :28888]
GW --> AP[auth-proxy :27070]
GW --> APP[todo :27743]
AP -.->|OIDC| G[Google]
style CF fill:#fde68a
style H fill:#dbeafe
| # | ファイル | 内容 | 所要時間 |
|---|---|---|---|
| 20 | 20-Part3はじめに.md | 全体構成と参加者がやることリスト | 読むだけ |
| 21 | 21-ドメイン取得.md | ドメインを買う / 既に持ってるなら次へ | 10 分 〜 |
| 22 | 22-Cloudflare登録.md | Cloudflare アカウント + DNS 委任 | 15 分 |
| 23 | 23-cloudflared-tunnel.md | cloudflared インストール + tunnel 作成 | 20 分 |
| 24 | 24-GCP-OAuth作成.md | Google Cloud で OAuth クライアント作成 | 10 分 |
| 25 | 25-volta-auth-proxy起動.md | 本番想定の設定 (固定 redirect_uri) | 30 分 |
| 26 | 26-volta-gateway公開設定.md | ドメイン routing + CF tunnel と連携 | 15 分 |
| 27 | 27-Google-Login疎通.md | ブラウザで Google ログイン → todo 作成 | 10 分 |
| 28 | 28-マルチユーザ確認.md | 別アカウントでテナント分離を実証 | 10 分 |
| 29 | 29-本番運用に向けた残課題.md | RBAC / DB バックアップ / 監視 | 読むだけ |
設定テンプレは part3/ (env / volta-config / gateway / cloudflared)。起動は Part 2 の
compose に override を重ねる:
docker compose -f docker-compose.yml -f docker-compose.part3.yml up --build -d後輩「全部やるとどれくらいかかります?」
先輩「Part 1 は 30 分、Part 2 は 1 時間、Part 3 は 半日コース。」
後輩「Part 1 飛ばしていいですか? 早く本物動かしたい」
先輩「ダメ。Part 1 で『ヘッダが流れる仕組み』を体で理解しないと、 Part 2 以降で session cookie のドメイン設定ミスとかで詰む。30 分の投資、リターン大。」
- マシン: Linux / macOS / WSL2
- ターミナル + テキストエディタ
- Docker (Part 2 で PostgreSQL)
- ブラウザ (Passkey 章はモダンブラウザ必須)
- (Part 3 のみ) クレジットカード + Google アカウント
docker-compose.yml は auth-integration の 兄弟ディレクトリ を build context に
している (../volta-gateway など)。まず足りない repo を兄弟として clone する:
./setup.sh # ① 4 repo を兄弟に clone (冪等)
./dev/gen-dev-env.sh # ② JWT 鍵 + dev/auth-proxy-dev.env を生成 (Part 2 用。冪等)
docker compose up --build # ③ 起動 → http://localhost:28888/②③ は Part 2 以降。Part 1 (mock) は ① も ② も不要。 docker-compose で 13〜15 章の curl を叩くときは
:27070→:28888に読み替え (auth-proxy は非公開、入口は gateway だけ。詳細は 17 章)。
出来上がるレイアウト:
auth-study/ ← 任意の親ディレクトリ
├── auth-integration/ ← この repo (手順 + docker-compose)
├── todo-sample/ ← 対象アプリ (Java/Jetty)
├── volta-gateway/ ← 唯一の入口 (Rust)
├── volta-auth-proxy/ ← 認証 backend (Java)
└── volta-auth-console/ ← admin SPA (/console)
Part 1 (mock) は clone 不要。Part 2 以降で上記が要る。
- 90-起動方法と品質調査メモ.md — docker-compose の起動手順 + ログイン画面の品質調査 (WebAuthn origin / Magic Link フォーム / パスキー導線) と修正内容
- 91-認証フロー詳細図.md — 認証フローを phase/state 別に分割した詳細 Mermaid (「○○が empty だから○○が出ない」レベルの診断フローチャート)
todo-sample/— 本ハンズオンの対象アプリ (Java/Jetty)volta-gateway/— Rust 製リバースプロキシvolta-auth-proxy/— 認証 backend (Java)volta-auth-console/— admin SPA (/console)