Implement login page proxy and CAPTCHA handling in MyTischtennisClient and Controller. Enhance login process with CAPTCHA token extraction and error handling. Update frontend to support iframe-based login and improve user experience with loading indicators.

2025-11-23 15:18:53 +01:00
parent b74cb30cf6
commit f7a799ea7f
15 changed files with 702 additions and 284 deletions
--- a/backend/controllers/myTischtennisController.js
+++ b/backend/controllers/myTischtennisController.js
@@ -1,5 +1,6 @@
 import myTischtennisService from '../services/myTischtennisService.js';
 import HttpError from '../exceptions/HttpError.js';
+import axios from 'axios';

 class MyTischtennisController {
  /**
@@ -199,6 +200,292 @@ class MyTischtennisController {
      next(error);
    }
  }
+
+  /**
+   * GET /api/mytischtennis/login-page
+   * Proxy für Login-Seite (für iframe)
+   * Lädt die Login-Seite von mytischtennis.de und modifiziert sie, sodass Form-Submissions über unseren Proxy gehen
+   * Authentifizierung ist optional - Token kann als Query-Parameter übergeben werden
+   */
+  async getLoginPage(req, res, next) {
+    try {
+      // Versuche, userId aus Token zu bekommen (optional)
+      let userId = null;
+      const token = req.query.token || req.headers['authorization']?.split(' ')[1] || req.headers['authcode'];
+      if (token) {
+        try {
+          const jwt = (await import('jsonwebtoken')).default;
+          const decoded = jwt.verify(token, process.env.JWT_SECRET);
+          userId = decoded.userId;
+        } catch (err) {
+          // Token ungültig - ignorieren
+        }
+      }
+      
+      // Speichere userId im Request für submitLogin
+      req.userId = userId;
+      
+      // Lade die Login-Seite von mytischtennis.de
+      const response = await axios.get('https://www.mytischtennis.de/login?next=%2F', {
+        headers: {
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+          'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
+          'Accept-Language': 'de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7'
+        },
+        maxRedirects: 5,
+        validateStatus: () => true // Akzeptiere alle Status-Codes
+      });
+
+      // Setze Cookies aus der Response
+      const setCookieHeaders = response.headers['set-cookie'];
+      if (setCookieHeaders) {
+        res.setHeader('Set-Cookie', setCookieHeaders);
+      }
+
+      // Modifiziere HTML: Ändere Form-Action auf unseren Proxy
+      let html = response.data;
+      if (typeof html === 'string') {
+        // Füge Token als Hidden-Input hinzu, damit submitLogin die userId bekommt
+        const tokenInput = userId ? `<input type="hidden" name="__token" value="${token}" />` : '';
+        
+        // Ersetze Form-Action URLs und füge Token-Input hinzu
+        html = html.replace(
+          /(<form[^>]*action="[^"]*\/login[^"]*"[^>]*>)/g,
+          `$1${tokenInput}`
+        );
+        html = html.replace(
+          /action="([^"]*\/login[^"]*)"/g,
+          'action="/api/mytischtennis/login-submit"'
+        );
+        // Ersetze auch relative URLs
+        html = html.replace(
+          /action="\/login/g,
+          'action="/api/mytischtennis/login-submit'
+        );
+      }
+
+      // Setze Content-Type
+      res.setHeader('Content-Type', response.headers['content-type'] || 'text/html; charset=utf-8');
+
+      // Sende den modifizierten HTML-Inhalt
+      res.status(response.status).send(html);
+    } catch (error) {
+      console.error('Fehler beim Laden der Login-Seite:', error);
+      next(error);
+    }
+  }
+
+  /**
+   * POST /api/mytischtennis/login-submit
+   * Proxy für Login-Form-Submission
+   * Leitet den Login-Request durch, damit Cookies im Backend-Kontext bleiben
+   * Authentifizierung ist optional - iframe kann keinen Token mitsenden
+   */
+  async submitLogin(req, res, next) {
+    try {
+      // Versuche, userId aus Token zu bekommen (aus Query-Parameter oder Hidden-Input)
+      let userId = null;
+      const token = req.query.token || req.body.__token || req.headers['authorization']?.split(' ')[1] || req.headers['authcode'];
+      if (token) {
+        try {
+          const jwt = (await import('jsonwebtoken')).default;
+          const decoded = jwt.verify(token, process.env.JWT_SECRET);
+          userId = decoded.userId;
+        } catch (err) {
+          // Token ungültig - ignorieren
+        }
+      }
+      
+      // Entferne __token aus req.body, damit es nicht an mytischtennis.de gesendet wird
+      if (req.body.__token) {
+        delete req.body.__token;
+      }
+      
+      // Hole Cookies aus dem Request
+      const cookies = req.headers.cookie || '';
+      
+      // Leite den Login-Request an mytischtennis.de weiter
+      const response = await axios.post(
+        'https://www.mytischtennis.de/login?next=%2F&_data=routes%2F_auth%2B%2Flogin',
+        req.body, // Form-Daten
+        {
+          headers: {
+            'Cookie': cookies,
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+            'Accept': '*/*',
+            'Referer': 'https://www.mytischtennis.de/login?next=%2F'
+          },
+          maxRedirects: 0,
+          validateStatus: () => true
+        }
+      );
+
+      // Setze Cookies aus der Response
+      const setCookieHeaders = response.headers['set-cookie'];
+      if (setCookieHeaders) {
+        res.setHeader('Set-Cookie', setCookieHeaders);
+      }
+
+      // Setze andere relevante Headers
+      if (response.headers['content-type']) {
+        res.setHeader('Content-Type', response.headers['content-type']);
+      }
+      if (response.headers['location']) {
+        res.setHeader('Location', response.headers['location']);
+      }
+
+      // Prüfe, ob Login erfolgreich war (durch Prüfung der Cookies)
+      const authCookie = setCookieHeaders?.find(cookie => cookie.startsWith('sb-10-auth-token='));
+      if (authCookie && userId) {
+        // Login erfolgreich - speichere Session (nur wenn userId vorhanden)
+        await this.saveSessionFromCookie(userId, authCookie);
+      }
+
+      // Sende Response weiter
+      res.status(response.status).send(response.data);
+    } catch (error) {
+      console.error('Fehler beim Login-Submit:', error);
+      next(error);
+    }
+  }
+
+  /**
+   * Speichere Session-Daten aus Cookie
+   */
+  async saveSessionFromCookie(userId, cookieString) {
+    try {
+      const tokenMatch = cookieString.match(/sb-10-auth-token=base64-([^;]+)/);
+      if (!tokenMatch) {
+        throw new Error('Token-Format ungültig');
+      }
+
+      const base64Token = tokenMatch[1];
+      const decodedToken = Buffer.from(base64Token, 'base64').toString('utf-8');
+      const tokenData = JSON.parse(decodedToken);
+
+      const MyTischtennis = (await import('../models/MyTischtennis.js')).default;
+      const myTischtennisAccount = await MyTischtennis.findOne({ where: { userId } });
+      
+      if (myTischtennisAccount) {
+        myTischtennisAccount.accessToken = tokenData.access_token;
+        myTischtennisAccount.refreshToken = tokenData.refresh_token;
+        myTischtennisAccount.expiresAt = tokenData.expires_at;
+        myTischtennisAccount.cookie = cookieString.split(';')[0].trim();
+        myTischtennisAccount.userData = tokenData.user;
+        myTischtennisAccount.lastLoginSuccess = new Date();
+        myTischtennisAccount.lastLoginAttempt = new Date();
+        
+        // Hole Club-Informationen
+        const myTischtennisClient = (await import('../clients/myTischtennisClient.js')).default;
+        const profileResult = await myTischtennisClient.getUserProfile(myTischtennisAccount.cookie);
+        if (profileResult.success) {
+          myTischtennisAccount.clubId = profileResult.clubId;
+          myTischtennisAccount.clubName = profileResult.clubName;
+          myTischtennisAccount.fedNickname = profileResult.fedNickname;
+        }
+        
+        await myTischtennisAccount.save();
+      }
+    } catch (error) {
+      console.error('Fehler beim Speichern der Session:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * POST /api/mytischtennis/extract-session
+   * Extrahiere Session nach Login im iframe
+   * Versucht, die Session-Daten aus den Cookies zu extrahieren
+   * Authentifizierung ist optional - iframe kann keinen Token mitsenden
+   */
+  async extractSession(req, res, next) {
+    try {
+      // Versuche, userId aus Token zu bekommen (optional)
+      let userId = req.user?.id;
+      
+      // Falls kein Token vorhanden, versuche userId aus Account zu bekommen (falls E-Mail bekannt)
+      if (!userId) {
+        // Kann nicht ohne Authentifizierung arbeiten - Session kann nicht gespeichert werden
+        return res.status(401).json({ 
+          error: 'Authentifizierung erforderlich zum Speichern der Session' 
+        });
+      }
+      
+      // Hole die Cookies aus dem Request
+      const cookies = req.headers.cookie || '';
+      
+      // Versuche, die Session zu verifizieren, indem wir einen Request mit den Cookies machen
+      const response = await axios.get('https://www.mytischtennis.de/?_data=root', {
+        headers: {
+          'Cookie': cookies,
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          'Accept': 'application/json'
+        },
+        validateStatus: () => true
+      });
+
+      // Prüfe, ob wir eingeloggt sind (durch Prüfung der Response)
+      if (response.status === 200 && response.data?.userProfile) {
+        // Session erfolgreich - speichere die Daten
+        const account = await myTischtennisService.getAccount(userId);
+        if (!account) {
+          throw new HttpError('Kein myTischtennis-Account verknüpft', 404);
+        }
+
+        // Extrahiere Cookie-String
+        const cookieString = cookies.split(';').find(c => c.trim().startsWith('sb-10-auth-token='));
+        if (!cookieString) {
+          throw new HttpError('Kein Auth-Token in Cookies gefunden', 400);
+        }
+
+        // Parse Token aus Cookie
+        const tokenMatch = cookieString.match(/sb-10-auth-token=base64-([^;]+)/);
+        if (!tokenMatch) {
+          throw new HttpError('Token-Format ungültig', 400);
+        }
+
+        const base64Token = tokenMatch[1];
+        const decodedToken = Buffer.from(base64Token, 'base64').toString('utf-8');
+        const tokenData = JSON.parse(decodedToken);
+
+        // Aktualisiere Account mit Session-Daten
+        const MyTischtennis = (await import('../models/MyTischtennis.js')).default;
+        const myTischtennisAccount = await MyTischtennis.findOne({ where: { userId } });
+        
+        if (myTischtennisAccount) {
+          myTischtennisAccount.accessToken = tokenData.access_token;
+          myTischtennisAccount.refreshToken = tokenData.refresh_token;
+          myTischtennisAccount.expiresAt = tokenData.expires_at;
+          myTischtennisAccount.cookie = cookieString.trim();
+          myTischtennisAccount.userData = tokenData.user;
+          myTischtennisAccount.lastLoginSuccess = new Date();
+          myTischtennisAccount.lastLoginAttempt = new Date();
+          
+          // Hole Club-Informationen
+          const myTischtennisClient = (await import('../clients/myTischtennisClient.js')).default;
+          const profileResult = await myTischtennisClient.getUserProfile(cookieString.trim());
+          if (profileResult.success) {
+            myTischtennisAccount.clubId = profileResult.clubId;
+            myTischtennisAccount.clubName = profileResult.clubName;
+            myTischtennisAccount.fedNickname = profileResult.fedNickname;
+          }
+          
+          await myTischtennisAccount.save();
+        }
+
+        res.status(200).json({
+          success: true,
+          message: 'Session erfolgreich extrahiert und gespeichert'
+        });
+      } else {
+        throw new HttpError('Nicht eingeloggt oder Session ungültig', 401);
+      }
+    } catch (error) {
+      console.error('Fehler beim Extrahieren der Session:', error);
+      next(error);
+    }
+  }
 }

 export default new MyTischtennisController();