So fügen Sie CAPTCHA zum WooCommerce-Login hinzu

Möchten Sie Ihrem Online-Shop eine zusätzliche Sicherheitsebene hinzufügen? Sie sind an der richtigen Stelle. In diesem Artikel zeigen wir Ihnen verschiedene Methoden, um CAPTCHA zum WooCommerce-Login hinzuzufügen und es richtig zu konfigurieren.

Was ist CAPTCHA?

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) ist eine moderne Technik, die verwendet wird, um eine Benutzerverifizierung zu jeder Website oder mobilen App hinzuzufügen. Mit anderen Worten, CAPTCHAs werden verwendet, um echte Menschen von Bots zu unterscheiden, um Ihre Website sicherer zu machen. Das CAPTCHA erstellt einfache Herausforderungen und zeigt sie auf dem Frontend an, und der Benutzer muss sie lösen, um auf die Website zuzugreifen. Da Bots das CAPTCHA nicht lösen können, können Sie unerwünschten Datenverkehr filtern und verhindern, dass Bots auf Ihre Website gelangen.

Wenn Sie also Bots von Ihrer Anmeldung, Registrierung und anderen wichtigen Seiten fernhalten möchten, ist das Hinzufügen von CAPTCHA eine gute Option.

CDN-Anbieter wie Cloudflare haben diese Technologie ebenfalls integriert und ermöglichen es Ihnen, Ihrer Website eine Sicherheitsschicht hinzuzufügen.

Arten von CAPTCHAs

Werfen wir nun einen Blick auf die verschiedenen Arten von CAPTCHAs und wie sie funktionieren.

1) Text-CAPTCHA

Um auf eine bestimmte Seite zuzugreifen oder eine Aufgabe wie das Absenden eines Formulars auszuführen, müssen Besucher den im Bild gezeigten Text in ein Absendefeld eingeben. Wenn sie den Text richtig eingeben, werden sie auf die nächste Seite weitergeleitet. Wenn der Text jedoch nicht korrekt ist, generiert das System automatisch ein weiteres Text-CAPTCHA, das Benutzer eingeben müssen.

2) Bild-CAPTCHA

Das ist der gebräuchlichste und am weitesten verbreitete CAPTCHA-Typ. Benutzer müssen je nach Anforderung die richtigen Bildfelder auswählen, um sicherzustellen, dass sie kein Roboter sind. Wenn das Bild oder die Anweisungen nicht klar sind, können Besucher das CAPTCHA überspringen und ein neues erhalten.

3) Audio-CAPTCHA

Wenn Sie Audio-CAPTCHA verwenden, müssen Ihre Website-Besucher eine bestimmte Audiodatei anhören und die Wörter/Zahlen, die sie hören, in ein Sendefeld eingeben. Dies ist sicherer als Bild- oder Text-CAPTCHA, aber es ist nicht so verbreitet wie die anderen Typen.

4) Mathe-CAPTCHA

Dies ist wahrscheinlich einer der herausforderndsten CAPTCHA-Typen auf dieser Liste. Wenn Sie mathematisches CAPTCHA auf Ihrer Website konfigurieren, müssen Benutzer eine Berechnung lösen, um auf eine bestimmte Seite zuzugreifen oder eine bestimmte Aktion auszuführen. Meistens sind die Berechnungen einfach, aber Besucher können das CAPTCHA auch aktualisieren, um ein neues zu erhalten.

Warum Captcha zum Login in WooCommerce hinzufügen?

Wenn Sie Ihren Shop vor Spam-Registrierungen und Bots schützen möchten, sollten Sie CAPTCHA zu Ihrem WooCommerce-Login hinzufügen. Anmeldeseiten und Kontaktformulare sind einige der Seiten, auf die Hacker am meisten abzielen. Aus diesem Grund wird die Verwendung des standardmäßigen WordPress-Anmeldeformulars nicht empfohlen.

Wie Sie sehen können, gibt es dort keine zusätzlichen Sicherheitsebenen. Durch die Verwendung der richtigen Kontoanmeldeinformationen kann jeder auf das Konto zugreifen. Hacker verwenden Software, die verschiedene Kombinationen aus Benutzername und Passwort ausprobiert, bis sie die richtige Kombination finden. Wir haben bereits gesehen, wie Sie die WordPress-Anmeldeseite anpassen können, um dies zu vermeiden, aber Sie sollten auch eine weitere Sicherheitsebene hinzufügen.

Das Hinzufügen von CAPTCHA zur WooCommerce-Anmeldeseite ist eine hervorragende Möglichkeit, Ihre Website sicherer zu machen und ihre Websites vor Hackern zu schützen. Hacker verwenden häufig Software, um die Anmeldeseite zu erzwingen und auf Websites zuzugreifen. Wenn Sie jedoch ein CAPTCHA-Bestätigungsfeld zur Anmeldeseite hinzufügen, kann die Software den Vorgang nicht abschließen.

Nach dem Hinzufügen von CAPTCHA sieht Ihr Anmeldeformular wie folgt aus:

Auch wenn der Benutzer die richtigen Anmeldeinformationen eingegeben hat, muss er das CAPTCHA lösen, bevor er sich beim Konto-Dashboard anmeldet.

Jetzt, da Sie wissen, warum Sie CAPTCHA zum WooCommerce-Login hinzufügen müssen, lernen wir, wie es geht und wie Sie Spam verhindern.

So fügen Sie CAPTCHA zum WooCommerce-Login hinzu

Es gibt zwei Möglichkeiten, CAPTCHA zu WooCommerce hinzuzufügen:

1. Plugins verwenden
2. Programmatisch

Lassen Sie uns einen Blick auf jede Methode werfen, damit Sie die beste für sich auswählen können.

1) Fügen Sie CAPTCHA mit Plugins hinzu

Es gibt mehrere Plugins, die Sie verwenden können, um CAPTCHA zu Ihrer Website hinzuzufügen. In diesem Abschnitt konzentrieren wir uns auf zwei Tools:

• reCaptcha von BestWebSoft
• Fortgeschrittenes noCAPTCHA & reCAPTCHA

1.1) reCaptcha von BestWebSoft

reCaptcha von BestWebSoft ist eines der beliebtesten kostenlosen CAPTCHA-Plugins auf dem Markt. Mal sehen, wie man es einrichtet.

1.1.1) Installation und Aktivierung

Melden Sie sich zunächst bei Ihrer WordPress-Website an und gehen Sie zu Plugins > Add New . Suchen Sie dann nach reCaptcha von BestWebSoft, klicken Sie auf Jetzt installieren und aktivieren Sie es.

1.1.2) Konfiguration

Sobald Sie das Plug-in aktiviert haben, gehen Sie zur Google reCAPTCHA-Verwaltungskonsole und schließen Sie die Registrierung ab. Um sich für eine neue Website zu registrieren, müssen Sie Folgendes eingeben:

• Etikett
• reCAPTCHA-Typ
• Domänen
• Besitzer

Nachdem Sie die erforderlichen Informationen ausgefüllt haben, senden Sie das Formular ab.

In unserem Fall haben wir reCAPTCHA v2 ausgewählt, das ist der einfachste reCAPTCHA-Typ, der in der Liste verfügbar ist.

Es gibt 3 Optionen, die Sie auswählen können. Wir empfehlen, das Kontrollkästchen Ich bin kein Roboter zu aktivieren , was die häufigste Bestätigung ist.

Sobald Sie das Formular abgeschickt haben, zeigt die Plattform zwei Schlüssel auf dem Bildschirm an: den Site-Schlüssel und den geheimen Schlüssel.

Kopieren Sie sie und legen Sie sie an einem praktischen Ort ab, da Sie sie in einer Minute verwenden werden.

Gehen Sie nun zurück zu Ihrem WordPress-Dashboard und gehen Sie zu den reCAPTCHA-Einstellungen .

Fügen Sie die Schlüssel ein und stellen Sie vor dem Klicken auf die Schaltfläche „Senden“ sicher, dass Sie dieselbe Version ausgewählt haben, die Sie zuvor ausgewählt haben.

Scrollen Sie dann zum Ende der Seite und Sie sehen einige WordPress-Standardseiten. Wählen Sie die Seiten aus, denen Sie CAPTCHA hinzufügen möchten. Für diese Demonstration wählen wir die Anmeldeseite aus, aber Sie können auch weitere Seiten auswählen. Sie können CAPTCHA auch für bestimmte Benutzerrollen ausblenden.

Danach Einstellungen speichern und fertig!

1.3) Prüfung

Um zu überprüfen, ob alles richtig funktioniert, gehen Sie in einem Inkognito-Fenster auf Ihre Anmeldeseite und Sie sehen ein CAPTCHA-Feld unter dem Passwortfeld.

Wenn Sie im Frontend kein Kontrollkästchen sehen, haben Sie die falschen Schlüssel eingegeben oder den falschen reCAPTCHA-Typ ausgewählt. Gehen Sie zurück zu den Einstellungen und überprüfen Sie die Plugin-Optionen.

So können Sie CAPTCHA zur standardmäßigen WordPress-Anmeldeseite hinzufügen. Wenn Sie die standardmäßige WordPress-Anmeldeseite als WooCommerce-Anmeldeseite verwenden, ist dies eine großartige Option. Wenn Sie jedoch eine von WooCommerce generierte dedizierte Seite verwenden, müssen Sie die Premium-Version dieses Plugins verwenden.

Derzeit enthält die kostenlose Version von reCAPTCHA keine WooCommerce-Integration. Die Premium-Version wird jedoch leistungsstärkere Integrationen und erweiterte Funktionen für 21 USD pro Jahr freischalten.

Nach dem Kauf müssen Sie den Lizenzschlüssel verifizieren und dann reCAPTCHA-Optionen zu den WooCommerce-Feldern für Anmeldung, Registrierung oder Passwortzurücksetzung hinzufügen.

Wenn Sie der WooCommerce-Anmeldeseite ein CAPTCHA-Feld hinzufügen möchten, ohne etwas zu bezahlen, haben wir ein weiteres Plugin für Sie.

1.2) Erweitertes noCAPTCHA & reCAPTCHA (V2 & V3)

Advanced noCAPTCHA & reCAPTCHA ist ein hervorragendes kostenloses Plugin, mit dem Sie CAPTCHA ganz einfach zu Ihrer Website hinzufügen können. Sehen wir uns an, wie Sie es konfigurieren, um Ihre Website zu schützen.

1.2.1) Installation und Aktivierung

Wie üblich müssen Sie zunächst das Plugin auf Ihrer Website installieren und aktivieren. Gehen Sie zu Plugins > Neu hinzufügen, suchen Sie nach dem Plugin und installieren Sie es.

Nachdem Sie das Tool aktiviert haben, sehen Sie die Einstellungen des Plugins im Bereich Einstellungen .

1.2.2) Konfiguration

Die Konfiguration dieses Tools ist minimal. Gehen Sie zur Google reCAPTCHA-Verwaltungskonsole und schließen Sie die Registrierung ab. Denken Sie daran, den gewünschten CAPTCHA-Typ auszuwählen und den Websiteschlüssel und den geheimen Schlüssel zu kopieren.

Wählen Sie dann den reCAPTCHA-Typ aus und fügen Sie Ihren Websiteschlüssel und Ihren geheimen Schlüssel in die entsprechenden Felder ein.

Wählen Sie danach die Formulare aus, die Sie mit reCAPTCHA schützen möchten. In diesem Fall wählen wir unser Anmelde- und Registrierungsformular aus. Speichern Sie danach die Änderungen.

1.2.3) Prüfung

Danach ist es an der Zeit, Ihre WooCommerce-Anmeldeseite zu überprüfen. Öffnen Sie die Anmeldeseite in einem Inkognito-Fenster und Sie sollten dort ein reCAPTCHA-Feld sehen.

Das ist es! So können Sie ganz einfach ein CAPTCHA-Feld zu Ihrer WooCommerce-Anmeldeseite hinzufügen. Aber was ist, wenn Sie dafür keine Tools von Drittanbietern verwenden möchten? Das geht auch mit ein bisschen Code.

2) CAPTCHA programmgesteuert hinzufügen

Wenn Sie über Programmierkenntnisse verfügen, können Sie CAPTCHA mithilfe von PHP-Snippets zu Ihrer WooCommerce-Anmeldeseite hinzufügen. In diesem Abschnitt zeigen wir Ihnen, wie Sie ein Google reCAPTCHA-Feld in den Anmeldebildschirm einfügen können.

Da wir die Datei functions.php des Themes bearbeiten werden, sollten Sie vor dem Start eine vollständige Sicherung Ihrer Website erstellen. Darüber hinaus empfehlen wir Ihnen, ein untergeordnetes Thema zu erstellen, falls Sie dies noch nicht getan haben.

Anstatt den Code direkt in die Datei functions.php einzufügen, verwenden wir für dieses Tutorial das Plugin Code Snippets. Es ist ein seitenspezifisches Tool, das von Tausenden von Bloggern und Entwicklern verwendet wird, um den Prozess der Bearbeitung von Kerndateien zu vereinfachen.

Installation und Aktivierung

Installieren und aktivieren Sie zunächst Code-Snippets auf Ihrer Website, wie unten gezeigt.

Nach der Aktivierung des Plugins sehen Sie auf der linken Seite dessen Einstellungen.

Aufbau

Klicken Sie auf Neu hinzufügen, geben Sie dem Snippet einen Namen und fügen Sie den folgenden Code ein:

 add_action('wp_head',function (){echo '<script src="https://www.google.com/recaptcha/api.js" async defer></script>';});
 add_action('woocommerce_login_form','add_recaptcha_to_login_form');
 Funktion add_recaptcha_to_login_form() {
 echo '<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>';
 } { ?>
 <div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div> <p>ACA el captcha</p>
 <?php
 }
 add_action( "login_form", "display_login_captcha" );
 Funktion verify_login_captcha($Benutzer, $Passwort) {
 if (isset($_POST['g-recaptcha-response'])) {
 $recaptcha_secret = 'IHR_GEHEIM_SCHLÜSSEL';
 $response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
 $response = json_decode($response["body"], true);
 if (true == $antwort["erfolg"]) {
 $user zurückgeben;
 } anders {
 return new WP_Error("Captcha ungültig", __("<strong>FEHLER</strong>: Du bist ein Bot"));
 }
 } anders {
 return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: Du bist ein Bot. Wenn nicht, dann aktiviere JavaScript"));
 }
 }
 add_filter("wp_authenticate_user", "verify_login_captcha", 10, 2); 

Stellen Sie sicher, dass Sie Ihren Site-Schlüssel und Ihren geheimen Schlüssel in das Snippet dort einfügen, wo YOUR_PUBLIC_KEY bzw. YOUR_SECRET_KEY steht . Wenn Sie das getan haben, speichern Sie die Änderungen und aktivieren Sie das Snippet.

Testen

Jetzt müssen Sie Ihre WooCommerce-Anmeldeseite von einem Inkognito-Fenster aus überprüfen. Sie sollten dort ein reCAPTCHA-Feld sehen.

Das ist es! So können Sie CAPTCHA mit ein wenig Code zur WooCommerce-Anmeldeseite hinzufügen.

Bonus: So passen Sie die Anmeldeseite an

Wenn Sie einen WooCommerce-Shop betreiben, empfiehlt es sich, Ihre Anmeldeseite anzupassen. Dadurch heben Sie sich nicht nur von Ihren Mitbewerbern ab, sondern machen Ihre Website auch sicherer. In diesem Abschnitt zeigen wir Ihnen, wie Sie Ihre Anmeldeseite bearbeiten, ohne eine einzige Codezeile schreiben zu müssen, um den Benutzern ein besseres Erlebnis zu bieten und Ihren Shop sicher zu halten.

Es gibt viele Plugins, um die Anmeldeseite anzupassen. In diesem Tutorial verwenden wir Custom Login Page Customizer, ein kostenloses Tool, das Sie aus dem WordPress-Plugin-Repository herunterladen können.

Als erstes müssen Sie das Plugin auf Ihrer Website installieren und aktivieren. Gehen Sie zu Plugins > Add New , suchen Sie nach Custom Login Page Customizer und installieren Sie es.

Nach der Aktivierung sehen Sie auf der linken Seite unter Login Customizer die Option Customizer .

Sobald Sie darauf zugreifen, sehen Sie den WordPress-Customizer. Das Plugin wird mit einigen vorgefertigten Vorlagen geliefert, die Sie verwenden können, um Ihr Leben einfacher zu machen und Zeit zu sparen.

Mit diesem Plugin können Sie den Hintergrund, das Logo, das Formular, die Felder und Schaltflächen Ihrer Website anpassen. Darüber hinaus können Sie auch benutzerdefinierte Codeskripte aus dem Abschnitt „ Benutzerdefiniertes CSS und JavaScript “ einbinden.

Wenn Sie mit Ihrer Anpassung zufrieden sind, denken Sie daran, die Änderungen zu speichern. Das ist es! Nun sehen Ihre Website-Besucher die neu gestaltete Login-Seite im Frontend.

Weitere Informationen dazu finden Sie in unserem Leitfaden zum Anpassen der Anmeldeseite in WordPress. Darüber hinaus empfehlen wir Ihnen, sich auch unser Tutorial zum Ändern der Anmelde-URL anzusehen.

Fazit

Alles in allem ist es wichtig, Ihre Anmeldeseite sicher zu halten. Durch die Verwendung von CAPTCHA auf Ihrer Anmeldeseite machen Sie Ihre Website sicherer und verhindern, dass unbefugte Benutzer wie Bots auf Ihr Dashboard zugreifen.

In diesem Leitfaden haben wir gesehen, wie man CAPTCHA mithilfe von Plugins und mit ein wenig Code zur WooCommerce-Anmeldeseite hinzufügt. Welche sollten Sie verwenden? Es hängt davon ab, ob. Beide Methoden werden die Arbeit erledigen, also hängt es von Ihren Fähigkeiten und Bedürfnissen ab. Wenn Sie nach einer einfachen Lösung suchen, können Sie ein Plugin verwenden. Wenn Sie andererseits über Programmierkenntnisse verfügen und nicht zu viele Plugins installieren möchten, können Sie das in diesem Tutorial bereitgestellte Code-Snippet hinzufügen.

Wenn Sie nach weiteren WooCommerce-spezifischen Tutorials suchen, werfen Sie einen Blick auf diese Artikel:

• So ändern Sie die URL der WordPress-Anmeldeseite
• WordPress-Login funktioniert nicht? Wie man es repariert
• So passen Sie die Anmeldeseite in WordPress an

Fanden Sie diesen Artikel hilfreich? Wenn ja, teilen Sie diesen Artikel mit Ihren Freunden in den sozialen Medien, um ihnen zu helfen, ihre Websites zu schützen.