Options du widget

Le widget se configure via des attributs data-. Ils se placent sur le conteneur portant data-captchacore-widget, certains également sur le formulaire. Chaque valeur ici remplace le réglage par défaut défini pour le site dans l'administration.

Attribut	Valeurs	Standard	Description
data-theme	auto \| light \| dark	auto	Thème de couleur. auto suit le réglage système du visiteur.
data-color	Couleur hexadécimale	#34d399	Couleur d'accent pour la case et la bordure
data-label	Texte	selon la langue	Libellé à côté de la case
data-brand	Texte ou vide	CaptchaCore	Marque à droite, vide = masquée
data-size	normal \| compact	normal	normal fait 360 px de large, compact 300 px
data-lang	de en fr es it nl pl pt tr ja zh ko ar ru	langue de la page	Langue des textes du widget. Sans valeur, l'attribut lang du formulaire compte, sinon celui de l'élément <html>.
data-start	auto \| focus \| none	auto	Quand la vérification démarre : immédiatement, au premier focus dans le formulaire, ou seulement au clic.
data-mode	interactive \| visible \| invisible	interactive	Remplace le mode défini dans l'administration pour ce seul formulaire.
data-form-type	login register contact comment checkout password_reset newsletter custom	—	Détermine quelle politique de formulaire s'applique. Se place sur le formulaire ou le conteneur.

Attributs sur la balise script

Ces valeurs se placent sur l'élément <script> lui-même et s'appliquent à tous les widgets de la page.

Attribut	Obligatoire	Description
data-site-key	oui	Clé publique du site (cc_pub_…).
data-service-url	oui	https://api.captchacore.eu
data-worker-url	non	Chemin personnalisé vers le worker de preuve de travail, nécessaire seulement avec un hébergement différent.
data-memory-hard-worker-url	non	Comme ci-dessus, pour le worker Argon2.

Modes du widget

Le mode se définit via data-captchacore="..." sur le <form>.

interactive Empfohlen

Widget immer sichtbar. PoW löst automatisch. Checkbox setzt sich selbst wenn genug menschliche Interaktion erkannt wird (3+ Zeichen getippt, Mausbewegung, 2+ Sekunden). Kein Klick nötig für echte User. Fallback: manueller Klick.

visible

Widget sichtbar. User muss die Checkbox klicken um die Verifikation zu starten. Ähnlich wie reCAPTCHA v2.

invisible

Kein sichtbares UI. PoW löst komplett im Hintergrund. Token wird automatisch beim Submit eingefügt. Ideal wenn kein visueller Schutz gewünscht ist.

API JavaScript du widget

Le script crée l'objet global CaptchaCoreV2. Sur des pages statiques, vous n'en avez pas besoin : le widget se lie de lui-même à tous les formulaires correspondants au chargement. L'API devient utile dès que des formulaires sont chargés en JavaScript, donc dans les systèmes de boutique, les applications monopage et les fenêtres modales.

Méthode	Finalité
CaptchaCoreV2.init(config)	Initialisation manuelle lorsque le script a été inclus sans attributs data. Attend au moins siteKey et serviceUrl.
CaptchaCoreV2.attach()	Recherche à nouveau les formulaires et lie les nouveaux. À appeler après chaque remplacement du DOM.
CaptchaCoreV2.destroy()	Détache tous les widgets, arrête l'observateur et nettoie. Utile avant un changement de page dans une SPA.
CaptchaCoreV2.getWidgets()	Renvoie les instances de widget actuellement liées.
CaptchaCoreV2.getLanguages()	Liste des 14 codes de langue pris en charge.
CaptchaCoreV2.on(event, fn)	S'abonner à un événement.
CaptchaCoreV2.off(event, fn)	Résilier l'abonnement.

Événements

CaptchaCoreV2.on('ready', function (data) {
  // Widget ist gebunden und einsatzbereit
});

CaptchaCoreV2.on('error', function (err) {
  // Netzwerkfehler, abgelaufener Nonce, ungültiger Schlüssel
  console.warn('CaptchaCore:', err);
});

Formulaires chargés ultérieurement

Le widget surveille le contenu de la page et détecte de lui-même les nouveaux formulaires portant data-captchacore. Cela couvre la plupart des cas. Si toutefois un formulaire est remplacé puis envoyé dans la foulée, l'observateur peut arriver trop tard : appelez alors explicitement attach() après l'insertion.

// Beispiel: Formular per fetch nachgeladen
const html = await (await fetch(url)).text();
container.innerHTML = html;
CaptchaCoreV2.attach();   // bindet das neue Formular an

Pour les systèmes de boutique et de forum

Des systèmes comme Shopware, WooCommerce ou phpBB remplacent souvent l'inscription, les formulaires d'adresse et les champs de commentaire via AJAX. Rattachez attach() à l'événement correspondant du système, une fois le nouveau contenu dans le DOM. Un second appel ne nuit pas : les formulaires déjà liés sont ignorés.