feat(ap1): add vanilla SPA PKCE login

2026-07-25 14:09:03 +09:00
parent e2fba41f56
commit c1fae6137c
15 changed files with 951 additions and 13 deletions
@@ -3,31 +3,66 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Keycloak Authentication Patterns</title>
+  <meta name="referrer" content="no-referrer">
+  <title>AP1 · SPA Direct + Resource Server</title>
  <style>
    :root {
      color-scheme: light dark;
      font-family: system-ui, sans-serif;
    }
    body {
-      max-width: 48rem;
-      margin: 8vh auto;
+      max-width: 56rem;
+      margin: 6vh auto;
      padding: 0 1.5rem;
-      line-height: 1.6;
+      line-height: 1.55;
+    }
+    button {
+      margin: 0 0.5rem 0.5rem 0;
+      padding: 0.6rem 0.9rem;
+      cursor: pointer;
+    }
+    code, pre {
+      border-radius: 0.35rem;
+      background: color-mix(in srgb, CanvasText 9%, Canvas);
    }
    code {
-      padding: 0.15rem 0.35rem;
-      border-radius: 0.25rem;
-      background: color-mix(in srgb, CanvasText 10%, Canvas);
+      padding: 0.1rem 0.3rem;
+    }
+    pre {
+      min-height: 8rem;
+      padding: 1rem;
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+    .notice {
+      border-left: 0.3rem solid #e09f3e;
+      padding-left: 1rem;
    }
  </style>
 </head>
 <body>
-  <h1>Keycloak Authentication Patterns</h1>
-  <p>공통 Docker Compose baseline이 실행 중입니다.</p>
-  <p>
-    공개 API는 <code>/api/public</code>, 보호 API는
-    <code>/api/me</code>에서 확인할 수 있습니다.
-  </p>
+  <main>
+    <h1>AP1 · SPA Direct + Resource Server</h1>
+    <p>
+      바닐라 JavaScript SPA가 <code>spa-public</code> client로 Authorization
+      Code + PKCE를 수행하고, access token을 직접 Spring Resource Server에
+      전달합니다.
+    </p>
+    <p class="notice">
+      access/refresh token은 메모리에만 존재합니다. 새로고침하면 사라지는 것이
+      이 패턴의 의도된 보안 경계입니다.
+    </p>
+
+    <section>
+      <button id="login" type="button">Keycloak 로그인</button>
+      <button id="call-api" type="button" disabled>보호 API 호출</button>
+      <button id="pkce-demo" type="button">수동 PKCE 생성</button>
+      <button id="logout" type="button" disabled>로그아웃</button>
+    </section>
+
+    <p id="session-state" data-authenticated="false">세션 확인 중…</p>
+    <pre id="result" aria-live="polite"></pre>
+  </main>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>