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

في "إعادة الأداة"، انتقل إلى الموارد → إنشاء جديد → 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"
• إدخال النص (pageurlInput): قم بتسمية "عنوان URL للصفحة"
• زر (solveButton): قم بتسمية "حل اختبار CAPTCHA"، عند النقر فوق †' solveCaptcha.trigger()

قسم الحالة

• مكون النص: {{ solveCaptcha.isFetching ? "Solving..." : "" }}
• مؤشر التحميل: يكون مرئيًا عند {{ solveCaptcha.isFetching }}

قسم النتائج

• منطقة النص (tokenOutput):
• القيمة: {{ solveCaptcha.data?.token || '' }}
• العلامة: "رمز محلول"
• للقراءة فقط
• زر النسخ: نسخ الرمز المميز إلى الحافظة
• شارة الحالة: تظهر النجاح/error بناءً على {{ solveCaptcha.data?.status }}

الخطوة 6: استخدم الرمز المميز في الاستعلامات النهائية

بمجرد الحل، استخدم الرمز المميز في استعلام إعادة أدوات آخر يرسل النموذج:

قم بإنشاء استعلام يسمى submitForm:

قم بتوصيل هذا إلى زر "إرسال النموذج" الذي يتم تمكينه فقط عند {{ solveCaptcha.data?.status === 'solved' }}.

استكشاف الأخطاء وإصلاحها

الخطوات التالية

• البدء السريع مع CaptchaAI: حلّ أول كابتشا في 5 دقائق
• كيفية حلّ reCAPTCHA v2 عبر الـ API: دليل خطوة بخطوة
• كيفية حل Cloudflare Turnstile باستخدام واجهة API
• كيفية حل GeeTest v3 باستخدام API

أدلة ذات صلة

• البدء السريع مع CaptchaAI: حلّ أول كابتشا في 5 دقائق
• كيفية حلّ reCAPTCHA v2 عبر الـ API: دليل خطوة بخطوة