VNC WebSocket 인증 문제 해결 및 사용자 포털 계획 추가

- Proxmox VNC 티켓 생성 시 패스워드 생성 활성화
- VNC 세션에 생성된 패스워드 저장 및 전달
- noVNC 클라이언트에서 실제 패스워드 사용으로 인증 문제 해결
- ES6 모듈 방식으로 noVNC 라이브러리 로드
- HTML 엔티티 디코딩으로 WebSocket URL 문제 해결
- PharmQ 사용자 포털 서비스 계획서 추가 (KakaoTalk SSO, TossPayments)

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

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

farmq-admin/app.py

@@ -547,6 +547,7 @@ def create_app(config_name=None):
                 'vmid': vmid,
                 'vm_name': vm_name,
                 'websocket_url': vnc_data['websocket_url'],
+                'password': vnc_data.get('password', ''),  # VNC 패스워드 추가
                 'created_at': datetime.now()
             }
             
@@ -571,16 +572,13 @@ def create_app(config_name=None):
             
             session_data = vnc_sessions[session_id]
             
-            # Proxmox 기본 noVNC URL로 리다이렉트
-            proxmox_vnc_url = f"https://{PROXMOX_HOST}:443/?console=kvm&vmid={session_data['vmid']}&node={session_data['node']}"
-            
-            # 리다이렉트 페이지 표시
-            return render_template('vnc_redirect.html',
+            # 직접 WebSocket VNC 연결 (noVNC)
+            return render_template('vnc_console.html',
                                  vm_name=session_data['vm_name'],
                                  vmid=session_data['vmid'],
                                  node=session_data['node'],
-                                 proxmox_url=proxmox_vnc_url,
-                                 host=PROXMOX_HOST)
+                                 websocket_url=session_data['websocket_url'],
+                                 password=session_data.get('password', ''))
                                  
         except Exception as e:
             print(f"❌ VNC 콘솔 오류: {e}")

farmq-admin/templates/vnc_console.html

@@ -107,17 +107,19 @@
         </div>
     </div>
 
-    <!-- CDN에서 noVNC 로드 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/noVNC/1.3.0/core/rfb.min.js"></script>
-    
     <!-- Bootstrap Icons -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
-    <script>
-        // VNC 연결 설정
-        const websocketUrl = '{{ websocket_url }}';
+    <script type="module">
+        // noVNC 라이브러리 import
+        import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc/core/rfb.js';
+        
+        // VNC 연결 설정 (HTML 엔티티 디코딩)
+        const rawWebsocketUrl = '{{ websocket_url|safe }}';
+        const websocketUrl = rawWebsocketUrl.replace(/&amp;/g, '&');
         const vmName = '{{ vm_name }}';
+        const vncPassword = '{{ password }}';
         
         let rfb;
         let isConnected = false;
@@ -129,15 +131,27 @@
         // VNC 연결 시작
         function connectVNC() {
             try {
-                console.log('VNC 연결 시도:', websocketUrl);
+                console.log('Raw WebSocket URL:', rawWebsocketUrl);
+                console.log('Decoded WebSocket URL:', websocketUrl);
+                console.log('VNC Password:', vncPassword);
+                console.log('RFB 클래스 사용 가능:', !!RFB);
                 
-                // RFB 객체 생성 (간소화된 설정)
-                rfb = new RFB(canvas, websocketUrl);
+                // URL 유효성 검사
+                if (!websocketUrl || !websocketUrl.startsWith('wss://')) {
+                    throw new Error('유효하지 않은 WebSocket URL');
+                }
+                
+                // RFB 객체 생성
+                rfb = new RFB(canvas, websocketUrl, {
+                    credentials: { password: vncPassword },
+                    shared: true
+                });
                 
                 // 이벤트 리스너 등록
                 rfb.addEventListener('connect', onConnected);
                 rfb.addEventListener('disconnect', onDisconnected);
                 rfb.addEventListener('credentialsrequired', onCredentialsRequired);
+                rfb.addEventListener('securityfailure', onSecurityFailure);
                 
                 // 화면 크기 자동 조정
                 rfb.scaleViewport = true;
@@ -175,6 +189,12 @@
             showStatus('🔐 인증 필요', 'VNC 서버에서 인증이 필요합니다.', 'warning');
         }
         
+        // 보안 실패
+        function onSecurityFailure(e) {
+            console.log('VNC 보안 실패:', e.detail);
+            showStatus('🔒 보안 실패', 'VNC 보안 인증에 실패했습니다: ' + (e.detail.reason || 'Unknown'), 'danger');
+        }
+        
         // 상태 표시
         function showStatus(title, message, type = 'info') {
             statusDiv.innerHTML = `
@@ -221,15 +241,9 @@
             window.close();
         };
         
-        // 페이지 로드 후 연결 시작
-        window.addEventListener('load', function() {
-            // noVNC 라이브러리 로드 확인
-            if (typeof RFB === 'undefined') {
-                showStatus('❌ 라이브러리 오류', 'noVNC 라이브러리를 로드할 수 없습니다.', 'danger');
-                return;
-            }
-            
-            // 잠시 후 연결 시작
+        // 페이지 로드 후 연결 시작 (ES6 모듈은 즉시 사용 가능)
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM 로드 완료, VNC 연결 시작...');
             setTimeout(connectVNC, 1000);
         });
         

farmq-admin/utils/proxmox_client.py

@@ -106,7 +106,10 @@ class ProxmoxClient:
     def get_vnc_ticket(self, node: str, vmid: int) -> Optional[Dict]:
         """VNC 접속 티켓 생성"""
         try:
-            data = {'websocket': '1'}
+            data = {
+                'websocket': '1',
+                'generate-password': '1'  # 패스워드 생성 활성화
+            }
             response = self.session.post(
                 f"{self.base_url}/nodes/{node}/qemu/{vmid}/vncproxy",
                 data=data,
@@ -115,15 +118,21 @@ class ProxmoxClient:
             
             if response.status_code == 200:
                 vnc_data = response.json()['data']
+                print(f"✅ VNC 티켓 생성 성공: {vnc_data}")
                 
                 # WebSocket URL 생성
                 encoded_ticket = quote_plus(vnc_data['ticket'])
                 vnc_data['websocket_url'] = f"wss://{self.host}:443/api2/json/nodes/{node}/qemu/{vmid}/vncwebsocket?port={vnc_data['port']}&vncticket={encoded_ticket}"
                 
+                # 디버깅 정보 추가
+                print(f"🔗 WebSocket URL: {vnc_data['websocket_url']}")
                 return vnc_data
+            else:
+                print(f"❌ VNC 티켓 생성 HTTP 오류: {response.status_code}")
+                print(f"Response: {response.text}")
                 
         except Exception as e:
-            print(f"VNC 티켓 생성 실패: {e}")
+            print(f"❌ VNC 티켓 생성 실패: {e}")
             
         return None