Umstieg von Friendly Captcha, reCAPTCHA oder hCaptcha

Der Wechsel zu CDPCaptcha braucht zwei Schritte: Script austauschen, dann die serverseitige Prüfung auf unsere Adresse umstellen.
Ein Kompatibilitätsmodus setzt das Widget auf die Element-Klassen des alten Dienstes, das HTML kann also bleiben, wie es ist.

1. Sitekey und API-Key anlegen

Registrieren Sie sich, legen Sie einen Sitekey für die Website und einen API-Key für den Server an.
Beides finden Sie in Ihrem Konto.

2. Script austauschen

Entfernen Sie die alten Script-Tags und fügen Sie unseres mit data-compat für den Dienst ein, den Sie verlassen.
Das Widget setzt sich dann auch auf die alte Element-Klasse und benennt das versteckte Feld wie der alte Dienst, sodass Formular-Handler, die dieses Feld lesen, weiter funktionieren, bis Sie es umbenennen.

Von Friendly Captcha

<!-- remove -->\n<script type="module" src="…/site.min.js" async defer></script>\n<script nomodule src="…/site.compat.min.js" async defer></script>\n\n<!-- add -->\n<link rel="stylesheet" href="https://cdpcaptcha.com/core/assets/css/cdp-captcha.css">\n<script src="https://cdpcaptcha.com/core/assets/js/cdp-captcha.js" data-compat="frc" defer></script>\n\n<!-- keep or rename; both work -->\n<div class="frc-captcha" data-sitekey="YOUR_CDPCAPTCHA_SITEKEY"></div>\n<div class="cdp-captcha" data-sitekey="YOUR_CDPCAPTCHA_SITEKEY"></div>

Attribute: data-sitekey, data-start (auto / focus / none), data-theme, lang und data-form-field-name haben dieselben Namen und Werte.
Ereignisse: aus frc:widget.complete wird cdpcaptcha:widget.complete (ebenso für error, expire, reset, statechange);
event.detail.response ist in beiden das Token.
Serverseitig: Die siteverify-Anfrage hat dieselbe Form (response, optional sitekey, Header X-API-Key);
lesen Sie success und bei Fehlschlag error.code.

Von reCAPTCHA v2

<!-- remove -->\n<script src="https://www.google.com/recaptcha/api.js" async defer></script>\n\n<!-- add -->\n<link rel="stylesheet" href="https://cdpcaptcha.com/core/assets/css/cdp-captcha.css">\n<script src="https://cdpcaptcha.com/core/assets/js/cdp-captcha.js" data-compat="recaptcha" defer></script>\n\n<!-- the element can stay; the hidden field is named g-recaptcha-response -->\n<div class="g-recaptcha" data-sitekey="YOUR_CDPCAPTCHA_SITEKEY"></div>

Ersetzen Sie auf dem Server den Aufruf von siteverify bei google.com durch unseren: Senden Sie das Feld als response und Ihren API-Key im Header X-API-Key statt im Parameter secret.
Lesen Sie success.
data-size, data-callback und das JavaScript-Objekt grecaptcha haben keine Entsprechung;
nutzen Sie stattdessen unsere Ereignisse.
Unsichtbares reCAPTCHA entspricht data-start="auto".

Von hCaptcha

<!-- remove -->\n<script src="https://js.hcaptcha.com/1/api.js" async defer></script>\n\n<!-- add -->\n<link rel="stylesheet" href="https://cdpcaptcha.com/core/assets/css/cdp-captcha.css">\n<script src="https://cdpcaptcha.com/core/assets/js/cdp-captcha.js" data-compat="hcaptcha" defer></script>\n\n<div class="h-captcha" data-sitekey="YOUR_CDPCAPTCHA_SITEKEY"></div>

Im Kompatibilitätsmodus heißt das versteckte Feld h-captcha-response.
Ersetzen Sie den Serveraufruf von hcaptcha.com/siteverify wie oben beschrieben durch unseren.

3. Serverseitige Prüfung umstellen

# before (any of the three services)
POST https://<old-service>/siteverify  secret=…  response=…

# after
POST https://cdpcaptcha.com/api/v1/siteverify
X-API-Key: ck_YOUR_API_KEY
response=…  sitekey=YOUR_CDPCAPTCHA_SITEKEY

4. Aufräumen

Wenn alles funktioniert, benennen Sie die Element-Klasse in cdp-captcha um, entfernen data-compat und lesen das Feld cdp-captcha-solution.
Streichen Sie den alten Dienst aus Ihrer CSP und Ihrem Datenschutzhinweis.

Vergleich