kyy/sso_expressjs_demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 개선 및 스타일 적용

Browse Source
This commit is contained in:
kyy
2026-01-16 13:15:08 +09:00
parent dbad6bccf4
commit d5179daf57
3 changed files with 232 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
sso-demo/public/css/style.css Normal file
View File

@@ -0,0 +1,138 @@
/* General Body Styles */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
background-color: #f8f9fa;
color: #333;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* Notice Bar */
.notice-bar {
background-color: #eef6ff;
border-bottom: 1px solid #d1e0f0;
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.notice-bar p {
margin: 0;
}
/* CTA Button Styles */
.cta-button {
height: 44px;
padding: 0 24px;
border: none;
border-radius: 8px;
background-color: #A19FE7;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:hover {
background-color: #583ac7;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Header/Hero Section */
.hero {
text-align: center;
padding: 120px 24px 60px; /* Add padding top to account for fixed notice bar */
}
.hero h1 {
font-size: 40px;
font-weight: 800;
margin-bottom: 16px;
}
.hero .status-text {
font-size: 18px;
color: #555;
}
.hero .status-text.logged-out {
font-size: 16px;
color: #777;
}
/* Content Section */
.content-section {
padding: 48px 0;
}
.content-section h2 {
text-align: center;
font-size: 28px;
margin-bottom: 32px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.card {
background-color: white;
border: 1px solid #e9ecef;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 24px;
text-align: left;
}
.card img {
width: 100%;
border-radius: 8px;
margin-bottom: 16px;
}
.card h3 {
margin-top: 0;
font-size: 20px;
}
.login-prompt {
text-align: center;
padding: 48px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Responsive Styles */
@media (max-width: 768px) {
.notice-bar {
flex-direction: column;
padding: 12px;
}
.notice-bar p {
margin-bottom: 8px;
}
.hero {
padding-top: 150px;
}
.card-grid {
grid-template-columns: 1fr;
}
}

59
sso-demo/public/sso_popup.html
View File

@@ -2,46 +2,57 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>SSO Login</title> <title>Baron SSO Login</title>
<link rel="stylesheet" href="/css/style.css">
<style> <style>
body { font-family: sans-serif; text-align: center; padding: 20px; } body {
button { padding: 10px 20px; font-size: 16px; cursor: pointer; } font-family: system-ui, sans-serif;
text-align: center;
padding: 40px 20px;
background-color: #f8f9fa;
}
h2 {
font-size: 24px;
margin-bottom: 12px;
}
</style> </style>
</head> </head>
<body> <body>
<h2>Simulated SSO Provider</h2> <h2>Baron SSO Provider</h2>
<p>Click the button below to simulate a successful login.</p> <p>아래 버튼을 클릭하면 로그인이 완료됩니다.</p>
<button id="confirm-login-btn">Confirm Login</button> <button id="confirm-login-btn" class="cta-button">Confirm Login</button>
<script> <script>
document.getElementById('confirm-login-btn').addEventListener('click', () => { document.getElementById('confirm-login-btn').addEventListener('click', () => {
// --- Create a dummy JWT for demonstration --- // --- This script now creates a dummy JWT with a dynamic issuer ---
// Header (no changes needed)
const header = { alg: 'HS256', typ: 'JWT' };
// Payload with a random 'sub' to simulate different users const header = {
const payload = { alg: "RS256", // Using RS256 as it's common for SSO
sub: `sso-user-${Math.random().toString(36).substring(2, 10)}`, typ: "JWT",
name: 'John Doe', kid: "simulated-key-id" // Key ID for JWKS lookup
iat: Math.floor(Date.now() / 1000)
}; };
// In a real JWT, the signature would be generated with a secret key. const payload = {
// For the demo, we only need the header and payload. iss: "https://sso.baron.com", // Simulated issuer
const dummyToken = [ sub: `baron-user-${Math.random().toString(36).substring(2, 10)}`,
btoa(JSON.stringify(header)), name: "Simulated User",
btoa(JSON.stringify(payload)), iat: Math.floor(Date.now() / 1000),
'dummy-signature' exp: Math.floor(Date.now() / 1000) + (60 * 60) // Expires in 1 hour
].join('.'); };
// --- End of dummy JWT creation ---
// In a real scenario, this token would be signed by the SSO provider's private key.
// We are sending an unsigned token for structure demonstration. The verification
// on the server side will fail if it tries to verify the signature,
// but the demo setup is focused on decoding and key fetching.
const dummyToken = btoa(JSON.stringify(header)) + '.' + btoa(JSON.stringify(payload)) + '.dummies_signature';
// Send the token back to the parent window that opened the popup
// In a real app, the targetOrigin should be the specific URL of your application
window.opener.postMessage({ window.opener.postMessage({
type: 'LOGIN_SUCCESS', type: 'LOGIN_SUCCESS',
token: dummyToken token: dummyToken
}, '*'); }, '*');
// Close the popup after sending the message
window.close();
}); });
</script> </script>
</body> </body>

75
sso-demo/views/index.ejs
View File

@@ -3,31 +3,72 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express SSO Demo</title> <title>Express SSO Login Demo</title>
<style> <link rel="stylesheet" href="/css/style.css">
body { font-family: sans-serif; text-align: center; padding-top: 50px; }
.user-info { margin-bottom: 20px; }
#sso-login-btn, .logout-link {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head> </head>
<body> <body>
<h1>Welcome to the Express SSO Demo</h1> <!-- 1. Top Notice Bar -->
<div class="notice-bar">
<div class="user-info">
<% if (user) { %> <% if (user) { %>
<span>Welcome, <strong><%= user.username %></strong>!</span> <p>환영합니다, <strong><%= user.username %></strong>!</p>
<p><a href="/logout" class="logout-link">Logout</a></p> <a href="/logout" class="cta-button">Logout</a>
<% } else { %> <% } else { %>
<p>You are not logged in.</p> <p>SSO로 로그인하면 회원 전용 글을 확인할 수 있습니다.</p>
<button id="sso-login-btn">Login with SSO</button> <button id="sso-login-btn" class="cta-button">Baron SSO Login</button>
<% } %> <% } %>
</div> </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 src="/js/sso.js"></script> <script src="/js/sso.js"></script>
</body> </body>
</html> </html>