69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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: 56rem;
|
|
margin: 6vh auto;
|
|
padding: 0 1.5rem;
|
|
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.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>
|
|
<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>
|