{"id":29089,"date":"2021-06-07T13:45:00","date_gmt":"2021-06-07T10:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29089"},"modified":"2021-10-18T03:36:25","modified_gmt":"2021-10-18T00:36:25","slug":"przewodnik-po-dodaniu-google-recaptcha-v3-do-twojej-witryny-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/przewodnik-po-dodaniu-google-recaptcha-v3-do-twojej-witryny-laravel\/","title":{"rendered":"Przewodnik po dodaniu Google reCAPTCHA v3 do Twojej witryny Laravel"},"content":{"rendered":"

W przesz\u0142o\u015bci publikowa\u0142em artyku\u0142 o dodaniu Google reCAPTCHA do formularzy Laravel<\/a>. Nast\u0119pnie Google przyni\u00f3s\u0142 kolejn\u0105 wersj\u0119 v3 reCAPTCHA. Jeden z naszych czytelnik\u00f3w zapyta\u0142, jak zintegrowa\u0107 reCAPTCHA v3 z aplikacj\u0105 Laravel.<\/p>\n

reCAPTCHA v3 ma nieco inne zachowanie. W przeciwie\u0144stwie do starszej wersji reCAPTCHA, nie musisz umieszcza\u0107 captcha w formularzu. W tej wersji Twoi go\u015bcie nie musz\u0105 rozwi\u0105zywa\u0107 zagadek. Zamiast tego zobaczysz ikon\u0119 reCAPTCHA w prawym dolnym rogu swojej witryny. Ta wersja v3 reCAPTCHA walczy z botami w tle. Co najwa\u017cniejsze, nie musisz dodawa\u0107 captcha w ka\u017cdej formie. Wystarczy doda\u0107 go raz, a ochroni wszystkie formy Twojej witryny.<\/p>\n

W tym artykule badamy, w jaki spos\u00f3b u\u017cytkownik mo\u017ce doda\u0107 reCAPTCHA v3 do swojej witryny Laravel. Dodanie reCAPTCHA chroni Twoj\u0105 witryn\u0119 przed botami i spamem.<\/p>\n

Uzyskaj klucz witryny i tajny klucz reCAPTCHA<\/h3>\n

Aby rozpocz\u0105\u0107, musisz najpierw zarejestrowa\u0107 swoj\u0105 witryn\u0119 w Google reCAPTCHA. Przejd\u017a do Google reCAPTCHA<\/a> i kliknij ikon\u0119 \u201e+", aby zarejestrowa\u0107 swoj\u0105 witryn\u0119. Na nast\u0119pnej stronie dodaj domen\u0119 swojej witryny, wybierz opcj\u0119 \u201ereCAPTCHA v3″. Je\u015bli chcesz przetestowa\u0107 go na lokalnym serwerze to do pola domeny powiniene\u015b doda\u0107 'localhost’.<\/p>\n

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

Po naci\u015bni\u0119ciu przycisku przesy\u0142ania otrzymasz klucz witryny i tajny klucz. Skopiuj te klucze. B\u0119d\u0105 wymaga\u0107 kolejnych krok\u00f3w.<\/p>\n

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

Zainstaluj i skonfiguruj bibliotek\u0119 Laravel reCAPTCHA<\/h3>\n

Udaj si\u0119 do projektu Laravel i zainstaluj bibliotek\u0119 biscolab,<\/a> kt\u00f3ra zosta\u0142a stworzona do integracji reCAPTCHA w Laravel. Otw\u00f3rz terminal w katalogu g\u0142\u00f3wnym projektu i uruchom polecenie:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Po zainstalowaniu biblioteki opublikuj plik konfiguracyjny za pomoc\u0105 poni\u017cszego polecenia.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
Otw\u00f3rz .env<\/code>plik w edytorze i dodaj swoj\u0105 witryn\u0119 oraz tajne klucze reCAPTCHA, jak pokazano poni\u017cej.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Pami\u0119taj, aby zast\u0105pi\u0107 symbole zast\u0119pcze \u201eADD_YOUR_SITE_KEY” i \u201eADD_YOUR_SECRET_KEY” rzeczywistymi warto\u015bciami. Nast\u0119pnie otw\u00f3rz config\/recaptcha.php<\/code>i ustaw wersj\u0119 na 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
Nast\u0119pnie wyczy\u015b\u0107 pami\u0119\u0107 podr\u0119czn\u0105 konfiguracji za pomoc\u0105 polecenia:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
Dodaj Google reCAPTCHA v3 do swojej witryny Laravel<\/h3>\n
Sko\u0144czyli\u015bmy z ca\u0142\u0105 konfiguracj\u0105 i wszystkimi ustawionymi na dodanie reCAPTCHA na stronie internetowej. W tym celu musisz najpierw doda\u0107 metatag HTML dla csrf-token w sekcji head.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Je\u015bli Twoja witryna ju\u017c doda\u0142a ten tag, po prostu zignoruj \u200b\u200bpowy\u017cszy krok. Nast\u0119pnie wstaw htmlScriptTagJsApi()<\/code>pomocnika przed zamkni\u0119ciem tagu g\u0142owy.<\/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
Teraz przejd\u017a do swojej witryny, za\u0142aduj j\u0105 ponownie i powiniene\u015b zobaczy\u0107 ikon\u0119 reCAPTCHA w prawym dolnym rogu strony. Oznacza to, \u017ce Twoja witryna jest teraz chroniona przez Google reCAPTCHA.<\/p>\n
Sko\u0144czy\u0142e\u015b z dodawaniem Google reCAPTCHA na swojej stronie Laravel. Dla dalszej ciekawo\u015bci, je\u015bli chcesz zobaczy\u0107 odpowied\u017a reCAPTCHA, musisz nieznacznie zmodyfikowa\u0107 kod w tagu head.<\/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
Od\u015bwie\u017c stron\u0119 i sprawd\u017a w konsoli przegl\u0105darki, zobaczysz odpowied\u017a Google reCAPTCHA. W moim przypadku jest to pokazane na zrzucie ekranu poni\u017cej.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n