Standard CAPTCHA ist nutzlos, Bots durchlaufen es "sofort" und verursachen Probleme für Benutzer.
Die beste Lösung ist die Verwendung von Google reCAPTCHA v2 oder v3. Beide Versionen von Google reCAPTCHA sind großartige Optionen. Dies ist das Beste, was jetzt auf dem Markt mit klaren und zuverlässigen Lösungen erhältlich ist und auch kostenlos.
Das Hauptproblem bei beiden Versionen besteht darin, dass die PageSpeed Insight-Werte bei Verbindung um 20 bis 30 erheblich reduziert werden.
Beispiel für ReCAPTCHA v2 - erfordert das Erraten von Bildern
 |
Beispiel reCAPTCHA v3 - erfordert keine Aktionen des Benutzers, analysiert sein Verhalten im Hintergrund
  |
Ein wichtiger Punkt für mich ist, keine Probleme für echte Benutzer zu schaffen, weil Ich selbst bin kein großer Fan von erratenen Fahrzeugen in reCAPTCHA v2, daher habe ich mich für v3 entschieden.
Es gibt also zwei Probleme mit Google reCAPTCHA v3, die behoben werden müssen:
- hängendes Logo in der unteren rechten Ecke;
- Verlust von 20-30 Punkten bei Google PageSpeed Insight.
Hängendes Logo Mit
Google können Sie das Logo entfernen, indem Sie es in der Lizenzvereinbarung über CSS ausblenden.
.grecaptcha-badge {
visibility: hidden;
}Schreiben Sie stattdessen unter jedem Formular "Anti-Spam-reCAPTCHA-Datenschutz und Nutzungsbedingungen" mit Links zu relevanten Google-Seiten.
|
Punkteverlust bei Google PageSpeed Insight
Beim Verbinden einer Javascript-Datei aus reCAPTCHA v3 werden die Punktzahlen bei Google PageSpeed Insight erheblich reduziert. Das war entscheidend für mich. Ich denke, dies liegt an der Analyse des Benutzerverhaltens (ein ähnlicher Rückgang tritt auf, wenn das Webvisier in Yandex.Metrica verwendet wird).
Bei gut optimierten Ressourcen können Sie 20 bis 30 Punkte verlieren. Daher können Sie es ohne Änderungen auf separaten Seiten verwenden, auf denen die Geschwindigkeit nicht wichtig ist (z. B. Kontakte). Für die Verwendung auf der gesamten Website (z. B. zum Schutz eines End-to-End-Anmeldeformulars oder eines Newsletter-Abonnements) ist es ratsam, Änderungen vorzunehmen.
Ich habe mir eine Option ausgedacht, um reCAPTCHA v3 durch Klicken auf die Formularfelder zu initialisieren. Standardmäßig lade ich die Javascript-Datei nicht aus reCAPTCHA v3, und nur wenn der Benutzer den Cursor auf eines der Formularfelder setzt, lade ich sie. Höchstwahrscheinlich verringert diese Methode die Genauigkeit der Ermittlung realer Benutzer, es gab jedoch keine Probleme. Diese Genauigkeit reicht für meine Aufgaben.
Er begann, diese Technik zuerst auf 1C-Bitrix-Webformularen anzuwenden, dann für End-to-End-Autorisierungs- und Abonnementformulare auf Websites ohne Bitrix.
Angesichts der Tatsache, dass 1C-Bitrix ein öffentliches CMS ist, werde ich Sie anhand seines Beispiels allgemein über die Methodik und den möglichen Anwendungsfall informieren. Weitere Feinabstimmungen können an Ihre Bedürfnisse angepasst werden.
Verwenden von Google reCAPTCHA v3 in 1C-Bitrix-Webformularen
1. Rufen Sie das Formular mit der Standardkomponente bitrix: form auf und fügen Sie zwei hinzu:
- Ersetzen Sie den Schaltflächentyp = Senden durch den üblichen Schaltflächentyp = Schaltfläche
- füge versteckten Feldnamen hinzu = g_recaptcha_response
|
2. Fügen Sie die reCAPTCHA-Initialisierung hinzu, wenn Sie auf Formularfelder zur Javascript-Datei der Site oder Komponente klicken (in diesem Beispiel gehe ich davon aus, dass Sie jQuery verwenden):
$('body').on('click','form input, form textarea', function() {
if (typeof(grecaptcha) == 'undefined') {
var grecaptcha_s = document.createElement('script');
grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';
var grecaptcha_h = document.getElementsByTagName('script')[0];
grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
}
});3. Fügen Sie die Verfolgung eines Klicks auf die Schaltfläche im Formular hinzu. Weiter innen verwenden wir das in der Google-Dokumentation beschriebene Beispiel. Es füllt das Feld g_recaptcha_response aus, das wir im letzten Schritt zur Validierung des Benutzers verwenden werden.
$('body').on('click','form button[name="web_form_submit"]', function() {
grecaptcha.ready(function() {
grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
function(token) {
$('form input[name="g_recaptcha_response"]').val(token);
var form_obj = $('form');
var event_obj = form_obj.get(0);
BX.fireEvent(event_obj,'submit');
event_obj.submit();
}
);
});
});4. Verfolgen des Ereignisses onBeforeResultAdd in init.php
Bevor Sie die Ergebnisse des Formulars senden, wenden Sie sich mit Ihrem <PRIVATE_KEY> und dem Wert aus dem ausgeblendeten Feld g_recaptcha_response aus dem Formular an den Google-Server.
Als Antwort erhalten wir die Punkte dieses Benutzers:
- 1 das ist definitiv eine Person
- 0 genau ein Roboter
- Mehr als 0,5 können als menschlich angesehen werden
AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");
function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
global $APPLICATION;
$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
if (!empty($g_recaptcha_response))
{
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
$g_recaptcha_response_check = false;
if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
{
$g_recaptcha_response_check = true;
}
if (!$g_recaptcha_response_check)
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.</a>');
}
}
else
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.');
}
}Abschließend
Diese Technik kann auf allen Websites und Formularen verwendet werden, unabhängig vom CMS. Ich habe allgemeine Arbeitsmethoden bereitgestellt, die in Ihrem Projekt angewendet werden können.
Sie können dasselbe mit Google reCAPTCHA v2 tun, indem Sie auf das Formular klicken und den Benutzer bitten, das Kontrollkästchen "Ich bin kein Roboter" zu aktivieren und die Bilder bei Bedarf zu erraten. In diesem Fall werden auch PageSpeed Insight-Punkte gespeichert und dem Benutzer ein Werkzeug (Bilder auswählen) zur Verfügung gestellt, um zu beweisen, dass es sich nicht um einen Roboter handelt. Aber wie ich oben sagte, ist das Wichtigste für mich, keine Hindernisse für den Benutzer zu schaffen.