Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 donghyeon-ka
|
c1fae6137c |
@@ -4,4 +4,6 @@
|
||||
*.iml
|
||||
|
||||
backend/target/
|
||||
**/node_modules/
|
||||
frontend/dist/
|
||||
build/
|
||||
|
||||
@@ -96,3 +96,17 @@ Keycloak을 잠시 중지하고 export한 뒤 자동으로 다시 올립니다.
|
||||
|
||||
runtime export에는 실제 client secret과 credential hash가 포함될 수 있어
|
||||
gitignored `build/keycloak-export/`에 권한 `0600`으로만 저장됩니다.
|
||||
|
||||
## AP1: SPA Direct + Resource Server
|
||||
|
||||
`develop-keycloak-pattern1`은 vanilla JavaScript SPA가 `spa-public` client로
|
||||
Authorization Code + PKCE S256 로그인을 수행하는 패턴입니다. access/refresh
|
||||
token은 명시적인 in-memory store에만 보관되므로 새로고침하면 사라집니다.
|
||||
|
||||
```bash
|
||||
./scripts/verify-pattern1.sh
|
||||
```
|
||||
|
||||
브라우저에서 `http://localhost:8088`을 열어 로그인한 뒤 보호 API를 호출할 수
|
||||
있습니다. SPA는 `http://localhost:8081/api/me`를 직접 호출하며 Spring
|
||||
Resource Server가 Bearer JWT를 검증합니다.
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
package com.example.keycloakpattern;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.security.config.Customizer;
|
||||
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
||||
import org.springframework.security.config.http.SessionCreationPolicy;
|
||||
import org.springframework.security.web.SecurityFilterChain;
|
||||
import org.springframework.web.cors.CorsConfiguration;
|
||||
import org.springframework.web.cors.CorsConfigurationSource;
|
||||
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
||||
|
||||
@Configuration
|
||||
public class SecurityConfig {
|
||||
@@ -13,6 +18,7 @@ public class SecurityConfig {
|
||||
@Bean
|
||||
SecurityFilterChain apiSecurity(HttpSecurity http) throws Exception {
|
||||
return http
|
||||
.cors(Customizer.withDefaults())
|
||||
.csrf(csrf -> csrf.disable())
|
||||
.sessionManagement(session ->
|
||||
session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
|
||||
@@ -24,4 +30,19 @@ public class SecurityConfig {
|
||||
.oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
|
||||
.build();
|
||||
}
|
||||
|
||||
@Bean
|
||||
CorsConfigurationSource corsConfigurationSource() {
|
||||
CorsConfiguration configuration = new CorsConfiguration();
|
||||
configuration.setAllowedOrigins(List.of(
|
||||
"http://localhost:8088",
|
||||
"http://127.0.0.1:8088"
|
||||
));
|
||||
configuration.setAllowedMethods(List.of("GET", "OPTIONS"));
|
||||
configuration.setAllowedHeaders(List.of("Authorization", "Content-Type"));
|
||||
|
||||
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
|
||||
source.registerCorsConfiguration("/api/**", configuration);
|
||||
return source;
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+28
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "keycloak-pattern-e2e",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "keycloak-pattern-e2e",
|
||||
"version": "1.0.0",
|
||||
"devDependencies": {
|
||||
"playwright-core": "1.62.0"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.62.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.0.tgz",
|
||||
"integrity": "sha512-nsNRyq0r2zsG8AcRHWknc9QRA5XCueC7gWMrs+Gx2tlZn9hcl8zudfh00lhJPY1DE7NmZ6bDsT9g2yey8mXljA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "keycloak-pattern-e2e",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test:pattern1": "node pattern1.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"playwright-core": "1.62.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { chromium } from "playwright-core";
|
||||
|
||||
const username = process.env.E2E_USERNAME ?? "regular-user";
|
||||
const password = process.env.E2E_PASSWORD;
|
||||
|
||||
assert.ok(password, "E2E_PASSWORD must be set");
|
||||
|
||||
const browser = await chromium.launch({
|
||||
executablePath: process.env.CHROME_BIN ?? "/usr/bin/google-chrome",
|
||||
headless: true,
|
||||
args: ["--no-sandbox"],
|
||||
});
|
||||
|
||||
try {
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
let authorizationUrl;
|
||||
|
||||
page.on("request", (request) => {
|
||||
if (request.url().includes("/protocol/openid-connect/auth")) {
|
||||
authorizationUrl = new URL(request.url());
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto("http://localhost:8088");
|
||||
await page.locator("#login").click();
|
||||
await page.waitForURL(/localhost:8080/u);
|
||||
await page.locator("#username").fill(username);
|
||||
await page.locator("#password").fill(password);
|
||||
await page.locator("#kc-login").click();
|
||||
await page.waitForURL("http://localhost:8088/");
|
||||
await page.locator('[data-authenticated="true"]').waitFor();
|
||||
|
||||
assert.equal(authorizationUrl?.searchParams.get("response_type"), "code");
|
||||
assert.equal(authorizationUrl?.searchParams.get("code_challenge_method"), "S256");
|
||||
assert.ok(authorizationUrl?.searchParams.get("code_challenge"));
|
||||
|
||||
const accessToken = await page.evaluate(() => window.__pattern1.getAccessToken());
|
||||
assert.ok(accessToken, "access token must exist in browser memory");
|
||||
|
||||
const storageSnapshot = await page.evaluate(() => ({
|
||||
localStorage: Object.values(localStorage),
|
||||
sessionStorage: Object.values(sessionStorage),
|
||||
}));
|
||||
assert.equal(
|
||||
JSON.stringify(storageSnapshot).includes(accessToken),
|
||||
false,
|
||||
"access token must not be persisted in Web Storage",
|
||||
);
|
||||
|
||||
await page.locator("#call-api").click();
|
||||
await page.waitForFunction(() => {
|
||||
const text = document.querySelector("#result")?.textContent ?? "";
|
||||
return text.includes('"httpStatus": 200');
|
||||
});
|
||||
|
||||
await page.reload();
|
||||
await page.locator('[data-authenticated="false"]').waitFor();
|
||||
assert.equal(
|
||||
await page.evaluate(() => window.__pattern1.getAccessToken()),
|
||||
null,
|
||||
"reload must clear the memory-only token",
|
||||
);
|
||||
|
||||
console.log(
|
||||
"pattern1 browser verified: code+PKCE S256, protected API 200, Web Storage token 0, reload clears token",
|
||||
);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
@@ -1,4 +1,16 @@
|
||||
FROM node:24-alpine AS build
|
||||
|
||||
WORKDIR /workspace
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY src ./src
|
||||
COPY test ./test
|
||||
RUN npm test && npm run build
|
||||
|
||||
FROM nginx:1.29-alpine
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY --from=build /workspace/dist/app.js /usr/share/nginx/html/app.js
|
||||
|
||||
+48
-13
@@ -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>
|
||||
|
||||
@@ -21,6 +21,7 @@ server {
|
||||
}
|
||||
|
||||
location / {
|
||||
add_header Cache-Control "no-store";
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+523
@@ -0,0 +1,523 @@
|
||||
{
|
||||
"name": "keycloak-pattern1-spa",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "keycloak-pattern1-spa",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"oidc-client-ts": "3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"esbuild": "0.28.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
|
||||
"integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"aix"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
|
||||
"integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
|
||||
"integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
|
||||
"integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
|
||||
"integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
|
||||
"integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
|
||||
"integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
|
||||
"integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
|
||||
"integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openharmony-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openharmony"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"sunos"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
|
||||
"integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
|
||||
"integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
|
||||
"integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
|
||||
"integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.28.1",
|
||||
"@esbuild/android-arm": "0.28.1",
|
||||
"@esbuild/android-arm64": "0.28.1",
|
||||
"@esbuild/android-x64": "0.28.1",
|
||||
"@esbuild/darwin-arm64": "0.28.1",
|
||||
"@esbuild/darwin-x64": "0.28.1",
|
||||
"@esbuild/freebsd-arm64": "0.28.1",
|
||||
"@esbuild/freebsd-x64": "0.28.1",
|
||||
"@esbuild/linux-arm": "0.28.1",
|
||||
"@esbuild/linux-arm64": "0.28.1",
|
||||
"@esbuild/linux-ia32": "0.28.1",
|
||||
"@esbuild/linux-loong64": "0.28.1",
|
||||
"@esbuild/linux-mips64el": "0.28.1",
|
||||
"@esbuild/linux-ppc64": "0.28.1",
|
||||
"@esbuild/linux-riscv64": "0.28.1",
|
||||
"@esbuild/linux-s390x": "0.28.1",
|
||||
"@esbuild/linux-x64": "0.28.1",
|
||||
"@esbuild/netbsd-arm64": "0.28.1",
|
||||
"@esbuild/netbsd-x64": "0.28.1",
|
||||
"@esbuild/openbsd-arm64": "0.28.1",
|
||||
"@esbuild/openbsd-x64": "0.28.1",
|
||||
"@esbuild/openharmony-arm64": "0.28.1",
|
||||
"@esbuild/sunos-x64": "0.28.1",
|
||||
"@esbuild/win32-arm64": "0.28.1",
|
||||
"@esbuild/win32-ia32": "0.28.1",
|
||||
"@esbuild/win32-x64": "0.28.1"
|
||||
}
|
||||
},
|
||||
"node_modules/jwt-decode": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/oidc-client-ts": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.5.0.tgz",
|
||||
"integrity": "sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"jwt-decode": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "keycloak-pattern1-spa",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "esbuild src/app.js --bundle --format=esm --outfile=dist/app.js --minify --sourcemap",
|
||||
"test": "node --test test/*.test.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"oidc-client-ts": "3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"esbuild": "0.28.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
InMemoryWebStorage,
|
||||
UserManager,
|
||||
WebStorageStateStore,
|
||||
} from "oidc-client-ts";
|
||||
|
||||
import { createPkcePair } from "./pkce.js";
|
||||
|
||||
const authority = "http://localhost:8080/realms/keycloak-patterns";
|
||||
const backendBaseUrl = "http://localhost:8081";
|
||||
|
||||
const userManager = new UserManager({
|
||||
authority,
|
||||
client_id: "spa-public",
|
||||
redirect_uri: "http://localhost:8088/callback.html",
|
||||
post_logout_redirect_uri: "http://localhost:8088/",
|
||||
response_type: "code",
|
||||
scope: "openid profile email",
|
||||
automaticSilentRenew: true,
|
||||
monitorSession: false,
|
||||
loadUserInfo: false,
|
||||
userStore: new WebStorageStateStore({
|
||||
store: new InMemoryWebStorage(),
|
||||
}),
|
||||
stateStore: new WebStorageStateStore({
|
||||
store: window.sessionStorage,
|
||||
}),
|
||||
});
|
||||
|
||||
const loginButton = document.querySelector("#login");
|
||||
const logoutButton = document.querySelector("#logout");
|
||||
const apiButton = document.querySelector("#call-api");
|
||||
const pkceButton = document.querySelector("#pkce-demo");
|
||||
const sessionState = document.querySelector("#session-state");
|
||||
const result = document.querySelector("#result");
|
||||
|
||||
let currentUser = null;
|
||||
|
||||
function renderJson(value) {
|
||||
result.textContent = JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function tokenMetadata(user) {
|
||||
return {
|
||||
subject: user.profile.sub,
|
||||
username: user.profile.preferred_username,
|
||||
expiresAt: new Date(user.expires_at * 1000).toISOString(),
|
||||
accessTokenHeldBy: "browser memory",
|
||||
refreshTokenHeldBy: user.refresh_token ? "browser memory" : "not issued",
|
||||
};
|
||||
}
|
||||
|
||||
function renderSession(user) {
|
||||
currentUser = user;
|
||||
const authenticated = Boolean(user && !user.expired);
|
||||
sessionState.dataset.authenticated = String(authenticated);
|
||||
sessionState.textContent = authenticated
|
||||
? `${user.profile.preferred_username} 로그인됨 · token은 메모리에만 보관`
|
||||
: "로그인되지 않음 · 브라우저 저장소에 token 없음";
|
||||
loginButton.disabled = authenticated;
|
||||
logoutButton.disabled = !authenticated;
|
||||
apiButton.disabled = !authenticated;
|
||||
|
||||
if (authenticated) {
|
||||
renderJson(tokenMetadata(user));
|
||||
}
|
||||
}
|
||||
|
||||
async function finishSigninCallback() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const isCallback = window.location.pathname === "/callback.html"
|
||||
&& (params.has("code") || params.has("error"));
|
||||
|
||||
if (!isCallback) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const user = await userManager.signinRedirectCallback();
|
||||
window.history.replaceState({}, document.title, "/");
|
||||
return user;
|
||||
}
|
||||
|
||||
async function callProtectedApi() {
|
||||
if (!currentUser || currentUser.expired) {
|
||||
throw new Error("로그인이 필요합니다.");
|
||||
}
|
||||
|
||||
const response = await fetch(`${backendBaseUrl}/api/me`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${currentUser.access_token}`,
|
||||
},
|
||||
});
|
||||
const body = await response.json();
|
||||
renderJson({
|
||||
httpStatus: response.status,
|
||||
resourceServerResponse: body,
|
||||
tokenBoundary: tokenMetadata(currentUser),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`보호 API가 ${response.status}를 반환했습니다.`);
|
||||
}
|
||||
}
|
||||
|
||||
loginButton.addEventListener("click", () => userManager.signinRedirect());
|
||||
logoutButton.addEventListener("click", () => userManager.signoutRedirect());
|
||||
apiButton.addEventListener("click", () => {
|
||||
callProtectedApi().catch((error) => renderJson({ error: error.message }));
|
||||
});
|
||||
pkceButton.addEventListener("click", () => {
|
||||
createPkcePair()
|
||||
.then(({ verifier, challenge, method }) => renderJson({
|
||||
method,
|
||||
verifierLength: verifier.length,
|
||||
challengeLength: challenge.length,
|
||||
note: "실제 로그인에서는 oidc-client-ts가 같은 S256 단계를 수행합니다.",
|
||||
}))
|
||||
.catch((error) => renderJson({ error: error.message }));
|
||||
});
|
||||
|
||||
userManager.events.addUserLoaded(renderSession);
|
||||
userManager.events.addUserUnloaded(() => renderSession(null));
|
||||
userManager.events.addAccessTokenExpired(() => renderSession(null));
|
||||
|
||||
window.__pattern1 = {
|
||||
getAccessToken: () => currentUser?.access_token ?? null,
|
||||
getRefreshToken: () => currentUser?.refresh_token ?? null,
|
||||
getIdToken: () => currentUser?.id_token ?? null,
|
||||
callProtectedApi,
|
||||
};
|
||||
|
||||
try {
|
||||
const callbackUser = await finishSigninCallback();
|
||||
renderSession(callbackUser ?? await userManager.getUser());
|
||||
} catch (error) {
|
||||
renderSession(null);
|
||||
renderJson({ error: error.message });
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
function base64Url(bytes) {
|
||||
let binary = "";
|
||||
for (const byte of bytes) {
|
||||
binary += String.fromCharCode(byte);
|
||||
}
|
||||
return btoa(binary)
|
||||
.replaceAll("+", "-")
|
||||
.replaceAll("/", "_")
|
||||
.replace(/=+$/u, "");
|
||||
}
|
||||
|
||||
export async function createPkcePair(cryptoApi = globalThis.crypto) {
|
||||
const verifierBytes = new Uint8Array(32);
|
||||
cryptoApi.getRandomValues(verifierBytes);
|
||||
const verifier = base64Url(verifierBytes);
|
||||
const digest = await cryptoApi.subtle.digest(
|
||||
"SHA-256",
|
||||
new TextEncoder().encode(verifier),
|
||||
);
|
||||
|
||||
return {
|
||||
verifier,
|
||||
challenge: base64Url(new Uint8Array(digest)),
|
||||
method: "S256",
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { webcrypto } from "node:crypto";
|
||||
import test from "node:test";
|
||||
|
||||
globalThis.btoa = (value) => Buffer.from(value, "binary").toString("base64");
|
||||
|
||||
const { createPkcePair } = await import("../src/pkce.js");
|
||||
|
||||
test("manual PKCE helper creates an RFC 7636 S256 pair", async () => {
|
||||
const pair = await createPkcePair(webcrypto);
|
||||
|
||||
assert.equal(pair.method, "S256");
|
||||
assert.equal(pair.verifier.length, 43);
|
||||
assert.equal(pair.challenge.length, 43);
|
||||
assert.match(pair.verifier, /^[A-Za-z0-9_-]+$/u);
|
||||
assert.match(pair.challenge, /^[A-Za-z0-9_-]+$/u);
|
||||
assert.notEqual(pair.verifier, pair.challenge);
|
||||
});
|
||||
Executable
+21
@@ -0,0 +1,21 @@
|
||||
#!/usr/bin/env sh
|
||||
set -eu
|
||||
|
||||
if [ ! -f .env ]; then
|
||||
echo "missing .env; copy .env.example and set local-only values" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
set -a
|
||||
. ./.env
|
||||
set +a
|
||||
|
||||
docker compose down --volumes --remove-orphans
|
||||
docker compose up --build -d --wait
|
||||
|
||||
npm --prefix e2e ci
|
||||
E2E_USERNAME=regular-user \
|
||||
E2E_PASSWORD="$REGULAR_USER_PASSWORD" \
|
||||
npm --prefix e2e run test:pattern1
|
||||
|
||||
echo "AP1 verified end to end"
|
||||
Reference in New Issue
Block a user