kyy
cf9eecf19f
- express-session을 이용한 로그인 상태 유지 구현 - 인증 성공 시 /home.html 리디렉션 및 정보 표시 기능 추가 - 로그아웃 기능 구현 - UI 흐름 개선: 로그인 성공 시 홈 화면으로 자동 이동
76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home - Headless Login Demo</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
.home-container {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
.user-info {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: left;
|
|
}
|
|
.info-item {
|
|
margin-bottom: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.info-label {
|
|
color: #ccc;
|
|
margin-right: 10px;
|
|
}
|
|
.logout-btn {
|
|
background: #ff4757;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container home-container">
|
|
<h1 class="login-title">환영합니다!</h1>
|
|
<p>SSO를 통해 안전하게 로그인되었습니다.</p>
|
|
|
|
<div id="userInfo" class="user-info">
|
|
<p>사용자 정보를 불러오는 중...</p>
|
|
</div>
|
|
|
|
<button id="logoutBtn" class="login-button logout-btn">로그아웃</button>
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchUserInfo() {
|
|
try {
|
|
const response = await fetch('/api/me');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const user = data.user;
|
|
document.getElementById('userInfo').innerHTML = `
|
|
<div class="info-item"><span class="info-label">사용자 ID:</span> <span>${user.id}</span></div>
|
|
<div class="info-item"><span class="info-label">이름:</span> <span>${user.name}</span></div>
|
|
<div class="info-item"><span class="info-label">로그인 시간:</span> <span>${new Date(user.loginTime).toLocaleString()}</span></div>
|
|
`;
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch user info:', err);
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
|
|
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
|
await fetch('/api/logout', { method: 'POST' });
|
|
window.location.href = '/';
|
|
});
|
|
|
|
fetchUserInfo();
|
|
</script>
|
|
</body>
|
|
</html>
|