logo
bars

CAPTCHA z obrazkami (ComplexImage)
i CapMonster Cloud

Rozwiązywanie CAPTCHA, instalacja na stronie i testowanie.
Odziedziczyłeś stronę z już wdrożoną captchą lub ochroną, ale bez dostępu do kodu źródłowego? Naturalnie pojawia się pytanie, jaka technologia jest używana, czy działa poprawnie i jak ją przetestować.

W tym artykule staraliśmy się odpowiedzieć na wszystkie najważniejsze pytania. Pierwszym krokiem w rozwiązywaniu problemu jest ustalenie, jaki system ochrony jest używany. W tym celu możesz skorzystać z listy popularnych captcha i systemów ochrony antybotowej, gdzie znajdziesz przykłady graficzne oraz kluczowe cechy, które pomogą szybko rozpoznać, z czym masz do czynienia.

Jeśli okaże się, że na Twojej stronie używany jest ComplexImage, kolejnym krokiem będzie dokładniejsze poznanie jej właściwości i sposobu działania. W tym artykule możesz również zapoznać się z instrukcją integracji systemu ComplexImage, aby w pełni zrozumieć, jak funkcjonuje on na Twojej stronie. Dzięki temu nie tylko lepiej poznasz obecną ochronę, ale też świadomie zaplanujesz jej dalsze utrzymanie.

Co to jest CAPTCHA z obrazkami
Co to jest CAPTCHA z obrazkami
CAPTCHA z obrazkami to rodzaj wizualnej CAPTCHA, w której użytkownik musi wykonać zadanie związane z analizą obrazów. Zazwyczaj system prosi o wybranie obrazków spełniających określony warunek, policzenie liczby obiektów, określenie prawidłowego położenia obiektu lub wykonanie innej akcji wizualnej. W przeciwieństwie do CAPTCHA tekstowej, gdzie wystarczy wpisać znaki z obrazka, CAPTCHA z obrazkami sprawdza zdolność użytkownika do interpretacji informacji wizualnej i wykonywania działań logicznych. Dzięki temu jest trudniejsza do automatycznego rozpoznania i skuteczniej chroni formularze rejestracji, logowania i inne krytyczne punkty witryny przed botami.

Jak rozwiązać CAPTCHA z obrazkami za pomocą CapMonster Cloud

Podczas testowania formularzy z Tencent CAPTCHA często konieczne jest sprawdzenie działania CAPTCHA i upewnienie się, że jest poprawnie zintegrowana.
Możesz ręcznie przetestować CAPTCHA umieszczoną na swojej stronie:
  • Otwórz stronę z formularzem i upewnij się, że CAPTCHA jest widoczna.
  • Spróbuj wysłać formularz bez rozwiązania CAPTCHA — serwer powinien zwrócić błąd.
  • Po prawidłowym rozwiązaniu CAPTCHA formularz powinien zostać wysłany bez błędów.
Do automatycznego rozwiązywania CAPTCHA można użyć specjalistycznych usług, np. CapMonster Cloud — narzędzie, które przyjmuje parametry CAPTCHA, przetwarza je na swoich serwerach i zwraca gotową odpowiedź do zadania CAPTCHA — np. liczby lub współrzędne do kliknięć, które można użyć do przejścia weryfikacji bez udziału użytkownika.

Praca z CapMonster Cloud poprzez API zazwyczaj obejmuje następujące kroki:

Tworzenie zadaniaTworzenie zadania
arrow
Wysyłanie żądania APIWysyłanie żądania API
arrow
Odebranie wynikuOdebranie wyniku
arrow
Umieszczenie tokenu na stronieUmieszczenie tokenu na stronie
arrow
Rozpoznawanie CAPTCHA z obrazkami z użyciem gotowych bibliotek
Usługa CapMonster Cloud udostępnia gotowe biblioteki do wygodnej pracy w językach Python, JavaScript (Node.js) i C#.
Python
JavaScript
C#
Wprowadzenie odpowiedzi i wysłanie formularza
Przykład w Node.js dla pełnego cyklu rozpoznawania CAPTCHA na stronie internetowej. Możliwe podejścia: użycie żądań HTTP do pobrania HTML i parametrów systemu ochrony, wysłanie odpowiedzi i przetworzenie wyniku. Lub, jak w przykładzie poniżej, przy użyciu narzędzi do automatyzacji (np. Playwright) — otwarcie strony, oczekiwanie na weryfikację, przesłanie parametrów przez klienta CapMonster Cloud, otrzymanie wyniku, wstawienie go w odpowiednie pole (do testowania można użyć zarówno poprawnych, jak i niepoprawnych danych) i obejrzenie rezultatu.

// npm install playwright @zennolab_com/capmonstercloud-client
// npx playwright install chromium

import { chromium } from 'playwright';
import { CapMonsterCloudClientFactory, ClientOptions, ComplexImageTaskRecognitionRequest } from '@zennolab_com/capmonstercloud-client';

const API_KEY = "YOUR_API_KEY";
const TARGET_URL = "https://example.com/captcha-page";

async function solveComplexImageTaskPlaywright() {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto(TARGET_URL);

    // Znajdź obraz CAPTCHA
    const captchaHandle = await page.$('#captcha'); // zamień na rzeczywisty selektor
    const captchaBase64 = await captchaHandle.evaluate(img => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL('image/png').split(',')[1];
    });

    console.log("Captcha base64:", captchaBase64.substring(0, 50) + "...");

    const cmcClient = CapMonsterCloudClientFactory.Create(
        new ClientOptions({ clientKey: API_KEY })
    );

    // Wyślij CAPTCHA do rozpoznania
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // zamień na typ CAPTCHA
    });

    const result = await cmcClient.Solve(citRecognitionRequest);
    console.log("Solution received:", result);

    // Przetwarzanie rozwiązania
    const solution = result.solution;

    if (!solution) {
        console.error("No solution received");
        return;
    }

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA z koordynatami
        const box = await captchaHandle.boundingBox();
        for (const point of solution.answer) {
            const clickX = box.x + point.X;
            const clickY = box.y + point.Y;
            console.log(`Clicking at: (${clickX}, ${clickY})`);
            await page.mouse.click(clickX, clickY);
        }
    } else if (solution.metadata?.AnswerType === "Grid") {
        // CAPTCHA Grid (tablica true/false)
        const box = await captchaHandle.boundingBox();
        const gridItems = await page.$$('#captcha_grid div'); // zamień na selektory elementów siatki
        const answers = solution.answer;

        for (let i = 0; i < answers.length; i++) {
            if (answers[i] && gridItems[i]) {
                const itemBox = await gridItems[i].boundingBox();
                const clickX = itemBox.x + itemBox.width / 2;
                const clickY = itemBox.y + itemBox.height / 2;
                console.log(`Clicking grid item ${i} at: (${clickX}, ${clickY})`);
                await page.mouse.click(clickX, clickY);
            }
        }
    } else {
        console.warn("Unknown captcha solution type:", solution.metadata?.AnswerType);
    }

    // Kliknij przycisk potwierdzenia (jeśli istnieje)
    await page.click('#submit_button'); // zamień na rzeczywisty selektor przycisku

    console.log("Captcha solved.");
}

solveComplexImageTaskPlaywright().catch(console.error);
  
Jak podłączyć CAPTCHA z obrazkami do swojej strony
Aby pewnie orientować się w działaniu CAPTCHA na swojej stronie, zrozumieć logikę weryfikacji lub ją ponownie skonfigurować, zalecamy zapoznanie się z tym rozdziałem. Opisuje on ogólny proces podłączenia ochrony — pozwoli szybko poznać wszystkie szczegóły.

1. Generowanie CAPTCHA na serwerze.

  • Tworzy się obraz CAPTCHA: jeden obraz lub siatka obrazów.
  • Dodawany jest szum, przekrzywienia i losowe elementy w celu ochrony przed botami.
  • Generowany jest unikalny captchaId i przechowywane jest poprawne rozwiązanie (w pamięci, bazie danych lub cache).

2. Przekazanie CAPTCHA do klienta

  • Serwer przesyła klientowi captchaId i obraz (base64 lub URL).
  • Klient wyświetla CAPTCHA, np.: <img> lub siatkę <div> z instrukcjami.
Przykład po stronie klienta (HTML + JS)Przykład po stronie klienta (HTML + JS)
arrow

3. Wprowadzanie odpowiedzi przez użytkownika

  • Użytkownik wpisuje tekst, klika w obrazki lub obraca obiekt.
  • Klient formuje odpowiedź w odpowiedniej strukturze:
    • CAPTCHA tekstowa → string
    • siatka → tablica true/false
    • koordynaty → tablica {X, Y}

4. Wysłanie odpowiedzi do serwera:

  • Klient wysyła POST z captchaId i odpowiedzią (answer).
  • Można przekazać token sesji w celu ochrony przed ponownym przejściem.

5. Weryfikacja po stronie serwera

  • Serwer wyszukuje sesję CAPTCHA po captchaId.
  • Porównuje odpowiedź użytkownika z poprawnym rozwiązaniem.
  • Zwraca success: true/false.
  • W przypadku niepowodzenia można odświeżyć CAPTCHA.
Przykład po stronie serweraPrzykład po stronie serwera
arrow

6. Kolejne kroki

  • Prawidłowa CAPTCHA → proces chroniony (formularz, rejestracja itp.) dozwolony.
  • Nieprawidłowa CAPTCHA → generowana nowa, można ograniczyć liczbę prób.

Dodatkowo

  • Stosuj TTL (czas życia) dla sesji CAPTCHA, aby automatycznie wygasały.
  • Cache’uj obrazy i używaj tymczasowych URL-i, aby oszczędzać zasoby.
  • Zapewnij poprawne działanie kliknięć i dotknięć na urządzeniach mobilnych.
  • Prowadź logi i analitykę, aby poprawić UX i ochronę przed botami.
Background
Możliwe błędy i debugowanie
Bug Icon
CAPTCHA z obrazkami nie ładuje się
(Pusta siatka, uszkodzone obrazy, błędy 404/500, problemy z base64) — sprawdź, czy serwer poprawnie generuje obrazy, dane base64 nie są uszkodzone, format obrazu jest obsługiwany przez przeglądarkę i klient otrzymuje aktualny captchaId.
Bug Icon
Kliknięcia użytkownika nie są przetwarzane
(Komórki nie są zaznaczane lub odpowiedź jest pusta) — upewnij się, że współrzędne lub indeksy kliknięć są wysyłane do serwera, dane są poprawnie serializowane i obsługiwane są zdarzenia dotykowe na urządzeniach mobilnych.
Bug Icon
Captcha nie przechodzi mimo poprawnych kliknięć
Sprawdź, czy captcha nie jest ponownie tworzona przed weryfikacją, poprawna odpowiedź jest przechowywana osobno dla każdej sesji, format odpowiedzi jest zgodny z oczekiwanym oraz czy TTL captchy nie wygasł.
Bug Icon
Wygasł czas życia CAPTCHA
Jeśli użytkownik długo rozwiązuje CAPTCHA, zwiększ TTL, odśwież CAPTCHA przy powtórnej próbie i poinformuj użytkownika o konieczności przeładowania obrazów.
Sprawdzenie odporności ochrony
Po integracji upewnij się, że system faktycznie chroni stronę przed automatycznymi działaniami.
Rekomendacje dotyczące bezpieczeństwa i optymalizacji
Przechowuj prawidłową odpowiedź CAPTCHA <b>tylko na serwerze</b> (pamięć, Redis lub baza danych), nigdy nie przekazuj jej klientowi.
Używaj jednorazowych identyfikatorów CAPTCHA (<b>captchaId</b>).
Ogranicz liczbę prób rozwiązania jednej CAPTCHA.
Zawsze używaj <b>HTTPS</b> do przesyłania obrazów i kliknięć.
Cache’uj obrazy i używaj <b>tymczasowych URL-i</b>, jeśli to możliwe.
Loguj błędy generowania i weryfikacji (czas, IP/fingerprint, powód odrzucenia).
Regularnie aktualizuj mechanikę CAPTCHA (zestaw obrazów, rozmiar i strukturę siatki, typy zadań).
Wnioski

Jeśli natrafisz na stronę z już zainstalowaną CAPTCHA lub innym systemem ochrony i nie masz dostępu do kodu — nic nie szkodzi! Identyfikacja technologii jest dość prosta. Do sprawdzenia poprawności działania można użyć usługi CapMonster Cloud w odizolowanym środowisku testowym, aby upewnić się, że mechanizm przetwarzania tokenów i logika weryfikacji działają poprawnie.

W przypadku CAPTCHA z obrazkami wystarczy rozpoznać system, poznać jego zachowanie i upewnić się, że ochrona działa poprawnie. W artykule pokazaliśmy, jak zidentyfikować CAPTCHA z obrazkami (ComplexImage) i jak ją podłączyć lub ponownie skonfigurować, aby skutecznie utrzymywać ochronę i kontrolować jej działanie.

Conclusion
Przydatne linki
DocIconDokumentacja CapMonster Cloud (ComplexImage)DocIconPoradnik, jak stworzyć własną CAPTCHADocIconRejestracja w serwisie CapMonster Cloud