Widget

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.

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.

Modes du widget

Le mode se définit avec data-mode="..." sur l'élément du widget <div data-captchacore-widget> ; à défaut, le réglage du site dans l'espace client s'applique.

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.

É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

Envoyer des formulaires via fetch()

Si votre formulaire est envoyé via fetch() ou XHR et permet plusieurs envois par page (recherche, vérification de domaine, panier), demandez un jeton distinct avec widget.getToken() avant chaque requête. Chaque jeton vaut pour exactement une vérification ; le widget résout le défi suivant en arrière-plan pendant que le visiteur continue. Les appels simultanés sont traités l’un après l’autre et ne reçoivent jamais le même jeton.

const form = document.querySelector('#domaincheck');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const body = new FormData(form);
  try {
    body.set('captchacore_token', await CaptchaCoreV2.getWidget(form).getToken());
  } catch {
    // Dienst nicht erreichbar: Platzhalter senden, Ihr Server entscheidet (Fail-Open)
    body.set('captchacore_token', 'cc-unavailable');
  }
  const res = await fetch('/domaincheck', {
    method: 'POST', body,
    headers: { Accept: 'application/json' },   // Fehler als JSON statt Weiterleitung
  });
});