Retool + CaptchaAI：内部工具验证码表单处理

Retool 可让团队快速构建内部工具。当这些工具需要与受验证码保护的外部服务交互时（提交表单、从门户提取数据或自动化第三方工作流程）CaptchaAI通过 Retool 的 REST API 查询来处理求解。

本指南展示了如何在 Retool 中将 CaptchaAI 设置为 REST API 资源，构建查询以提交和检索 CAPTCHA 解决方案，并将它们连接到应用程序的 UI 中。

真实场景

您的运营团队使用 Retool 应用程序将数据提交到需要 reCAPTCHA v2 的政府门户网站。 Retool 应用程序不是手动解决验证码，而是：

1. 将 sitekey 和页面 URL 作为输入
2. 向 CaptchaAI 提交验证码
3. 投票结果
4. 显示已解决的令牌以在表单提交中使用

步骤 1：创建 CaptchaAI 作为 REST API 资源

在 Retool 中，导航至 资源 → 新建 → REST API：

保存资源。您将在查询中引用它。

第 2 步：创建提交查询

创建一个名为 submitCaptcha 的新查询：

查询参数：

将您的 API 密钥存储在 Retool 的 Secrets Store 中（设置 → Secrets）以避免对其进行硬编码。

变压器（可选）：

// 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 构建轮询循环

创建一个名为 solveCaptcha 的 JavaScript 查询来协调提交和轮询周期：

// 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)：标签“解决验证码”，onClick → solveCaptcha.trigger()

状态部分

• 文本组件：{{ solveCaptcha.isFetching ? "Solving..." : "" }}
• 加载指示器：{{ solveCaptcha.isFetching }} 时可见

结果部分

• 文本区域 (tokenOutput)：
• 价值：{{ solveCaptcha.data?.token || '' }}
• 标签：“已解决的令牌”
• 只读
• 复制按钮：将令牌复制到剪贴板
• 状态徽章：显示基于{{ solveCaptcha.data?.status }}的成功/error

步骤 6：在下游查询中使用令牌

解决后，在另一个提交表单的 Retool 查询中使用该令牌：

创建一个名为 submitForm 的查询：

将此连接到“提交表单”按钮，该按钮仅在 {{ solveCaptcha.data?.status === 'solved' }} 时启用。

故障排除

常问问题

我可以将 CaptchaAI API 密钥安全地存储在 Retool 中吗？

是的。使用 Retool 的 Secrets Store（环境 → Secrets）并将其引用为 {{secretsStore.CAPTCHAAI_API_KEY}}。这使得查询定义中的键对应用程序构建者可见。

这可以与 Retool Cloud 和自托管一起使用吗？

是的，两个版本都支持 REST API 资源和 JavaScript 查询。自托管Retool还可以直接访问CaptchaAI的API，无需代理要求。

我可以在 Retool 中构建可重复使用的验证码解析模块吗？

是的。使用submit/poll 查询和UI 组件创建Retool 模块，然后将其嵌入到任何需要CAPTCHA 解决的应用程序中。

我可以通过 Retool 解决哪些验证码类型？

CaptchaAI 支持的任何类型 - reCAPTCHA v2/v3、Cloudflare Turnstile、图像验证码。相应地调整提交查询中的 method 和参数。

相关文章

• 如何使用Api解决Recaptcha V2回调
• Recaptcha V2 Turnstile同一站点处理
• Recaptcha V2回调机制

下一步

将验证码解决添加到您的 Retool 内部工具中 –”获取您的 CaptchaAI API 密钥并设置 REST API 资源。

相关指南：

• Zapier + CaptchaAI：无代码验证码解决
• 制作 (Integromat) + CaptchaAI
• 从页面源中提取 reCAPTCHA 参数