Retool + CaptchaAI: Internes Tool zur Bearbeitung von CAPTCHA-Formularen

Mit Retool können Teams schnell interne Tools erstellen. Wenn diese Tools mit CAPTCHA-geschützten externen Diensten interagieren müssen – Formulare senden, Daten aus Portalen abrufen oder Arbeitsabläufe von Drittanbietern automatisieren –CaptchaAIübernimmt die Lösung über die REST-API-Abfragen von Retool.

In dieser Anleitung wird gezeigt, wie Sie CaptchaAI als REST-API-Ressource in Retool einrichten, Abfragen zum Senden und Abrufen von CAPTCHA-Lösungen erstellen und diese mit der Benutzeroberfläche Ihrer App verbinden.

Szenario aus der realen Welt

Ihr Einsatzteam verwendet eine Retool-App, um Daten an ein Regierungsportal zu übermitteln, das reCAPTCHA v2 erfordert. Anstatt CAPTCHAs manuell zu lösen, bietet die Retool-App Folgendes:

1. Nimmt den Sitekey und die Seiten-URL als Eingabe
2. Sendet das CAPTCHA an CaptchaAI
3. Umfragen zum Ergebnis
4. Zeigt das gelöste Token zur Verwendung bei der Formularübermittlung an

Schritt 1: Erstellen Sie CaptchaAI als REST-API-Ressource

Navigieren Sie in Retool zu Ressourcen → Neu erstellen → REST-API:

Speichern Sie die Ressource. Sie werden in Abfragen darauf verweisen.

Schritt 2: Erstellen Sie die Absendeabfrage

Erstellen Sie eine neue Abfrage mit dem Namen submitCaptcha:

Abfrageparameter:

Speichern Sie Ihren API-Schlüssel im Secrets Store von Retool (Einstellungen → Secrets), um eine harte Codierung zu vermeiden.

Transformator (optional):

// Parse the response
const data = {{ submitCaptcha.data }};
if (data.status === 1) {
  return { taskId: data.request, status: 'submitted' };
}
return { error: data.request, status: 'failed' };

Schritt 3: Erstellen Sie die Umfrageabfrage

Erstellen Sie eine Abfrage mit dem Namen pollResult:

Abfrageparameter:

Transformator:

const data = {{ pollResult.data }};
if (data.status === 1) {
  return { token: data.request, status: 'solved' };
}
if (data.request === 'CAPCHA_NOT_READY') {
  return { status: 'pending' };
}
return { error: data.request, status: 'error' };

Schritt 4: Erstellen Sie die Polling-Schleife mit JavaScript

Erstellen Sie eine JavaScript-Abfrage namens solveCaptcha, die den Übermittlungs- und Abfragezyklus orchestriert:

// solveCaptcha — JavaScript Query
async function solve() {
  // Submit the CAPTCHA task
  await submitCaptcha.trigger();
  const submitResult = submitCaptcha.data;

  if (submitResult.status !== 1) {
    return { error: submitResult.request, status: 'submit_failed' };
  }

  const taskId = submitResult.request;

  // Wait 15 seconds before first poll
  await new Promise(r => setTimeout(r, 15000));

  // Poll up to 20 times (100 seconds max)
  for (let i = 0; i < 20; i++) {
    await pollResult.trigger({
      additionalScope: { taskId: taskId }
    });

    const result = pollResult.data;

    if (result.status === 1) {
      return { token: result.request, status: 'solved' };
    }

    if (result.request !== 'CAPCHA_NOT_READY') {
      return { error: result.request, status: 'error' };
    }

    // Wait 5 seconds before next poll
    await new Promise(r => setTimeout(r, 5000));
  }

  return { error: 'Polling timeout', status: 'timeout' };
}

return solve();

Schritt 5: Erstellen Sie die Benutzeroberfläche

Erstellen Sie ein einfaches Retool-App-Layout:

Eingabebereich

• Texteingabe (sitekeyInput): Bezeichnung „reCAPTCHA Sitekey“
• Texteingabe (pageurlInput): Label „Seiten-URL“
• Schaltfläche (solveButton): Beschriftung „CAPTCHA lösen“, onClick → solveCaptcha.trigger()

Statusabschnitt

• Text-Komponente: {{ solveCaptcha.isFetching ? "Solving..." : "" }}
• Ladeanzeige: Sichtbar bei {{ solveCaptcha.isFetching }}

Ergebnisbereich

• Textbereich (tokenOutput):
• Wert: {{ solveCaptcha.data?.token || '' }}
• Beschriftung: „Gelöstes Token“
• Schreibgeschützt
• Schaltfläche „Kopieren“: Kopiert das Token in die Zwischenablage
• Status-Badge: Zeigt success/error basierend auf {{ solveCaptcha.data?.status }} an

Schritt 6: Verwenden Sie das Token in Downstream-Abfragen

Sobald das Problem gelöst ist, verwenden Sie das Token in einer anderen Retool-Abfrage, die das Formular sendet:

Erstellen Sie eine Abfrage mit dem Namen submitForm:

Verknüpfen Sie dies mit einer Schaltfläche „Formular senden“, die nur bei {{ solveCaptcha.data?.status === 'solved' }} aktiviert ist.

Fehlerbehebung

Verwandte Leitfäden

• CaptchaAI Schnellstart
• Power Automate + CaptchaAI
• API-Antwortformate und Fehlercodes