Résoudre les CAPTCHA dans les fonctions action de Remix

Périmètre sûr : ce guide couvre uniquement vos propres applications Remix, vos environnements de QA, de préproduction ou de production, et les systèmes pour lesquels vous détenez une autorisation écrite. Il ne décrit ni l'automatisation de sites tiers que vous ne contrôlez pas, ni la neutralisation de protections anti-bot.

Dans une application Remix, la fonction action s'exécute côté serveur : c'est précisément là que la résolution d'un CAPTCHA doit avoir lieu, juste avant de valider un formulaire ou d'écrire en base. Plutôt que de câbler un widget fragile côté client, vous déléguez la résolution à CaptchaAI depuis le serveur, puis poursuivez le traitement de la requête. Ce guide montre comment brancher cette étape pour qu'elle tienne en production : gestion des secrets, appel HTTP, observabilité et dépannage.

Où placer la résolution CAPTCHA dans une action Remix

Une fonction action reçoit la requête POST du formulaire, la traite côté serveur, puis renvoie une réponse ou une redirection. La résolution CAPTCHA s'insère au tout début de ce cycle, avant la logique métier, en trois temps :

1. Récupérez les paramètres du défi dans la requête : sitekey, URL de la page et, le cas échéant, le proxy.
2. Demandez un token à CaptchaAI côté serveur, puis attendez le résultat.
3. Ne validez le formulaire ou l'écriture en base que si le token est accepté.

Ce découpage a un avantage concret : le navigateur ne voit jamais la clé API, et vous tracez chaque étape pour détecter les régressions. CaptchaAI expose une seule API pour l'ensemble des familles prises en charge — reCAPTCHA v2 et v3, Cloudflare Turnstile, GeeTest v3, image/OCR et grilles — si bien que le même schéma d'appel reste valable quand le type de CAPTCHA change sur la page.

Configurer la clé API et les secrets

La clé CaptchaAI ne vit jamais dans le code source ni dans un fichier commité. Stockez-la dans un coffre (HashiCorp Vault, AWS Secrets Manager, Azure Key Vault) ou dans un secret de votre chaîne CI, puis montez-la en variable d'environnement au moment du déploiement. Dans une action Remix, vous la lisez ensuite via process.env.

Cette séparation compte pour les équipes qui déploient sur OVHcloud, Scaleway ou une région AWS européenne (eu-west-3 à Paris) : la clé suit le cycle de vie du secret, pas celui du dépôt Git.

Côté facturation, CaptchaAI facture au thread concurrent, pas au solve : chaque plan inclut un nombre de résolutions illimité par thread. Une application Remix modeste démarre sur le plan BASIC ($15/mois, 5 threads) ; vous montez de palier quand les résolutions simultanées l'exigent.

Appeler CaptchaAI depuis la fonction action

Voici un appel HTTP côté serveur, tel qu'il vit dans votre propre service. La fonction crée une tâche de résolution et renvoie un identifiant que vous interrogez ensuite jusqu'à obtenir le token :

import fetch from 'node-fetch';

const API_KEY = process.env.CAPTCHAAI_KEY;

export async function createTurnstileTask(siteKey, pageUrl) {
  const res = await fetch('https://api.captchaai.com/createTask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      clientKey: API_KEY,
      task: {
        type: 'TurnstileTaskProxyless',
        websiteURL: pageUrl,
        websiteKey: siteKey,
      },
    }),
  });
  const data = await res.json();
  return data.taskId;
}

Appelez cette fonction depuis votre action, récupérez le token une fois la tâche résolue, puis appliquez-le dans la même session que celle qui a déclenché le défi — même contexte, même client HTTP. Une session incohérente est la cause la plus fréquente de rejet après coup.

Observabilité et journalisation conforme au RGPD

Instrumentez vos appels CAPTCHA pour obtenir des métriques exploitables : durée d'obtention du token, code retour HTTP, identifiant de tâche et taille de la file d'attente. Ces signaux alimentent vos tableaux de bord de QA et révèlent une régression bien avant vos utilisateurs.

Séparez les journaux par environnement et corrélez les identifiants à votre traçage distribué (OpenTelemetry, par exemple) : vous rejouez un scénario complet à partir d'un seul identifiant, ce qui réduit le temps de diagnostic. Minimisez aussi les données personnelles dans les logs : ne consignez ni les saisies utilisateur ni les adresses IP au-delà du strict nécessaire, conformément à vos obligations RGPD.

Liste de contrôle avant la mise en production

Dépannage

FAQ

À quel moment appeler CaptchaAI dans une fonction action Remix ?

Au tout début de la fonction action, avant la logique métier : récupérez les paramètres du défi, demandez le token à CaptchaAI côté serveur, puis ne validez le formulaire que si le token est accepté. Cela garde la clé API hors du navigateur.

Comment protéger la clé API CaptchaAI dans un projet Remix ?

Stockez-la dans un coffre ou un secret CI, jamais dans le dépôt, et montez-la en variable d'environnement lue via process.env au runtime. Une rotation se résume alors à mettre à jour le secret et à redéployer, sans modifier le code.

Le token de résolution est-il encore valide au moment de valider le formulaire ?

Oui, à condition de l'appliquer dans la même session que celle qui a déclenché le défi — même contexte serveur, même client HTTP. Une session incohérente provoque presque toujours un rejet du token.

Que journaliser sans enfreindre le RGPD ?

Consignez les métadonnées techniques : identifiant de tâche, durée d'obtention, code retour HTTP et taille de file. Évitez les saisies utilisateur et limitez la conservation des adresses IP au strict nécessaire, conformément à vos obligations RGPD.

Guides connexes

• le démarrage rapide CaptchaAI
• la QA CAPTCHA en environnements autorisés
• tester l'endpoint API sur vos formulaires
• intégrer la résolution CAPTCHA en CI
• résoudre reCAPTCHA v2 via l'API

Une intégration CAPTCHA solide tient à une méthode reproductible : secrets isolés, résolution côté serveur et métriques suivies. – Obtenez votre clé CaptchaAI.