{"id":25411,"date":"2021-06-07T13:22:00","date_gmt":"2021-06-07T10:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25411"},"modified":"2021-10-18T02:33:27","modified_gmt":"2021-10-17T23:33:27","slug":"eine-anleitung-zum-hinzufuegen-von-google-recaptcha-v3-zu-ihrer-laravel-website","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/eine-anleitung-zum-hinzufuegen-von-google-recaptcha-v3-zu-ihrer-laravel-website\/","title":{"rendered":"Eine Anleitung zum Hinzuf\u00fcgen von Google reCAPTCHA v3 zu Ihrer Laravel-Website"},"content":{"rendered":"

In der Vergangenheit habe ich einen Artikel \u00fcber das Hinzuf\u00fcgen von Google reCAPTCHA zu den Laravel-Formularen ver\u00f6ffentlicht<\/a>. Google hat dann die n\u00e4chste Version v3 von reCAPTCHA mitgebracht. Einer unserer Leser fragte, wie man reCAPTCHA v3 in eine Laravel-Anwendung integriert.<\/p>\n

reCAPTCHA v3 hat ein etwas anderes Verhalten. Im Gegensatz zur \u00e4lteren Version von reCAPTCHA m\u00fcssen Sie kein Captcha in Ihr Formular einf\u00fcgen. In dieser Version m\u00fcssen Ihre Besucher kein R\u00e4tsel l\u00f6sen. Stattdessen sehen Sie das reCAPTCHA-Symbol in der unteren rechten Ecke Ihrer Website. Diese v3-Version von reCAPTCHA k\u00e4mpft im Hintergrund gegen die Bots. Am wichtigsten ist, dass Sie nicht in jedem Formular Captcha hinzuf\u00fcgen m\u00fcssen. F\u00fcgen Sie es einfach einmal hinzu und es sch\u00fctzt alle Formen Ihrer Website.<\/p>\n

In diesem Artikel untersuchen wir, wie ein Benutzer reCAPTCHA v3 zu seiner Laravel-Website hinzuf\u00fcgen kann. Das Hinzuf\u00fcgen von reCAPTCHA sch\u00fctzt Ihre Website vor Bots und Spam.<\/p>\n

Holen Sie sich den Site-Schl\u00fcssel und den geheimen Schl\u00fcssel von reCAPTCHA<\/h3>\n

Um loszulegen, m\u00fcssen Sie Ihre Website zun\u00e4chst bei Google reCAPTCHA registrieren. Gehen Sie zu Google reCAPTCHA<\/a> und klicken Sie auf das ‚+‘-Symbol, um Ihre Site zu registrieren. F\u00fcgen Sie auf der n\u00e4chsten Seite die Domain Ihrer Website hinzu und w\u00e4hlen Sie die Option "reCAPTCHA v3". Wenn Sie es auf einem lokalen Server testen m\u00f6chten, sollten Sie zum Dom\u00e4nenfeld ‚localhost‘ hinzuf\u00fcgen.<\/p>\n

\"Eine<\/a><\/p>\n

Sobald Sie auf die Schaltfl\u00e4che "Senden" klicken, erhalten Sie den Site-Schl\u00fcssel und den geheimen Schl\u00fcssel. Kopieren Sie diese Schl\u00fcssel. Sie werden die n\u00e4chsten Schritte erfordern.<\/p>\n

\"Eine<\/a><\/p>\n

Installieren und konfigurieren Sie die Laravel reCAPTCHA-Bibliothek<\/h3>\n

Gehen<\/a> Sie zu Ihrem<\/a> Laravel-Projekt und installieren Sie die Bibliothek von biscolab,<\/a> die f\u00fcr die Integration von reCAPTCHA in Laravel entwickelt wurde. \u00d6ffnen Sie das Terminal in Ihrem Projekt-Root-Verzeichnis und f\u00fchren Sie den Befehl aus:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Ver\u00f6ffentlichen Sie nach der Installation der Bibliothek die Konfigurationsdatei mit dem folgenden Befehl.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
\u00d6ffnen Sie die .env<\/code>Datei in Ihrem Editor und f\u00fcgen Sie Ihre Website und die geheimen Schl\u00fcssel von reCAPTCHA wie unten gezeigt hinzu.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Achten Sie darauf, die Platzhalter ‚ADD_YOUR_SITE_KEY‘ und ‚ADD_YOUR_SECRET_KEY‘ durch die tats\u00e4chlichen Werte zu ersetzen. \u00d6ffnen Sie config\/recaptcha.php<\/code>als N\u00e4chstes die Version und setzen Sie sie auf v3.<\/p>\n
return [\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0'version' => 'v3',\n\u00a0\u00a0\u00a0\u00a0...\n];<\/code><\/pre>\n
L\u00f6schen Sie danach den Konfigurationscache mit dem Befehl:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
F\u00fcgen Sie Google reCAPTCHA v3 zu Ihrer Laravel-Website hinzu<\/h3>\n
Wir sind mit allen Einstellungen fertig und bereit, reCAPTCHA auf der Website hinzuzuf\u00fcgen. Dazu m\u00fcssen Sie zun\u00e4chst das HTML-Meta-Tag f\u00fcr csrf-token im Head-Bereich hinzuf\u00fcgen.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Wenn Ihre Website dieses Tag bereits hinzugef\u00fcgt hat, ignorieren Sie einfach den obigen Schritt. F\u00fcgen Sie als N\u00e4chstes den htmlScriptTagJsApi()<\/code>Helfer ein, bevor Sie das Head-Tag schlie\u00dfen.<\/p>\n
<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{!! htmlScriptTagJsApi() !!}\n\u00a0\u00a0\u00a0\u00a0<\/head><\/code><\/pre>\n
Gehen Sie nun zu Ihrer Website, laden Sie sie neu und Sie sollten das reCAPTCHA-Symbol in der unteren rechten Ecke einer Seite sehen. Das bedeutet, dass Ihre Website jetzt mit Google reCAPTCHA gesch\u00fctzt ist.<\/p>\n
Sie sind mit dem Hinzuf\u00fcgen von Google reCAPTCHA auf Ihrer Laravel-Website fertig. Wenn Sie die Antwort von reCAPTCHA sehen m\u00f6chten, m\u00fcssen Sie den Code im Head-Tag leicht \u00e4ndern.<\/p>\n
<head>\n...\n<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n<script type=\"text\/javascript\">\nfunction callbackThen(response){\n\u00a0\u00a0\u00a0\u00a0\/\/ read HTTP status\n\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ read Promise object\n\u00a0\u00a0\u00a0\u00a0response.json().then(function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\n\u00a0\u00a0\u00a0\u00a0});\n}\nfunction callbackCatch(error){\n\u00a0\u00a0\u00a0\u00a0console.error('Error:', error)\n}\n<\/script>\n\u00a0\n{!! htmlScriptTagJsApi([\n\u00a0\u00a0\u00a0\u00a0'callback_then' => 'callbackThen',\n\u00a0\u00a0\u00a0\u00a0'callback_catch' => 'callbackCatch'\n]) !!}\n<\/head><\/code><\/pre>\n
Laden Sie die Seite neu und pr\u00fcfen Sie in der Browserkonsole, Sie sehen die Antwort des Google reCAPTCHA. In meinem Fall wird es unten als Screenshot gezeigt.<\/p>\n
\"Eine<\/a><\/p>\n
Zum Thema passende Artikel<\/h4>\n