Retool + CaptchaAI: внутренний инструмент обработки форм CAPTCHA

Retool позволяет командам быстро создавать внутренние инструменты. Когда этим инструментам необходимо взаимодействовать с внешними службами, защищенными CAPTCHA — для отправки форм, получения данных с порталов или автоматизации сторонних рабочих процессов —CaptchaAIобрабатывает решение с помощью запросов REST API Retool.

В этом руководстве показано, как настроить CaptchaAI в качестве ресурса REST API в Retool, построить запросы для отправки и получения решений CAPTCHA, а также подключить их к пользовательскому интерфейсу вашего приложения.

Реальный сценарий

Ваша оперативная группа использует приложение Retool для отправки данных на правительственный портал, для которого требуется reCAPTCHA v2. Вместо того, чтобы вручную решать CAPTCHA, приложение Retool:

1. Принимает ключ сайта и URL-адрес страницы в качестве входных данных.
2. Отправляет CAPTCHA в CaptchaAI
3. Опросы на результат
4. Отображает решенный токен для использования при отправке формы.

Шаг 1. Создайте CaptchaAI как ресурс REST API.

В Retool перейдите к Ресурсы — Создать новый — REST API:

Сохраните ресурс. Вы будете ссылаться на него в запросах.

Шаг 2. Создайте запрос на отправку

Создайте новый запрос под названием submitCaptcha:

Параметры запроса:

Сохраните свой ключ API в хранилище секретов Retool (Настройки — Секреты), чтобы избежать его жесткого кодирования.

Трансформатор (опция):

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

Шаг 3. Создайте запрос на опрос

Создайте запрос под названием pollResult:

Параметры запроса:

Трансформер:

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' };

Шаг 4. Создайте цикл опроса с помощью JavaScript

Создайте запрос JavaScript под названием solveCaptcha, который организует цикл отправки и опроса:

// 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();

Шаг 5. Создайте пользовательский интерфейс

Создайте простой макет приложения Retool:

Раздел ввода

• Ввод текста (sitekeyInput): ярлык «reCAPTCHA Sitekey».
• Ввод текста (pageurlInput): ярлык «URL страницы».
• Кнопка (solveButton): ярлык «Решить CAPTCHA», onClick — solveCaptcha.trigger().

Раздел статуса

• Текстовый компонент: {{ solveCaptcha.isFetching ? "Solving..." : "" }}.
• Индикатор загрузки: отображается, когда {{ solveCaptcha.isFetching }}

Раздел результатов

• Текстовая область (tokenOutput):
• Значение: {{ solveCaptcha.data?.token || '' }}
• Метка: «Решенный токен»
• Только чтение
• Кнопка «Копировать»: копирует токен в буфер обмена.
• Значок статуса: показывает успех/error на основе {{ solveCaptcha.data?.status }}.

Шаг 6. Используйте токен в последующих запросах

После решения используйте токен в другом запросе Retool, который отправляет форму:

Создайте запрос под названием submitForm:

Подключите это к кнопке «Отправить форму», которая активируется только при {{ solveCaptcha.data?.status === 'solved' }}.

Поиск неисправностей

| Проблема | Причина | Исправить |

Следующие шаги

• CaptchaAI Quickstart: ваше первое решение CAPTCHA за 5 минут
• Как решить reCAPTCHA v2 через API: пошаговое руководство
• Как решить Cloudflare Turnstile через API
• Как решить GeeTest v3 с помощью API