1e098999c1
🔐 JWT 기반 로그인 시스템: - 로그인 페이지: 아름다운 애니메이션과 보안 정보 표시 - JWT 토큰: 24시간 또는 30일 (Remember Me) 만료 설정 - 비밀번호 암호화: bcrypt 해싱으로 안전한 저장 - 계정 잠금: 5회 실패 시 15분 자동 잠금 👥 사용자 계정 관리: - admin/admin123 (관리자 권한) - hyungi/hyungi123 (시스템 권한) - 역할 기반 접근 제어 (RBAC) 🛡️ 보안 기능: - 토큰 자동 검증 및 만료 처리 - 감사 로그: 로그인/로그아웃/관리 작업 추적 - 안전한 세션 관리 및 토큰 정리 - 클라이언트 사이드 토큰 검증 🎨 UI/UX 개선: - 로그인 페이지: 그라디언트 배경, 플로팅 아이콘 애니메이션 - 사용자 메뉴: 헤더에 사용자명과 로그아웃 버튼 표시 - 보안 표시: SSL, 세션 타임아웃, JWT 인증 정보 - 반응형 디자인 및 다크모드 지원 🔧 기술 구현: - FastAPI HTTPBearer 보안 스키마 - PyJWT 토큰 생성/검증 - bcrypt 비밀번호 해싱 - 클라이언트-서버 토큰 동기화 새 파일: - templates/login.html: 로그인 페이지 HTML - static/login.css: 로그인 페이지 스타일 - static/login.js: 로그인 JavaScript 로직 - server/auth.py: JWT 인증 시스템 (실제 서버용) 수정된 파일: - test_admin.py: 테스트 서버에 JWT 인증 추가 - static/admin.js: JWT 토큰 기반 API 요청으로 변경 - templates/admin.html: 사용자 메뉴 및 로그아웃 버튼 추가 - static/admin.css: 사용자 메뉴 스타일 추가 보안 레벨: Phase 1 (API Key) → Phase 3 (JWT + 감사로그)
125 lines
4.5 KiB
HTML
125 lines
4.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>AI Server Admin - Login</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="/static/login.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<!-- Header -->
|
|
<div class="login-header">
|
|
<div class="logo">
|
|
<i class="fas fa-robot"></i>
|
|
<h1>AI Server Admin</h1>
|
|
</div>
|
|
<p class="subtitle">Secure Access Portal</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form id="login-form" class="login-form">
|
|
<div class="form-group">
|
|
<label for="username">
|
|
<i class="fas fa-user"></i>
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
required
|
|
autocomplete="username"
|
|
placeholder="Enter your username"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">
|
|
<i class="fas fa-lock"></i>
|
|
Password
|
|
</label>
|
|
<div class="password-input">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder="Enter your password"
|
|
>
|
|
<button type="button" class="password-toggle" onclick="togglePassword()">
|
|
<i class="fas fa-eye" id="password-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="remember-me" name="remember">
|
|
<span class="checkmark"></span>
|
|
Remember me for 30 days
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn" id="login-btn">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Error Message -->
|
|
<div id="error-message" class="error-message" style="display: none;">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span id="error-text">Invalid credentials</span>
|
|
</div>
|
|
|
|
<!-- Security Info -->
|
|
<div class="security-info">
|
|
<div class="security-item">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<span>Secure Connection</span>
|
|
</div>
|
|
<div class="security-item">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Session Timeout: 24h</span>
|
|
</div>
|
|
<div class="security-item">
|
|
<i class="fas fa-key"></i>
|
|
<span>JWT Authentication</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="login-footer">
|
|
<p>© 2025 AI Server Admin. All rights reserved.</p>
|
|
<div class="version-info">
|
|
<span>Version 2.0 (Phase 3)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Animation -->
|
|
<div class="bg-animation">
|
|
<div class="floating-icon" style="--delay: 0s;">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div class="floating-icon" style="--delay: 2s;">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div class="floating-icon" style="--delay: 4s;">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<div class="floating-icon" style="--delay: 6s;">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/login.js"></script>
|
|
</body>
|
|
</html>
|