Retool + CaptchaAI: Xử lý biểu mẫu CAPTCHA của công cụ nội bộ

Retool cho phép các nhóm xây dựng các công cụ nội bộ một cách nhanh chóng. Khi những công cụ đó cần tương tác với các dịch vụ bên ngoài được bảo vệ CAPTCHA — gửi biểu mẫu, lấy dữ liệu từ cổng hoặc tự động hóa quy trình làm việc của bên thứ ba —CaptchaAIxử lý việc giải quyết thông qua các truy vấn API REST của Retool.

Hướng dẫn này cho biết cách thiết lập CaptchaAI làm tài nguyên API REST trong Retool, tạo truy vấn để gửi và truy xuất giải pháp CAPTCHA, đồng thời kết nối chúng vào giao diện người dùng ứng dụng của bạn.

Kịch bản thế giới thực

Nhóm vận hành của bạn sử dụng ứng dụng Retool để gửi dữ liệu đến cổng thông tin chính phủ yêu cầu reCAPTCHA v2. Thay vì giải CAPTCHA theo cách thủ công, ứng dụng Retool:

1. Lấy khóa trang và URL trang làm đầu vào
2. Gửi CAPTCHA tới CaptchaAI
3. Thăm dò kết quả
4. Hiển thị mã thông báo đã giải quyết để sử dụng khi gửi biểu mẫu

Bước 1: Tạo CaptchaAI làm tài nguyên API REST

Trong Retool, điều hướng đến Tài nguyên → Tạo mới → REST API:

Tiết kiệm tài nguyên. Bạn sẽ tham khảo nó trong các truy vấn.

Bước 2: Tạo truy vấn gửi

Tạo một truy vấn mới có tên submitCaptcha:

Tham số truy vấn:

Lưu trữ khóa API của bạn trong Cửa hàng bí mật của Retool (Cài đặt †' Bí mật) để tránh mã hóa khóa.

Máy biến áp (tùy chọn):

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

Bước 3: Tạo truy vấn thăm dò ý kiến

Tạo một truy vấn có tên pollResult:

Tham số truy vấn:

Máy biến áp:

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

Bước 4: Xây dựng vòng bỏ phiếu bằng JavaScript

Tạo một truy vấn JavaScript có tên solveCaptcha để sắp xếp chu trình gửi và thăm dò ý kiến:

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

Bước 5: Xây dựng giao diện người dùng

Tạo bố cục ứng dụng Retool đơn giản:

Phần đầu vào

• Nhập văn bản (sitekeyInput): Nhãn "reCAPTCHA Sitekey"
• Nhập văn bản (pageurlInput): Nhãn "URL trang"
• Nút (solveButton): Gắn nhãn "Giải CAPTCHA", onClick -> solveCaptcha.trigger()

Phần trạng thái

• Thành phần văn bản: {{ solveCaptcha.isFetching ? "Solving..." : "" }}
• Chỉ báo đang tải: Hiển thị khi {{ solveCaptcha.isFetching }}

Phần kết quả

• Vùng văn bản (tokenOutput):
• Giá trị: {{ solveCaptcha.data?.token || '' }}
• Nhãn: "Mã thông báo đã giải quyết"
• Chỉ đọc
• Nút sao chép: Sao chép mã thông báo vào bảng nhớ tạm
• Huy hiệu trạng thái: Hiển thị thành công/error dựa trên {{ solveCaptcha.data?.status }}

Bước 6: Sử dụng mã thông báo trong truy vấn xuôi dòng

Sau khi giải quyết xong, hãy sử dụng mã thông báo trong một truy vấn Retool khác gửi biểu mẫu:

Tạo một truy vấn có tên submitForm:

Kết nối nút này với nút "Gửi biểu mẫu" chỉ được bật khi {{ solveCaptcha.data?.status === 'solved' }}.

Khắc phục sự cố

Câu hỏi thường gặp

Tôi có thể lưu trữ khóa API CaptchaAI một cách an toàn trong Retool không?

Vâng. Sử dụng Cửa hàng bí mật của Retool (Bí mật về môi trường) và gọi nó là {{secretsStore.CAPTCHAAI_API_KEY}}. Điều này giúp người xây dựng ứng dụng không nhìn thấy khóa trong định nghĩa truy vấn.

Tính năng này có hoạt động với Retool Cloud và Self-hosted không?

Có, cả hai phiên bản đều hỗ trợ tài nguyên API REST và truy vấn JavaScript. Retool tự lưu trữ cũng có thể truy cập trực tiếp vào API của CaptchaAI mà không cần yêu cầu proxy.

Tôi có thể xây dựng mô-đun giải CAPTCHA có thể tái sử dụng trong Retool không?

Vâng. Tạo Mô-đun công cụ lại với các truy vấn submit/poll và các thành phần giao diện người dùng, sau đó nhúng nó vào bất kỳ ứng dụng nào cần giải CAPTCHA.

Tôi có thể giải quyết những loại CAPTCHA nào thông qua Retool?

Mọi loại CaptchaAI đều hỗ trợ — reCAPTCHA v2/v3, Cloudflare Turnstile, CAPTCHA hình ảnh. Điều chỉnh method và các tham số trong truy vấn gửi cho phù hợp.

bài viết liên quan

• Cách giải quyết cuộc gọi lại Recaptcha V2 bằng Api
• Xử lý cửa quay Recaptcha V2 trên cùng một trang web
• Cơ chế gọi lại Recaptcha V2

Các bước tiếp theo

Thêm tính năng giải CAPTCHA vào các công cụ nội bộ Retool của bạn —lấy khóa API CaptchaAI của bạnvà thiết lập tài nguyên API REST.

Hướng dẫn liên quan:

• Zapier + CaptchaAI: Giải CAPTCHA không cần mã
• Tạo (Integromat) + CaptchaAI
• Trích xuất tham số reCAPTCHA từ nguồn trang