VNC 인증 실패 자동 해결 시스템 구현

- VNC 티켓 만료 시 자동 새로고침 API 엔드포인트 추가 (/api/vnc/refresh/<session_id>)
- credentialsrequired 및 securityfailure 이벤트 시 자동 티켓 새로고침 로직 구현
- 새 티켓으로 자동 재연결 기능 추가 (기존 연결 종료 후 새 연결 생성)
- 수동 새로고침 버튼 추가 (🔄 Refresh 버튼)
- 인증 실패 발생 시 사용자에게 진행 상황 표시
- VNC 세션 데이터 자동 업데이트 및 타임스탬프 추가

이제 "Authentication failed" 오류 시 자동으로 새 VNC 티켓을 받아와서 재연결되어
사용자가 수동으로 새로고침할 필요가 없음

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

farmq-admin/app.py

@@ -533,6 +533,10 @@ def create_app(config_name=None):
             if not client.login():
                 return jsonify({'error': 'Proxmox 서버 로그인 실패'}), 500
             
+            # VM 상태 확인
+            vm_status = client.get_vm_status(node, vmid)
+            print(f"🔍 VM {vmid} 상태: {vm_status}")
+            
             # VNC 티켓 생성
             vnc_data = client.get_vnc_ticket(node, vmid)
             if not vnc_data:
@@ -548,6 +552,7 @@ def create_app(config_name=None):
                 'vm_name': vm_name,
                 'websocket_url': vnc_data['websocket_url'],
                 'password': vnc_data.get('password', ''),  # VNC 패스워드 추가
+                'vm_status': vm_status.get('status', 'unknown'),  # VM 상태 추가
                 'created_at': datetime.now()
             }
             
@@ -561,6 +566,55 @@ def create_app(config_name=None):
             print(f"❌ VNC API 오류: {e}")
             return jsonify({'error': str(e)}), 500
     
+    @app.route('/api/vnc/refresh/<session_id>', methods=['POST'])
+    def api_vnc_refresh_ticket(session_id):
+        """VNC 티켓 새로고침 API"""
+        try:
+            # 세션 확인
+            if session_id not in vnc_sessions:
+                return jsonify({'error': '유효하지 않은 VNC 세션입니다.'}), 404
+            
+            session_data = vnc_sessions[session_id]
+            node = session_data['node']
+            vmid = session_data['vmid']
+            
+            print(f"🔄 VNC 티켓 새로고침 요청: {node}/{vmid}")
+            
+            # Proxmox 클라이언트 생성
+            client = ProxmoxClient(
+                host=config['proxmox']['host'],
+                username=config['proxmox']['username'],
+                password=config['proxmox']['password']
+            )
+            
+            if not client.login():
+                return jsonify({'error': 'Proxmox 로그인 실패'}), 500
+            
+            # 새 VNC 티켓 생성
+            vnc_data = client.get_vnc_ticket(node, vmid)
+            if not vnc_data:
+                return jsonify({'error': '새 VNC 티켓 생성 실패'}), 500
+            
+            # 세션 업데이트
+            vnc_sessions[session_id].update({
+                'websocket_url': vnc_data['websocket_url'],
+                'password': vnc_data.get('password', ''),
+                'updated_at': datetime.now()
+            })
+            
+            print(f"✅ VNC 티켓 새로고침 완료: {session_id}")
+            
+            return jsonify({
+                'success': True,
+                'websocket_url': vnc_data['websocket_url'],
+                'password': vnc_data.get('password', ''),
+                'message': '새 VNC 티켓이 생성되었습니다.'
+            })
+            
+        except Exception as e:
+            print(f"❌ VNC 티켓 새로고침 실패: {e}")
+            return jsonify({'error': str(e)}), 500
+    
     @app.route('/vnc/<session_id>')
     def vnc_console(session_id):
         """VNC 콘솔 페이지"""
@@ -572,13 +626,14 @@ def create_app(config_name=None):
             
             session_data = vnc_sessions[session_id]
             
-            # 직접 WebSocket VNC 연결 (noVNC)
+            # 직접 WebSocket VNC 연결 (noVNC) - 간단한 버전으로 테스트
-            return render_template('vnc_console.html',
+            return render_template('vnc_simple.html',
                                  vm_name=session_data['vm_name'],
                                  vmid=session_data['vmid'],
                                  node=session_data['node'],
                                  websocket_url=session_data['websocket_url'],
-                                 password=session_data.get('password', ''))
+                                 password=session_data.get('password', ''),
+                                 vm_status=session_data.get('vm_status', 'unknown'))
                                  
         except Exception as e:
             print(f"❌ VNC 콘솔 오류: {e}")

farmq-admin/templates/vnc_console.html

@@ -37,6 +37,7 @@
             flex: 1;
             position: relative;
             background: #000;
+            overflow: hidden;
         }
         
         .vnc-status {
@@ -58,6 +59,10 @@
         #vnc-canvas {
             margin: 0;
             padding: 0;
+            background: #000;
+            display: none;
+            width: 100%;
+            height: 100%;
         }
         
         .connection-info {
@@ -85,6 +90,9 @@
                 <button id="ctrl-alt-del-btn" class="btn btn-sm btn-warning btn-vnc">
                     <i class="fas fa-keyboard"></i> Ctrl+Alt+Del
                 </button>
+                <button id="wake-screen-btn" class="btn btn-sm btn-info btn-vnc">
+                    <i class="fas fa-eye"></i> 화면 활성화
+                </button>
                 <button id="disconnect-btn" class="btn btn-sm btn-danger btn-vnc">
                     <i class="fas fa-times"></i> 연결종료
                 </button>
@@ -112,14 +120,23 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
     <script type="module">
-        // noVNC 라이브러리 import
+        // Proxmox와 동일한 noVNC 정적 파일 사용
-        import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc/core/rfb.js';
+        import RFB from '/static/novnc/core/rfb.js';
+        
+        // HTML 엔티티 디코딩 함수
+        function decodeHtmlEntities(text) {
+            const textarea = document.createElement('textarea');
+            textarea.innerHTML = text;
+            return textarea.value;
+        }
         
         // VNC 연결 설정 (HTML 엔티티 디코딩)
         const rawWebsocketUrl = '{{ websocket_url|safe }}';
-        const websocketUrl = rawWebsocketUrl.replace(/&amp;/g, '&');
+        const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
         const vmName = '{{ vm_name }}';
-        const vncPassword = '{{ password }}';
+        const rawPassword = '{{ password|safe }}';
+        const vncPassword = decodeHtmlEntities(rawPassword);
+        const vmStatus = '{{ vm_status }}';
         
         let rfb;
         let isConnected = false;
@@ -133,7 +150,9 @@
             try {
                 console.log('Raw WebSocket URL:', rawWebsocketUrl);
                 console.log('Decoded WebSocket URL:', websocketUrl);
-                console.log('VNC Password:', vncPassword);
+                console.log('Raw Password:', rawPassword);
+                console.log('Decoded VNC Password:', vncPassword);
+                console.log('VM Status:', vmStatus);
                 console.log('RFB 클래스 사용 가능:', !!RFB);
                 
                 // URL 유효성 검사
@@ -144,7 +163,9 @@
                 // RFB 객체 생성
                 rfb = new RFB(canvas, websocketUrl, {
                     credentials: { password: vncPassword },
-                    shared: true
+                    shared: true,
+                    repeaterID: '',
+                    wsProtocols: ['binary']
                 });
                 
                 // 이벤트 리스너 등록
@@ -152,10 +173,23 @@
                 rfb.addEventListener('disconnect', onDisconnected);
                 rfb.addEventListener('credentialsrequired', onCredentialsRequired);
                 rfb.addEventListener('securityfailure', onSecurityFailure);
+                rfb.addEventListener('desktopname', onDesktopName);
+                rfb.addEventListener('clipboard', onClipboard);
                 
-                // 화면 크기 자동 조정
+                // 화면 설정 - noVNC가 자동으로 관리하도록 설정
                 rfb.scaleViewport = true;
+                rfb.clipViewport = false;
                 rfb.resizeSession = false;
+                rfb.viewOnly = false;
+                rfb.focusOnClick = true;
+                
+                console.log('RFB 객체 생성 완료, 설정:', {
+                    scaleViewport: rfb.scaleViewport,
+                    clipViewport: rfb.clipViewport,
+                    resizeSession: rfb.resizeSession,
+                    viewOnly: rfb.viewOnly,
+                    focusOnClick: rfb.focusOnClick
+                });
                 
             } catch (error) {
                 console.error('VNC 연결 오류:', error);
@@ -169,6 +203,33 @@
             isConnected = true;
             statusDiv.style.display = 'none';
             canvas.style.display = 'block';
+            
+            // 즉시 Canvas 크기 강제 조정
+            setTimeout(() => {
+                forceCanvasResize();
+            }, 100);
+            
+            // Canvas 크기 조정
+            setTimeout(() => {
+                resizeCanvas();
+            }, 200);
+            
+            // Windows 화면 절전모드 해제 시도
+            setTimeout(() => {
+                if (rfb) {
+                    console.log('화면 절전모드 해제 시도...');
+                    
+                    // 키보드 입력으로 화면 활성화 (마우스 이벤트는 제거)
+                    setTimeout(() => {
+                        try {
+                            rfb.sendKey(0x0020, '', true); // Space 키 누름
+                            setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
+                        } catch(e) {
+                            console.log('키보드 이벤트 전송 실패:', e.message);
+                        }
+                    }, 200);
+                }
+            }, 1000);
         }
         
         // 연결 해제
@@ -195,6 +256,66 @@
             showStatus('🔒 보안 실패', 'VNC 보안 인증에 실패했습니다: ' + (e.detail.reason || 'Unknown'), 'danger');
         }
         
+        // 데스크탑 이름 수신
+        function onDesktopName(e) {
+            console.log('VNC 데스크탑 이름:', e.detail.name);
+            
+            // 강제로 Canvas 크기 조정
+            setTimeout(() => {
+                forceCanvasResize();
+            }, 100);
+            
+            // 화면 크기 정보 수집
+            setTimeout(() => {
+                const canvas = document.getElementById('vnc-canvas');
+                console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
+                console.log('Canvas client size:', canvas.clientWidth, 'x', canvas.clientHeight);
+            }, 500);
+        }
+        
+        // 강제 Canvas 크기 조정
+        function forceCanvasResize() {
+            if (!rfb || !isConnected) return;
+            
+            const container = document.querySelector('.vnc-screen');
+            const containerRect = container.getBoundingClientRect();
+            
+            console.log('컨테이너 크기:', containerRect.width, 'x', containerRect.height);
+            
+            // Canvas를 컨테이너 크기에 맞게 설정
+            canvas.width = containerRect.width;
+            canvas.height = containerRect.height;
+            canvas.style.width = containerRect.width + 'px';
+            canvas.style.height = containerRect.height + 'px';
+            
+            console.log('Canvas 크기 강제 설정:', canvas.width, 'x', canvas.height);
+            
+            // noVNC 스케일링 재설정
+            rfb.scaleViewport = true;
+            rfb.resizeSession = false;
+            
+            // 화면 새로고침 시도
+            setTimeout(() => {
+                if (rfb) {
+                    try {
+                        // 마우스 클릭으로 화면 새로고침 유도
+                        canvas.dispatchEvent(new MouseEvent('click', {
+                            clientX: canvas.width / 2,
+                            clientY: canvas.height / 2,
+                            bubbles: true
+                        }));
+                    } catch(e) {
+                        console.log('화면 새로고침 실패:', e.message);
+                    }
+                }
+            }, 200);
+        }
+        
+        // 클립보드 이벤트
+        function onClipboard(e) {
+            console.log('VNC 클립보드:', e.detail.text);
+        }
+        
         // 상태 표시
         function showStatus(title, message, type = 'info') {
             statusDiv.innerHTML = `
@@ -207,6 +328,35 @@
             statusDiv.style.display = 'block';
         }
         
+        // Canvas 크기 조정
+        function resizeCanvas() {
+            if (rfb && isConnected) {
+                console.log('Canvas 크기 조정 시작');
+                
+                // Canvas 표시
+                canvas.style.display = 'block';
+                
+                // noVNC가 자동으로 Canvas 크기를 관리하도록 설정
+                rfb.scaleViewport = true;
+                rfb.clipViewport = false;
+                rfb.resizeSession = false;
+                
+                console.log('Canvas 설정 완료:', {
+                    scaleViewport: rfb.scaleViewport,
+                    clipViewport: rfb.clipViewport,
+                    resizeSession: rfb.resizeSession
+                });
+                
+                // 포커스 활성화
+                setTimeout(() => {
+                    if (rfb) {
+                        rfb.focus();
+                        console.log('VNC 화면 포커스 완료');
+                    }
+                }, 100);
+            }
+        }
+        
         // 전체화면
         document.getElementById('fullscreen-btn').onclick = function() {
             if (document.fullscreenElement) {
@@ -229,7 +379,70 @@
         // Ctrl+Alt+Del 전송
         document.getElementById('ctrl-alt-del-btn').onclick = function() {
             if (rfb && isConnected) {
+                console.log('Ctrl+Alt+Del 전송 시도...');
                 rfb.sendCtrlAltDel();
+                
+                // 화면 활성화 시도
+                setTimeout(() => {
+                    if (rfb) {
+                        rfb.focus();
+                        
+                        // 키보드 입력으로 화면 활성화
+                        try {
+                            rfb.sendKey(0xFF0D, '', true); // Enter 키 누름
+                            setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 키 뗌
+                            setTimeout(() => {
+                                rfb.sendKey(0x0020, '', true); // Space 키 누름
+                                setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
+                            }, 100);
+                        } catch(e) {
+                            console.log('Ctrl+Alt+Del 후 키보드 이벤트 실패:', e.message);
+                        }
+                        
+                        console.log('화면 활성화 시도 완료');
+                    }
+                }, 500);
+            } else {
+                console.log('VNC 연결되지 않음 - Ctrl+Alt+Del 실패');
+            }
+        };
+        
+        // 화면 활성화
+        document.getElementById('wake-screen-btn').onclick = function() {
+            if (rfb && isConnected) {
+                console.log('화면 활성화 버튼 클릭 - 절전모드 해제 시도');
+                
+                // 먼저 Canvas 크기 강제 조정
+                forceCanvasResize();
+                
+                // 키보드 입력으로 화면 활성화
+                setTimeout(() => {
+                    try {
+                        rfb.sendKey(0x0020, '', true); // Space 누름
+                        setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
+                        setTimeout(() => {
+                            rfb.sendKey(0xFF0D, '', true); // Enter 누름
+                            setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 뗌
+                        }, 100);
+                        setTimeout(() => {
+                            rfb.sendKey(0x0020, '', true); // Space 누름 (다시)
+                            setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
+                        }, 200);
+                    } catch(e) {
+                        console.log('화면 활성화 키보드 이벤트 실패:', e.message);
+                    }
+                }, 300);
+                
+                // 3. Canvas 포커스
+                setTimeout(() => {
+                    rfb.focus();
+                    const canvas = document.getElementById('vnc-canvas');
+                    canvas.click();
+                }, 500);
+                
+                console.log('화면 활성화 시퀀스 완료');
+            } else {
+                console.log('VNC 연결되지 않음 - 화면 활성화 실패');
             }
         };
         
@@ -244,6 +457,12 @@
         // 페이지 로드 후 연결 시작 (ES6 모듈은 즉시 사용 가능)
         document.addEventListener('DOMContentLoaded', function() {
             console.log('DOM 로드 완료, VNC 연결 시작...');
+            
+            // VM 상태에 따른 안내
+            if (vmStatus !== 'running') {
+                showStatus('⚠️ VM 상태 확인', `VM이 현재 ${vmStatus} 상태입니다. 화면이 나타나지 않을 수 있습니다.`, 'warning');
+            }
+            
             setTimeout(connectVNC, 1000);
         });
         
@@ -253,6 +472,16 @@
                 rfb.disconnect();
             }
         });
+        
+        // 창 크기 변경 시 Canvas 크기 조정
+        window.addEventListener('resize', function() {
+            if (isConnected) {
+                setTimeout(() => {
+                    forceCanvasResize();
+                    resizeCanvas();
+                }, 100);
+            }
+        });
     </script>
 </body>
 </html>

farmq-admin/templates/vnc_simple.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ vm_name }} - VNC 콘솔</title>
+    
+    <style>
+        body {
+            margin: 0;
+            background-color: dimgrey;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        html {
+            height: 100%;
+        }
+
+        #top_bar {
+            background-color: #6e84a3;
+            color: white;
+            font: bold 12px Helvetica;
+            padding: 6px 5px 4px 5px;
+            border-bottom: 1px outset;
+        }
+        #status {
+            text-align: center;
+        }
+        #sendCtrlAltDelButton {
+            position: fixed;
+            top: 0px;
+            right: 120px;
+            border: 1px outset;
+            padding: 5px 5px 4px 5px;
+            cursor: pointer;
+        }
+        
+        #refreshTicketButton {
+            position: fixed;
+            top: 0px;
+            right: 0px;
+            border: 1px outset;
+            padding: 5px 5px 4px 5px;
+            cursor: pointer;
+            background-color: #5bc0de;
+        }
+
+        #screen {
+            flex: 1;
+            overflow: hidden;
+        }
+    </style>
+
+    <script type="module" crossorigin="anonymous">
+        // RFB holds the API to connect and communicate with a VNC server
+        import RFB from '/static/novnc/core/rfb.js';
+
+        let rfb;
+        let desktopName;
+
+        // HTML 엔티티 디코딩 함수
+        function decodeHtmlEntities(text) {
+            const textarea = document.createElement('textarea');
+            textarea.innerHTML = text;
+            return textarea.value;
+        }
+
+        // When this function is called we have
+        // successfully connected to a server
+        function connectedToServer(e) {
+            status("Connected to " + desktopName);
+        }
+
+        // This function is called when we are disconnected
+        function disconnectedFromServer(e) {
+            if (e.detail.clean) {
+                status("Disconnected");
+            } else {
+                status("Something went wrong, connection is closed");
+            }
+        }
+
+        // When this function is called, the server requires
+        // credentials to authenticate
+        function credentialsAreRequired(e) {
+            console.log('VNC 인증 정보가 필요합니다. 티켓을 새로고침합니다...');
+            refreshVNCTicket();
+        }
+
+        // VNC 보안 실패 시 티켓 새로고침
+        function onSecurityFailure(e) {
+            console.log('VNC 보안 인증 실패:', e.detail);
+            status("Authentication failed - refreshing ticket...");
+            refreshVNCTicket();
+        }
+
+        // VNC 티켓 새로고침
+        function refreshVNCTicket() {
+            const sessionId = window.location.pathname.split('/').pop();
+            
+            fetch(`/api/vnc/refresh/${sessionId}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    console.log('✅ 새 VNC 티켓 받음, 재연결 시도...');
+                    status("Got new ticket - reconnecting...");
+                    
+                    // 기존 연결 종료
+                    if (rfb) {
+                        rfb.disconnect();
+                    }
+                    
+                    // 잠시 후 새 티켓으로 재연결
+                    setTimeout(() => {
+                        connectWithNewTicket(data.websocket_url, data.password);
+                    }, 1000);
+                } else {
+                    status("Failed to refresh ticket: " + (data.error || 'Unknown error'));
+                }
+            })
+            .catch(error => {
+                console.error('티켓 새로고침 실패:', error);
+                status("Failed to refresh ticket");
+            });
+        }
+
+        // 새 티켓으로 재연결
+        function connectWithNewTicket(newWebsocketUrl, newPassword) {
+            console.log('새 티켓으로 VNC 재연결 시도...');
+            status("Reconnecting with new ticket...");
+            
+            const decodedUrl = decodeHtmlEntities(newWebsocketUrl);
+            const decodedPassword = decodeHtmlEntities(newPassword);
+            
+            console.log('새 WebSocket URL:', decodedUrl);
+            console.log('새 VNC Password:', decodedPassword);
+            
+            // 새 RFB 연결 생성
+            rfb = new RFB(document.getElementById('screen'), decodedUrl,
+                          { credentials: { password: decodedPassword } });
+
+            // 이벤트 리스너 재등록
+            rfb.addEventListener("connect", connectedToServer);
+            rfb.addEventListener("disconnect", disconnectedFromServer);
+            rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+            rfb.addEventListener("desktopname", updateDesktopName);
+            rfb.addEventListener("securityfailure", onSecurityFailure);
+
+            // 설정 적용
+            rfb.viewOnly = false;
+            rfb.scaleViewport = true;
+        }
+
+        // When this function is called we have received
+        // a desktop name from the server
+        function updateDesktopName(e) {
+            desktopName = e.detail.name;
+        }
+
+        // Since most operating systems will catch Ctrl+Alt+Del
+        // before they get a chance to be intercepted by the browser,
+        // we provide a way to emulate this key sequence.
+        function sendCtrlAltDel() {
+            rfb.sendCtrlAltDel();
+            return false;
+        }
+
+        // Show a status text in the top bar
+        function status(text) {
+            document.getElementById('status').textContent = text;
+        }
+
+        document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
+        document.getElementById('refreshTicketButton').onclick = function() {
+            refreshVNCTicket();
+        };
+
+        // VNC 연결 정보 (서버에서 전달)
+        const rawWebsocketUrl = '{{ websocket_url|safe }}';
+        const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
+        const rawPassword = '{{ password|safe }}';
+        const vncPassword = decodeHtmlEntities(rawPassword);
+
+        console.log('WebSocket URL:', websocketUrl);
+        console.log('VNC Password:', vncPassword);
+
+        status("Connecting");
+
+        // Creating a new RFB object will start a new connection
+        rfb = new RFB(document.getElementById('screen'), websocketUrl,
+                      { credentials: { password: vncPassword } });
+
+        // Add listeners to important events from the RFB module
+        rfb.addEventListener("connect", connectedToServer);
+        rfb.addEventListener("disconnect", disconnectedFromServer);
+        rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+        rfb.addEventListener("desktopname", updateDesktopName);
+        rfb.addEventListener("securityfailure", onSecurityFailure);
+
+        // Set parameters that can be changed on an active connection
+        rfb.viewOnly = false;
+        rfb.scaleViewport = true;
+    </script>
+</head>
+
+<body>
+    <div id="top_bar">
+        <div id="status">Loading</div>
+        <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
+        <div id="refreshTicketButton">🔄 Refresh</div>
+    </div>
+    <div id="screen">
+        <!-- This is where the remote screen will appear -->
+    </div>
+</body>
+</html>