Retool + CaptchaAI : outil interne de gestion des formulaires CAPTCHA

Retool permet aux équipes de créer rapidement des outils internes. Lorsque ces outils doivent interagir avec des services externes protégés par CAPTCHA – soumission de formulaires, extraction de données de portails ou automatisation de flux de travail tiers –CaptchaAIgère la résolution via les requêtes API REST de Retool.

Ce guide montre comment configurer CaptchaAI en tant que ressource API REST dans Retool, créer des requêtes pour soumettre et récupérer des solutions CAPTCHA, et les connecter à l'interface utilisateur de votre application.

Scénario du monde réel

Votre équipe opérationnelle utilise une application Retool pour soumettre des données à un portail gouvernemental qui nécessite reCAPTCHA v2. Au lieu de résoudre manuellement les CAPTCHA, l'application Retool :

1. Prend la clé du site et l'URL de la page en entrée
2. Soumet le CAPTCHA à CaptchaAI
3. Sondages pour le résultat
4. Affiche le jeton résolu à utiliser dans la soumission du formulaire

Étape 1 : Créer CaptchaAI en tant que ressource API REST

Dans Retool, accédez à Ressources → Créer un nouveau → API REST :

Enregistrez la ressource. Vous le référencerez dans les requêtes.

Étape 2 : Créer la requête de soumission

Créez une nouvelle requête appelée submitCaptcha :

Paramètres de requête :

Stockez votre clé API dans le magasin de secrets de Retool (Paramètres – Secrets) pour éviter de la coder en dur.

Transformateur (facultatif) :

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

Étape 3 : Créer la requête de sondage

Créez une requête appelée pollResult :

Paramètres de requête :

Transformateur :

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

Étape 4 : Créer la boucle d'interrogation avec JavaScript

Créez une requête JavaScript appelée solveCaptcha qui orchestre le cycle de soumission et d'interrogation :

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

Étape 5 : Créer l'interface utilisateur

Créez une présentation simple de l'application Retool :

Section d'entrée

• Saisie de texte (sitekeyInput) : étiquette "reCAPTCHA Sitekey"
• Saisie de texte (pageurlInput) : étiquette "URL de la page"
• Bouton (solveButton) : Étiquette "Résoudre le CAPTCHA", onClick → solveCaptcha.trigger()

Section Statut

• Composant Texte : {{ solveCaptcha.isFetching ? "Solving..." : "" }}
• Indicateur de chargement : visible lorsque {{ solveCaptcha.isFetching }}

Section des résultats

• Zone de texte (tokenOutput) :
• Valeur : {{ solveCaptcha.data?.token || '' }}
• Étiquette : "Jeton résolu"
• Lecture seule
• Bouton Copier : copie le jeton dans le presse-papiers
• Badge de statut : affiche le succès/error basé sur {{ solveCaptcha.data?.status }}

Étape 6 : Utiliser le jeton dans les requêtes en aval

Une fois résolu, utilisez le jeton dans une autre requête Retool qui soumet le formulaire :

Créez une requête appelée submitForm :

Connectez-le à un bouton « Soumettre le formulaire » qui est activé uniquement lorsque {{ solveCaptcha.data?.status === 'solved' }}.

Dépannage

FAQ

Puis-je stocker la clé API CaptchaAI en toute sécurité dans Retool ?

Oui. Utilisez le magasin de secrets de Retool (Environnement – ​​Secrets) et référencez-le sous le nom {{secretsStore.CAPTCHAAI_API_KEY}}. Cela permet de garder la clé hors des définitions de requête visible pour les créateurs d'applications.

Cela fonctionne-t-il avec Retool Cloud et Self-hébergé ?

Oui, les deux versions prennent en charge les ressources de l'API REST et les requêtes JavaScript. Retool auto-hébergé peut également accéder directement à l'API de CaptchaAI sans exigences de proxy.

Puis-je créer un module de résolution de CAPTCHA réutilisable dans Retool ?

Oui. Créez un module Retool avec les requêtes submit/poll et les composants d'interface utilisateur, puis intégrez-le dans toute application nécessitant une résolution CAPTCHA.

Quels types de CAPTCHA puis-je résoudre via Retool ?

Tout type pris en charge par CaptchaAI : reCAPTCHA v2/v3, Cloudflare Turnstile, CAPTCHA d'image. Ajustez le method et les paramètres dans la requête de soumission en conséquence.

Articles connexes

• Comment résoudre le rappel Recaptcha V2 à l'aide de l'API
• Gestion du tourniquet Recaptcha V2 sur le même site
• Mécanisme de rappel Recaptcha V2

Prochaines étapes

Ajoutez la résolution CAPTCHA à vos outils internes Retool -récupérez votre clé API CaptchaAIet configurez la ressource API REST.

Guides associés :

• Zapier + CaptchaAI : résolution de CAPTCHA sans code
• Marque (Integromat) + CaptchaAI
• Extraction des paramètres reCAPTCHA de la source de la page