Aller au contenu principal

Guide du développeur

hCaptcha contribue à protéger vos sites et applications contre les bots, le spam et autres abus automatisés.

Son installation est simple : ajoutez quelques lignes de code ou utilisez l’un des nombreux outils qui prennent en charge nativement hCaptcha.

info

Vous utilisez Codex, Claude Code ou un autre agent ? Ajoutez Agent Skills for Docs pour faire de votre agent un expert.

Des plugins et des exemples sont disponibles pour ReactJS, VueJS, WordPress, Angular, Node, Express et many more, y compris Mobile App SDKs.

Passage de reCAPTCHA

Si vous utilisez déjà reCAPTCHA de Google, vous pouvez réutiliser votre code existant avec only a few changes. Les méthodes hCaptcha sont compatibles avec les méthodes reCAPTCHA via leur API, par exemple render() et onload(). Les attributs de données personnalisés tels que theme, size et tab-index sont également pris en charge par hCaptcha.

Démarrage rapide

  1. Vous intégrez le widget hCaptcha sur votre site, par exemple sur un formulaire de connexion.
Frontend Code Example

Exemple de code frontend (simple)

<html>
<head>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form method="POST" action="/login">
<!-- Your other fields (e.g. email, password) go here -->
<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
<br>
<!-- The hCaptcha flow is triggered and 'h-captcha-response' field
is automatically sent as a form field upon clicking Submit -->
<input type="submit" value="Submit">
</form>
</body>
</html>

Exemple de code frontend (JS programmatique)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hCaptcha Execute Example</title>
<!-- 1. Load hCaptcha SDK with explicit rendering -->
<script
src="https://js.hcaptcha.com/1/api.js?onload=onloadHCaptcha&render=explicit"
async defer>
</script>

<script>
let widgetId = null; // will hold the widget ID assigned by hCaptcha

function onloadHCaptcha() {
// 2. Once SDK is loaded, render invisible hCaptcha widget
widgetId = hcaptcha.render('hcaptcha-container', {
sitekey: 'your_site_key_here',
size: 'invisible', // invisible mode
callback: onSolve,
'error-callback': onError,
'expired-callback': onExpired
});
}

function onSolve(token, key) {
// This function is called after successful solve
// `token` is the h-captcha-response value
console.log('hCaptcha solved:', { token, key });
document.getElementById('demo-form').submit(); // or handle manually
}

function onError(err) {
console.error('hCaptcha error callback:', err);
// log to analytics, restart flow
}

function onExpired() {
console.warn('hCaptcha token expired');
// make sure to fetch a new token before user submits form
}

function onManualStep(event) {
event.preventDefault();
// 3. Trigger the hCaptcha flow programmatically
if (widgetId === null) {
console.error('Widget not yet initialized');
} else {
hcaptcha.execute(widgetId);
}
}
</script>
</head>
<body>
<form id="demo-form" action="/submit" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<!-- 4. Invisible widget container -->
<div id="hcaptcha-container"></div><br>
<button id="submit-btn" onclick="onManualStep(event)">Submit</button>
</form>
</body>
</html>
  1. L'utilisateur lance une évaluation hCaptcha : il clique sur la case à cocher ou sur le bouton de soumission, ou vous la déclenchez par programmation.
  2. L'utilisateur reçoit un jeton de notre serveur. Ce jeton est intégré à votre formulaire ou renvoyé à votre fonction de rappel JS.
  3. L'utilisateur clique sur Envoyer. Le code d'accès est envoyé à votre serveur via le formulaire.
  4. Votre serveur envoie le jeton à notre API (api.hcaptcha.com/siteverify). hCaptcha confirme sa validité. Votre serveur sait désormais que l'utilisateur n'est pas un robot et l'autorise à se connecter. C'est simple comme bonjour !
Backend Code Example

Exemple de code backend

import os
import requests
from flask import Flask, request, jsonify

# URL for token verification
HCAPTCHA_VERIFY_URL = "https://api.hcaptcha.com/siteverify"

# Your secret key from the hCaptcha dashboard
SECRET_KEY = os.getenv("HCAPTCHA_SECRET", "your_secret_here")

app = Flask(__name__)

def verify_hcaptcha_token(token: str, remoteip: str = None) -> dict:
"""
Sends a POST request to hCaptcha's /siteverify endpoint
and returns a result dict including 'success' (bool),
timestamp, hostname, and any error codes returned.
"""
payload = {
'secret': SECRET_KEY,
'response': token
}

if remoteip:
payload['remoteip'] = remoteip # recommended, improves accuracy

response = requests.post(HCAPTCHA_VERIFY_URL, data=payload)
response.raise_for_status()

data = response.json()
# Example shape:
# {
# "success": False,
# "challenge_ts": "2025-08-01T12:34:56Z",
# "hostname": "example.com",
# "error-codes": ["invalid-input-response"]
# }
return {
'success': data.get('success', False),
'challenge_ts': data.get('challenge_ts'),
'hostname': data.get('hostname'),
'error_codes': data.get('error-codes', [])
}

@app.route('/login', methods=['POST'])
def login():
# 1) Get token from form POST
token = request.form.get('h-captcha-response')
if not token:
return jsonify({'error': 'Missing hCaptcha token'}), 400

# 2) Verify token via hCaptcha API
result = verify_hcaptcha_token(token, remoteip=request.remote_addr)

# 3) Decision logic
if result['success']:
# Token valid == allow action
# Proceed with your login/business logic here
return jsonify({'status': 'Logged in'}), 200
else:
# Verification failed
return jsonify({
'error': 'login failed',
# log error codes from siteverify response
print('error_codes:', result['error_codes'])
}), 403

if __name__ == '__main__':
app.run(debug=True, port=5000)

Flux de requêtes

Paramètres de politique de sécurité du contenu

Les en-têtes de politique de sécurité du contenu (CSP) constituent une couche de sécurité supplémentaire qui contribue à atténuer certains types d'attaques, notamment les attaques Cross Site Scripting (XSS), le détournement de clic et les attaques par injection de données.

Si vous utilisez des en-têtes CSP, veuillez ajouter les éléments suivants à votre configuration :

  • script-src devrait inclure https://hcaptcha.com, https://*.hcaptcha.com
  • frame-src devrait inclure https://hcaptcha.com, https://*.hcaptcha.com
  • style-src devrait inclure https://hcaptcha.com, https://*.hcaptcha.com
  • connect-src devrait inclure https://hcaptcha.com, https://*.hcaptcha.com

Veuillez ne pas coder en dur des sous-domaines spécifiques, comme newassets.hcaptcha.com, dans votre CSP : les sous-domaines d’actifs utilisés peuvent varier dans le temps ou selon la région.

Si vous êtes un client entreprise et que vous souhaitez activer des vérifications supplémentaires, vous pouvez choisir la stratégie CSP suivante :

  • unsafe-eval et unsafe-inline doivent inclure https://hcaptcha.com, https://*.hcaptcha.com

Ajoutez le widget hCaptcha à votre page Web

hCaptcha nécessite deux petits éléments de code côté client pour afficher un widget sur une page HTML. Premièrement, vous devez inclure la ressource JavaScript hCaptcha quelque part dans votre page HTML. Le jeton <script> doit être chargé via HTTPS et peut être placé n'importe où sur la page : à l'intérieur de la balise <head> ou immédiatement après le conteneur .h-captcha.

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

Ensuite, vous devez ajouter un conteneur DOM vide dans lequel le widget hCaptcha sera inséré automatiquement. Ce conteneur est généralement un élément <div> (mais il peut s'agir de n'importe quel élément) et doit avoir la classe h-captcha et un attribut data-sitekey défini sur votre clé de site publique.

info

La clé de site est notre identifiant unique pour votre site, application ou flux.

Vous pouvez configurer le comportement et suivre les statistiques pour chaque clé de site. Cela vous permet de choisir le niveau de détail souhaité : une seule clé de site utilisée sur plusieurs sites ou une clé de site par flux, par exemple une pour l’inscription et une pour la connexion.

You can find your sitekey and create more in Sites.
<div class="h-captcha" data-sitekey="your_site_key"></div>

En général, vous devrez inclure le conteneur vide .h-captcha dans un formulaire HTML. Une fois le test réussi, un jeton caché sera automatiquement ajouté à votre formulaire. Vous pourrez ensuite l'envoyer à votre serveur pour vérification. Ce jeton sera récupérable côté serveur grâce au paramètre POST h-captcha-response.

Voici un exemple complet d'utilisation de hCaptcha pour protéger un formulaire d'inscription contre les abus automatisés. Lors de la soumission du formulaire, le jeton h-captcha-response sera inclus dans les données POST contenant l'adresse e-mail et le mot de passe une fois le test réussi.

<html>
<head>
<title>hCaptcha Demo</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form action="" method="POST">
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<div class="h-captcha" data-sitekey="your_site_key"></div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Vérifier la réponse de l'utilisateur côté serveur

En ajoutant le code côté client, vous avez pu afficher un widget hCaptcha permettant de déterminer si les utilisateurs étaient des personnes réelles ou des robots. Une fois la vérification réussie, le script hCaptcha a inséré un jeton unique dans les données de votre formulaire.

Pour vérifier que le jeton est bien réel et valide, vous devez maintenant le vérifier au point de terminaison de l'API :

https://api.hcaptcha.com/siteverify

Ce point de terminaison attend une requête POST avec deux paramètres : votre clé secrète et le jeton h-captcha-response envoyé depuis votre interface utilisateur (HTML) vers votre serveur (serveur) pour vérification. N’envoyez pas de données JSON : ce point de terminaison attend une requête POST au format URL standard.

De plus, pour une sécurité renforcée, il est recommandé d'inclure l'adresse IP de l'utilisateur. Bien que cela ne soit pas strictement obligatoire, fournir l'adresse IP contribue à améliorer la précision de la vérification. Pour les entreprises, cela permet également d'établir des scores de risque.

Un test simple ressemblera à ceci :

curl https://api.hcaptcha.com/siteverify \
-X POST \
-d "secret=YOUR-SECRET&remoteip=CLIENT-IP&response=CLIENT-RESPONSE"
  • CLIENT-RESPONSE est le jeton renvoyé par le SDK hCaptcha au client.
  • YOUR-SECRET est votre clé secrète de site ("ES_...") que vous avez générée dans le tableau de bord.
  • CLIENT-IP correspond à l'adresse IP du client. Bien que remoteip ne soit pas strictement requis, le fournir contribue à améliorer la précision de la vérification.

Le point de terminaison attend le type de contenu application/x-www-form-urlencoded. Vous pouvez voir exactement ce qui est envoyé en utilisant

curl -vv

dans l'exemple ci-dessus.

N'utilisez pas de requête GET pour appeler /siteverify.. Utilisez une requête POST et transmettez les paramètres dans le corps du formulaire, et non dans l'URL.

Bien que le point de terminaison puisse répondre correctement à une requête GET ou à une requête POST utilisant des paramètres d'URL, cela n'est pas garanti. Si les paramètres envoyés à la requête GET sont trop longs, celle-ci échouera et vous ne pourrez pas valider les codes d'accès. L'utilisation d'une requête POST vous assure d'éviter ce problème.

Veuillez noter que vous devez appeler /siteverify avec votre clé secrète afin de vérifier que les codes d'accès que vous reçoivent des utilisateurs sont valides et non expirés. Vous ne pourrez pas non plus vérifier les codes d'accès d'une clé de site d'un compte si vous utilisez la clé secrète d'un autre compte.

info
You can find your secret key on your profile page.
Paramètre POSTDescription
secrèteObligatoire. Votre clé secrète de compte.
réponseObligatoire. Le jeton de vérification que vous avez reçu lorsque l'utilisateur a relevé le défi sur votre site.
adresse IP distanteRecommandé. L'adresse IP de l'utilisateur.
clé de siteFacultatif. La clé de site que vous vous attendez à voir.

Les jetons sont à usage unique et doivent être vérifiés rapidement après leur émission. Pour récupérer le jeton sur votre serveur, utilisez le paramètre POST h-captcha-response soumis par votre formulaire.

Nous vous recommandons de transmettre le paramètre sitekey, car il empêchera l'utilisation des jetons émis avec une clé de site donnée ailleurs. Selon vos paramètres de difficulté, cela peut être sans conséquence sur la sécurité. Toutefois, si vous définissez un niveau de difficulté élevé sans imposer la correspondance des clés de site, un adversaire pourrait potentiellement résoudre un défi plus facile avec une autre clé de site, puis utiliser le jeton avec une clé plus difficile.

# PSEUDO CODE

SECRET_KEY = "your_secret_key" # replace with your secret key
VERIFY_URL = "https://api.hcaptcha.com/siteverify"

# Retrieve token from post data with key 'h-captcha-response'.
token = request.POST_DATA['h-captcha-response']

# Build payload with secret key and token.
data = { 'secret': SECRET_KEY, 'response': token }

# Make POST request with data payload to hCaptcha API endpoint.
response = http.post(url=VERIFY_URL, data=data)

# Parse JSON from response. Check for success or error codes.
response_json = JSON.parse(response.content)
success = response_json['success']

Votre requête POST recevra une réponse JSON. Vous devez vérifier le champ success et n'exécuter votre logique métier habituelle que si success est égal à true. Sinon, vérifiez le champ error-codes pour un code d'erreur compréhensible par un humain et renvoyez un message d'erreur approprié à l'utilisateur final, ou un message d'erreur générique si aucun détail n'est spécifié dans error-codes.

Voici à quoi ressemble une réponse JSON de hCaptcha :

{
"success": true|false, // is the passcode valid, and does it meet security criteria you specified, e.g. sitekey?
"challenge_ts": timestamp, // timestamp of the challenge (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the challenge was passed
"credit": true|false, // optional: deprecated field
"error-codes": [...] // optional: any error codes
"score": float, // ENTERPRISE feature: a score denoting malicious activity.
"score_reason": [...] // ENTERPRISE feature: reason(s) for score.
}

(Voir hCaptcha.com/enterprise pour plus de détails sur les fonctionnalités de hCaptcha Enterprise telles que les scores des bots, les modes passifs et quasi passifs « No-CAPTCHA », et plus encore.)

Veuillez noter que le champ de crédit n'est pas toujours inclus et qu'il sera supprimé au troisième trimestre 2023.

Veuillez noter que le champ « nom d'hôte » provient du navigateur de l'utilisateur et ne doit en aucun cas servir à l'authentification ; il est principalement utile à des fins statistiques. De plus, en cas de forte augmentation du trafic de test sur votre site, le champ « nom d'hôte » peut afficher la valeur « non fourni » au lieu de sa valeur habituelle ; tous les autres champs conserveront leur valeur normale.

Tableau des codes d'erreur Siteverify

Voici les codes d'erreur qui peuvent être renvoyés par l'API hCaptcha :

Code d'erreurDescription
secret d'entrée manquantVotre clé secrète a disparu.
secret d'entrée invalideVotre clé secrète est invalide ou mal formée.
réponse-entrée manquanteLe paramètre de réponse (jeton de vérification) est manquant.
réponse d'entrée invalideLe paramètre de réponse (jeton de vérification) est invalide ou mal formé.
réponse d'entrée expiréeLe paramètre de réponse (jeton de vérification) a expiré. (120 s par défaut)
réponse déjà vueLe paramètre de réponse (jeton de vérification) a déjà été vérifié une fois.
mauvaise demandeLa requête est invalide ou mal formée.
télécommande manquanteLe paramètre remoteip est manquant.
adresse-télécommande invalideLe paramètre remoteip n'est pas une adresse IP valide ou une valeur masquée.
n'utilise pas de code d'accès facticeVous avez utilisé une clé de site de test, mais pas son secret correspondant.
incompatibilité de clé de site et de secretLa clé du site n'est pas enregistrée avec le secret fourni.

Rotation de votre secret Siteverify

Votre secret SiteVerify sert uniquement à l'authentification sécurisée de machine à machine ; il ne doit jamais être divulgué publiquement.

Si votre code secret SiteVerify a été divulgué par inadvertance, vous pourriez recevoir un avertissement par courriel de notre part.

Vous pouvez également le modifier vous-même à tout moment en accédant au Tableau de bord, en sélectionnant votre icône de profil et l'option du menu Paramètres, puis en cliquant sur Generate New Secret. N'oubliez pas de noter cette valeur ! Nous ne la conservons pas, vous ne pourrez donc plus la consulter.

Vous recevrez une confirmation par e-mail quelques secondes après la rotation.

Remarque : Les utilisateurs de la version gratuite peuvent changer leur secret une fois par jour. Les utilisateurs Pro peuvent le changer jusqu’à trois fois par jour. Les utilisateurs Entreprise disposent d’options supplémentaires pour gérer leurs secrets.

Par exemple, les comptes Entreprise permettent de créer plusieurs clés de site secrètes avec une date d'expiration optionnelle et d'associer ces clés à une ou plusieurs clés de site afin de segmenter les clés secrètes par environnement, d'attribuer des clés uniques à chaque équipe, etc. Consultez la documentation Entreprise pour plus d'informations.

Développement local

Si vous développez sur votre machine locale, voici quelques points à garder à l'esprit.

Les navigateurs modernes appliquent des règles CORS et CORB strictes ; par conséquent, l’ouverture d’une URL contenant file://URI qui charge hCaptcha ne fonctionnera pas. Le chargement de hCaptcha depuis http://localhost/ rencontrera le même problème sur certains navigateurs. L’API hCaptcha interdit également l’utilisation de localhost et 127.0.0.1 comme noms d’hôte.

La solution la plus simple pour contourner ces problèmes consiste à ajouter une entrée dans le fichier hosts. Par exemple :

127.0.0.1 test.mydomain.com

Placez ceci dans /etc/hosts sous Linux, /private/etc/hosts sous Mac OS X ou C:\Windows\System32\Drivers\etc\hosts sous Windows.

Vous pourrez ensuite accéder à votre serveur local via http://test.mydomain.com, et tout fonctionnera comme prévu.

Types TypeScript

Comment installer

Vous pouvez installer nos types TypeScript @hcaptcha/types pour la variable globale hcaptcha à l'aide de votre gestionnaire de paquets préféré :

yarn add -D @hcaptcha/types

ou

npm install -D @hcaptcha/types

Comment utiliser

Localement

import '@hcaptcha/types';

// `hcaptcha` now is defined on the global object
hcaptcha.execute();

ou

///<reference types="@hcaptcha/types"/>

// `hcaptcha` now is defined on the global object
hcaptcha.execute();

À l'échelle mondiale

Ajoutez une importation ou une référence à votre .d.ts :

import "@hcaptcha/types";

// or

/// <reference types="@hcaptcha/types"/>

Ou ajoutez "node_modules/@hcaptcha" au typeRoots dans tsconfig.json

{
"compilerOptions": {
// ...
"typeRoots": [
"node_modules/@hcaptcha"
]
// ...
},
// ...
}

Tests d'intégration : Clés de test

Si vous prévoyez d'exécuter des tests d'intégration automatisés accédant à un serveur en production, la solution la plus simple consiste à utiliser les clés de site hCaptcha de test suivantes, qui génèrent systématiquement un code d'accès sans poser de question. Ces codes d'accès ne peuvent être vérifiés qu'à l'aide du secret de test.

attention

Les clés de test ne fournissent aucune protection anti-bot, veuillez donc bien vérifier que vous ne les utilisez que dans votre environnement de test !

Clé de test : Compte éditeur ou Pro

Paramètre de testValeur
Clé de site10000000-ffff-ffff-ffff-000000000001
Clé secrète0x0000000000000000000000000000000000000000
Jeton de réponse10000000-aaaa-bbbb-cccc-000000000001

Cette paire de clés ne sera jamais utilisée pour contester le jeton de réponse et produira toujours le même jeton de réponse, qui renverra success: true lorsqu'il sera transmis au point de terminaison avec ce secret. La réponse siteverify contiendra les champs présents dans les comptes Publisher et Pro.

Si vous êtes un client Entreprise, veuillez plutôt utiliser les paires de clés de test ci-dessous pour vous assurer que vous utilisez bien les champs score et autres champs Entreprise siteverify.

Jeu de clés de test : Compte d’entreprise (Utilisateur final sécurisé)

info

Assurez-vous d'envoyer le champ remoteip à siteverify pour activer tous les champs de réponse pour les tests.

Paramètre de testValeur
Clé de site20000000-ffff-ffff-ffff-000000000002
Clé secrète0x0000000000000000000000000000000000000000
Jeton de réponse20000000-aaaa-bbbb-cccc-000000000002

Jeu de clés de test : Compte Entreprise (Bot détecté)

info

Assurez-vous d'envoyer le champ remoteip à siteverify pour activer tous les champs de réponse pour les tests.

Paramètre de testValeur
Clé de site30000000-ffff-ffff-ffff-000000000003
Clé secrète0x0000000000000000000000000000000000000000
Jeton de réponse30000000-aaaa-bbbb-cccc-000000000003

Pour les utilisateurs de hCaptcha Enterprise, les deux paires de clés ci-dessus vous permettront de vérifier le comportement de votre application dans les scénarios de score les plus courants. Veuillez contacter vos ingénieurs d'assistance à l'intégration pour obtenir de l'aide si vous avez des questions supplémentaires.

Tests frontaux : Forcer un défi visuel

Parfois, vous souhaitez forcer un test visuel pour vous assurer que tout s'affiche comme prévu lorsqu'une fenêtre modale de test est déclenchée.

Si vous êtes un client Entreprise, il vous suffit d'ajouter une règle « Challenge » ciblant votre adresse IP ou votre agent utilisateur.

Si vous utilisez la version Pro ou la version gratuite, vous pouvez ajouter une deuxième clé de site configurée en mode « Toujours vérifier ». Notez que « vérifier » ne signifie pas automatiquement « vérifier visuellement » dans notre système, mais si vous rechargez rapidement la page plusieurs fois, vous risquez de rencontrer des problèmes d'affichage.

Tests côté serveur : s’assurer du traitement correct des jetons rejetés

Si le jeton que l'utilisateur vous envoie est invalide ou a expiré, la réponse siteverify contiendra success: false. Cela signifie que vous pouvez bloquer la requête en toute sécurité.

Pour tester cela, utilisez simplement une chaîne de caractères absurde comme « FAKE-TOKEN » dans vos tests d'intégration backend lorsque vous souhaitez valider le comportement en cas d'échec de bout en bout.

Et ensuite ?

Félicitations ! Grâce à ce guide, vous disposez désormais d’une implémentation complète et fonctionnelle de hCaptcha. Par défaut, hCaptcha prend en charge plusieurs widgets par page et la localisation automatique.

Si vous êtes intéressé par une implémentation plus avancée impliquant des rappels JavaScript, un rendu explicite, des thèmes alternatifs ou une localisation explicite, consultez la configuration next section.

Et si vous rencontrez des problèmes pour faire fonctionner hCaptcha sur votre site, ou si vous souhaitez lancer un projet pilote de notre service d'entreprise pour essayer les scores de bots, les modes sans CAPTCHA, et plus encore, envoyez get in touch et nous serons heureux de vous aider.