79 lines
3.1 KiB
Plaintext
79 lines
3.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ExpressJS SSO Login Demo</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 1. Top Notice Bar -->
|
|
<div class="notice-bar">
|
|
<% if (user) { %>
|
|
<p>환영합니다, <strong><%= user.username %></strong>!</p>
|
|
<a href="/logout" class="cta-button">Logout</a>
|
|
<% } else { %>
|
|
<p>SSO로 로그인하면 회원 전용 글을 확인할 수 있습니다.</p>
|
|
<button id="sso-login-btn" class="cta-button">Baron SSO Login</button>
|
|
<% } %>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- 2. Hero/Header Area -->
|
|
<header class="hero">
|
|
<h1>SSO LOGIN DEMO</h1>
|
|
<% if (user) { %>
|
|
<p class="status-text">Welcome, user!</p>
|
|
<% } else { %>
|
|
<p class="status-text logged-out">You are not logged in.</p>
|
|
<% } %>
|
|
</header>
|
|
|
|
<!-- 3. Content Area -->
|
|
<main class="content-section">
|
|
<h2>Blog</h2>
|
|
<% if (user) { %>
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<h3>회원 전용 컨텐츠</h3>
|
|
<p>로그인한 사용자에게만 보이는 특별한 컨텐츠입니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>로그인 버튼 디자인</h3>
|
|
<p>일관성 있는 CTA 버튼 디자인 가이드입니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>SSO 핸들러 로직 분석</h3>
|
|
<p>JWT 토큰을 검증하고 세션을 처리하는 과정을 살펴봅니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>보안 강화 방안</h3>
|
|
<p>애플리케이션의 보안을 강화하기 위한 몇 가지 방법입니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>EJS 템플릿 엔진 활용</h3>
|
|
<p>동적 웹 페이지를 만들기 위한 EJS 사용법을 알아봅니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>CSS 스타일 가이드</h3>
|
|
<p>UI의 일관성을 유지하기 위한 스타일 규칙입니다.</p>
|
|
</div>
|
|
</div>
|
|
<% } else { %>
|
|
<div class="login-prompt">
|
|
<h3>회원 전용 글은 로그인 후 열람 가능합니다.</h3>
|
|
<p>상단 버튼을 클릭해 Baron SSO로 로그인해주세요.</p>
|
|
</div>
|
|
<% } %>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Pass the SSO URL from the server (via the template) to the client-side JS
|
|
const ssoUrl = '<%= ssoUrl %>';
|
|
</script>
|
|
<script src="/js/sso.js"></script>
|
|
</body>
|
|
</html>
|