fix(login): fetch school captcha via GetCaptcha endpoint

Author: alvin000009238

app/routes/auth.py

@@ -28,6 +28,7 @@ def login():
     data = data or {}
     username = data.get('username')
     password = data.get('password')
+    captcha_code = (data.get('captcha_code') or '').strip()
 
     masked_username = (username[:3] + "***") if username and len(username) > 3 else "***"
     logger.info(f'Login attempt for user: {masked_username}')
@@ -63,17 +64,43 @@ def login():
     if not username or not password:
         return jsonify({'success': False, 'message': '請輸入帳號密碼'}), 400
 
+    if not captcha_code:
+        return jsonify({'success': False, 'message': '請輸入驗證碼'}), 400
+
     fetcher = current_app.config['GRADE_FETCHER']
-    success, message, payload = login_and_build_session_payload(fetcher, username, password)
+    school_login_context = session.get('school_login_context')
+    success, message, payload = login_and_build_session_payload(
+        fetcher,
+        username,
+        password,
+        captcha_code=captcha_code,
+        login_context=school_login_context,
+    )
+
+    # 驗證碼一次性使用，避免重放
+    session.pop('school_login_context', None)
+
     if not success:
-        return jsonify({'success': False, 'message': message}), 401
+        need_refresh_captcha = '驗證碼' in (message or '')
+        return jsonify({'success': False, 'message': message, 'need_refresh_captcha': need_refresh_captcha}), 401
 
     session.update(payload)
     logger.info('Login successful')
 
     return jsonify({'success': True, 'message': message})
 
 
+@bp.route('/api/school-captcha')
+def school_captcha():
+    fetcher = current_app.config['GRADE_FETCHER']
+    success, message, payload = fetcher.prepare_login_captcha()
+    if not success:
+        return jsonify({'success': False, 'message': message}), 502
+
+    session['school_login_context'] = payload['context']
+    return jsonify({'success': True, 'image_data_url': payload['image_data_url']})
+
+
 @bp.route('/api/logout', methods=['POST'])
 def logout():
     session.clear()

app/services/auth_service.py

@@ -1,7 +1,12 @@
 
 
-def login_and_build_session_payload(fetcher, username, password):
-    success, message, cookies, student_no, token = fetcher.login_and_get_tokens(username, password)
+def login_and_build_session_payload(fetcher, username, password, captcha_code=None, login_context=None):
+    success, message, cookies, student_no, token = fetcher.login_and_get_tokens(
+        username,
+        password,
+        captcha_code=captcha_code,
+        login_context=login_context,
+    )
 
     if not success:
         return False, message, None

fetcher.py

@@ -2,6 +2,8 @@
 from bs4 import BeautifulSoup
 from concurrent.futures import ThreadPoolExecutor
 from flask import g, has_request_context
+import base64
+import time
 
 logger = logging.getLogger('SchoolGradesServer.Fetcher')
 
@@ -42,6 +44,7 @@ def _log(level: str, user_id: str, msg: str, req_id: str = None):
 class GradeFetcher:
     BASE = "https://shcloud2.k12ea.gov.tw/CLHSTYC"
     LOGIN_PAGE = f"{BASE}/Auth/Auth/CloudLogin"
+    CAPTCHA_ENDPOINT = f"{BASE}/Auth/Auth/GetCaptcha"
     DO_CHECK = f"{BASE}/Auth/Auth/DoCloudLoginCheck"
     GRADES_PAGE = f"{BASE}/ICampus/StudentInfo/Index?page=%E6%88%90%E7%B8%BE%E6%9F%A5%E8%A9%A2"
     API_BASE = f"{BASE}/ICampus"
@@ -62,16 +65,83 @@ def _get_hidden_token(self, html: str) -> str:
             raise RuntimeError("找不到 __RequestVerificationToken hidden input")
         return el["value"]
 
-    def login_and_get_tokens(self, username, password):
+    def _extract_hidden_input(self, html: str, field_name: str, default: str = "") -> str:
+        soup = BeautifulSoup(html, "html.parser")
+        el = soup.select_one(f'input[name="{field_name}"]')
+        if not el:
+            return default
+        return (el.get("value") or default).strip()
+
+    def _build_captcha_url(self) -> str:
+        # 學校系統使用 t query 參數避免快取
+        ts = int(time.time() * 1000)
+        return f"{self.CAPTCHA_ENDPOINT}?t={ts}"
+
+    def prepare_login_captcha(self):
+        """Prepare school login captcha and context for subsequent login POST."""
+        try:
+            s = self.session_factory()
+            r = s.get(self.LOGIN_PAGE)
+            r.raise_for_status()
+
+            html = r.text
+            login_token = self._get_hidden_token(html)
+            shcaptcha_gen_code = self._extract_hidden_input(html, "ShCaptchaGenCode", "10")
+            captcha_url = self._build_captcha_url()
+
+            image_resp = s.get(
+                captcha_url,
+                headers={
+                    "Referer": self.LOGIN_PAGE,
+                    "X-Requested-With": "XMLHttpRequest",
+                }
+            )
+            image_resp.raise_for_status()
+            content_type = image_resp.headers.get("Content-Type", "image/png")
+
+            if "image" not in content_type.lower():
+                return False, "學校驗證碼回應格式異常", None
+
+            image_b64 = base64.b64encode(image_resp.content).decode("ascii")
+
+            context = {
+                "login_token": login_token,
+                "shcaptcha_gen_code": shcaptcha_gen_code,
+                "cookies": {c.name: c.value for c in s.cookies if c.name and c.value is not None},
+            }
+
+            payload = {
+                "image_data_url": f"data:{content_type};base64,{image_b64}",
+                "context": context,
+            }
+            return True, "OK", payload
+        except Exception as e:
+            _log('error', '', f"Prepare captcha exception: {e}")
+            return False, f"取得學校驗證碼失敗: {str(e)}", None
+
+    def login_and_get_tokens(self, username, password, captcha_code=None, login_context=None):
         """Login via requests session, return (success, message, cookies_dict, student_no, token)."""
         try:
             _log('info', username, "Attempting login (requests mode)")
             s = self.session_factory()
 
-            # 1) GET login page to obtain cookies + hidden token
-            r = s.get(self.LOGIN_PAGE)
-            r.raise_for_status()
-            login_token = self._get_hidden_token(r.text)
+            login_token = None
+            shcaptcha_gen_code = "10"
+
+            # 優先使用前端先取得的驗證碼上下文，確保驗證碼與登入請求同步
+            if login_context:
+                login_token = login_context.get("login_token")
+                shcaptcha_gen_code = login_context.get("shcaptcha_gen_code") or "10"
+                for k, v in (login_context.get("cookies") or {}).items():
+                    if k and v is not None:
+                        s.cookies.set(k, v)
+
+            # fallback：若未提供 context，沿用舊流程直接抓 login page
+            if not login_token:
+                r = s.get(self.LOGIN_PAGE)
+                r.raise_for_status()
+                login_token = self._get_hidden_token(r.text)
+                shcaptcha_gen_code = self._extract_hidden_input(r.text, "ShCaptchaGenCode", "10")
 
             # 2) POST login
             headers = {
@@ -90,7 +160,8 @@ def login_and_get_tokens(self, username, password):
                 "SchoolName": "國立中大壢中",
                 "GoogleToken": "8",
                 "isRegistration": "false",
-                "ShCaptchaGenCode": "10",
+                "ShCaptchaGenCode": shcaptcha_gen_code,
+                "ShCaptcha": (captcha_code or "").strip(),
                 "__RequestVerificationToken": login_token,
             }
 

frontend/styles/modal.css

@@ -738,6 +738,36 @@ visibility: visible;
 
 }
 
+.captcha-row {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 10px;
+
+}
+
+.school-captcha-image {
+
+    flex: 1;
+
+    min-height: 48px;
+
+    max-height: 56px;
+
+    border: 1px solid var(--md-sys-color-outline);
+
+    border-radius: var(--radius-sm);
+
+    object-fit: contain;
+
+    background: var(--color-surface);
+
+    padding: 4px;
+
+}
+
 
 
 .toggle-password-btn {
@@ -813,4 +843,3 @@ visibility: visible;
 }
 
 
-

frontend/sync.js

@@ -26,6 +26,9 @@ export function setupSyncFeature() {
     const passwordInput = document.getElementById('passwordInput');
     const demoFillLoginBtn = document.getElementById('demoFillLoginBtn');
     const loginStatus = document.getElementById('loginStatus');
+    const captchaInput = document.getElementById('captchaInput');
+    const schoolCaptchaImage = document.getElementById('schoolCaptchaImage');
+    const refreshSchoolCaptcha = document.getElementById('refreshSchoolCaptcha');
 
     // Select Exam Form
     const closeSelectModal = document.getElementById('closeSelectModal');
@@ -59,6 +62,27 @@ export function setupSyncFeature() {
         emitOnboardingEvent(ONBOARDING_EVENTS.DEMO_CREDENTIALS_FILLED);
     };
 
+    const loadSchoolCaptcha = async () => {
+        if (!schoolCaptchaImage) return;
+        schoolCaptchaImage.src = '';
+        schoolCaptchaImage.alt = '學校系統驗證碼載入中';
+        showStatus(loginStatus, '正在載入學校驗證碼...', 'normal');
+        try {
+            const res = await fetch(`${API_BASE}/school-captcha`, {
+                credentials: 'include'
+            });
+            const data = await res.json();
+            if (!res.ok || !data.success || !data.image_data_url) {
+                throw new Error(data.message || '驗證碼載入失敗');
+            }
+            schoolCaptchaImage.src = data.image_data_url;
+            schoolCaptchaImage.alt = '學校系統驗證碼';
+            showStatus(loginStatus, '請輸入圖中的驗證碼。', 'normal');
+        } catch (error) {
+            showStatus(loginStatus, `驗證碼載入失敗：${error.message}`, 'error');
+        }
+    };
+
     const openLoginModal = () => {
         toggleModal(loginModal, true);
         if (demoFillLoginBtn) {
@@ -67,7 +91,8 @@ export function setupSyncFeature() {
         if (isDemoModeEnabled()) {
             showStatus(loginStatus, '教學模式已啟用，先點「一鍵填入教學帳密」。', 'normal');
         } else {
-            loginStatus.textContent = '';
+            captchaInput.value = '';
+            loadSchoolCaptcha();
         }
         usernameInput.focus();
         emitOnboardingEvent(ONBOARDING_EVENTS.LOGIN_MODAL_OPEN);
@@ -133,12 +158,18 @@ export function setupSyncFeature() {
     const handleLogin = async () => {
         const username = usernameInput.value.trim();
         const password = passwordInput.value.trim();
+        const captchaCode = captchaInput.value.trim();
 
         if (!username || !password) {
             showStatus(loginStatus, '請輸入帳號密碼', 'error');
             return;
         }
 
+        if (!isDemoModeEnabled() && !captchaCode) {
+            showStatus(loginStatus, '請輸入驗證碼', 'error');
+            return;
+        }
+
         if (isDemoModeEnabled()) {
             showStatus(loginStatus, '登入中...', 'normal');
             confirmLogin.disabled = true;
@@ -173,7 +204,7 @@ export function setupSyncFeature() {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
-                body: JSON.stringify({ username, password, turnstile_token: turnstileToken })
+                body: JSON.stringify({ username, password, captcha_code: captchaCode, turnstile_token: turnstileToken })
             });
             const data = await res.json();
 
@@ -184,10 +215,15 @@ export function setupSyncFeature() {
                     toggleModal(loginModal, false);
                     openSelectExamModal();
                     passwordInput.value = '';
+                    captchaInput.value = '';
                     loginStatus.textContent = '';
                 }, 500);
             } else {
                 showStatus(loginStatus, data.message || '登入失敗', 'error');
+                if (data.need_refresh_captcha) {
+                    captchaInput.value = '';
+                    await loadSchoolCaptcha();
+                }
 
             }
         } catch (error) {
@@ -212,6 +248,13 @@ export function setupSyncFeature() {
         demoFillLoginBtn.addEventListener('click', fillDemoCredentials);
     }
 
+    if (refreshSchoolCaptcha) {
+        refreshSchoolCaptcha.addEventListener('click', async () => {
+            captchaInput.value = '';
+            await loadSchoolCaptcha();
+        });
+    }
+
     // Close Login Modal
     closeLoginModal.addEventListener('click', () => toggleModal(loginModal, false));
     cancelLogin.addEventListener('click', () => toggleModal(loginModal, false));

public/index.html

@@ -201,6 +201,16 @@ <h3 class="flex-center-gap-8">
                                 </button>
                             </div>
                         </div>
+                        <div class="form-group">
+                            <div class="captcha-row">
+                                <img id="schoolCaptchaImage" class="school-captcha-image" alt="學校系統驗證碼" />
+                                <button type="button" class="modal-btn cancel" id="refreshSchoolCaptcha">重新整理</button>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <input type="text" id="captchaInput" name="captcha" autocomplete="off" placeholder=" ">
+                            <label for="captchaInput">驗證碼</label>
+                        </div>
                         <button type="button" class="modal-btn reload demo-fill-login-btn hidden-full-center"
                             id="demoFillLoginBtn" data-tour="demo-fill-login">
                             一鍵填入教學帳密