{"id":28197,"date":"2021-05-22T11:45:00","date_gmt":"2021-05-22T08:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28197"},"modified":"2021-10-18T03:43:01","modified_gmt":"2021-10-18T00:43:01","slug":"zweryfikuj-google-recaptcha-za-pomoca-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/zweryfikuj-google-recaptcha-za-pomoca-javascript\/","title":{"rendered":"Zweryfikuj Google reCAPTCHA za pomoc\u0105 JavaScript"},"content":{"rendered":"

Google reCAPTCHA to popularny wyb\u00f3r do ochrony formularzy witryn internetowych przed spamem i botami. reCAPTCHA prosi u\u017cytkownik\u00f3w o rozwi\u0105zywanie prostych \u0142amig\u0142\u00f3wek, kt\u00f3re s\u0105 \u0142atwe dla ludzi, ale trudne dla bot\u00f3w. Dzi\u0119ki temu mo\u017cna zaoszcz\u0119dzi\u0107 miejsce na serwerze przed wstawianiem do bazy danych niepotrzebnych wpis\u00f3w spamowych. Oszcz\u0119dza to r\u00f3wnie\u017c czas, poniewa\u017c nigdy nie dostajemy komentarzy spamowych do naszej skrzynki pocztowej.<\/p>\n

Gdy dodajemy Google reCAPTCHA w formularzach witryn, musimy napisa\u0107 fragment kodu, aby zweryfikowa\u0107 odpowied\u017a reCAPTCHA. Je\u015bli odpowied\u017a jest prawid\u0142owa, to tylko nasz formularz powinien by\u0107 kontynuowany.<\/p>\n

Istniej\u0105 dwa sposoby weryfikacji odpowiedzi, jeden po stronie serwera, a drugi po stronie klienta. W tym artykule skupiamy si\u0119 na walidacji po stronie klienta, dlatego uczymy si\u0119 walidacji Google reCAPTCHA za pomoc\u0105 JavaScript.<\/p>\n

Je\u015bli szukasz walidacji po stronie serwera, zapoznaj si\u0119 z artyku\u0142em Korzystanie z Google reCAPTCHA w formularzach witryny z PHP<\/a>.<\/p>\n

Zarejestruj witryn\u0119 i uzyskaj klucze API<\/h3>\n

Aby rozpocz\u0105\u0107, musisz zarejestrowa\u0107 swoj\u0105 witryn\u0119 tutaj \u2013 <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

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

Wybierz opcj\u0119 \u201ereCAPTCHA v2", kt\u00f3ra daje pole wyboru \u201eNie jestem robotem”.<\/p>\n

Po wprowadzeniu danych w powy\u017cszym formularzu otrzymasz klucz witryny i klucz tajny. Poniewa\u017c mamy do czynienia z walidacj\u0105 po stronie klienta, potrzebujemy tylko klucza witryny.<\/p>\n

Je\u015bli chcesz przetestowa\u0107 go na lokalnym serwerze, dodaj \u201elocalhost” jako domen\u0119.<\/p>\n

Zweryfikuj Google reCAPTCHA za pomoc\u0105 JavaScript<\/h3>\n

Najpierw musisz doda\u0107 Google reCAPTCHA do swojego formularza. Mo\u017cesz to zrobi\u0107 za pomoc\u0105 poni\u017cszego kodu.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
W powy\u017cszym kodzie u\u017cywam onsubmit<\/code>zdarzenia. Dzieje si\u0119 tak, poniewa\u017c gdy u\u017cytkownik przesy\u0142a formularz, musimy sprawdzi\u0107 odpowied\u017a reCAPTCHA, a nast\u0119pnie zezwoli\u0107 mu na przes\u0142anie formularza.<\/p>\n
Nast\u0119pnie doda\u0142em 'verifyCaptcha’ jako nazw\u0119 funkcji zwrotnej do atrybutu 'data-callback’. U\u017cyj\u0119 tej metody wywo\u0142ania zwrotnego, aby usun\u0105\u0107 komunikat o b\u0142\u0119dzie po przej\u015bciu walidacji. Doda\u0142em r\u00f3wnie\u017c div z identyfikatorem \u201eg-recaptcha-error”, aby wy\u015bwietli\u0107 komunikat o b\u0142\u0119dzie.<\/p>\n
Nale\u017cy zast\u0105pi\u0107 symbol zast\u0119pczy \u201eYOUR_SITE_KEY” rzeczywistym kluczem witryny.<\/p>\n
Na koniec napiszmy kod JavaScript, kt\u00f3ry obs\u0142uguje odpowied\u017a reCAPTCHA. Na podstawie odpowiedzi wy\u015bwietla komunikat o b\u0142\u0119dzie lub umo\u017cliwia kontynuacj\u0119 formularza.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
W metodzie submitUserForm<\/code>otrzymujemy odpowied\u017a reCAPTCHA za pomoc\u0105 grecaptcha.getResponse()<\/code>. Jest to wbudowana funkcja udost\u0119pniana przez us\u0142ug\u0119 Google reCAPTCHA.<\/p>\n
Je\u015bli odpowied\u017a jest nieprawid\u0142owa, zwraca 0. Oznacza to, \u017ce u\u017cytkownik nie zweryfikowa\u0142 jeszcze reCAPTCHA. I tak, zg\u0142asza b\u0142\u0105d i do\u0142\u0105cza do div, kt\u00f3ry ma identyfikator 'g-recaptcha-error’.<\/p>\n
Gdy Google reCAPTCHA wysy\u0142a prawid\u0142ow\u0105 odpowied\u017a, zwracam prawdziw\u0105 warto\u015b\u0107, co umo\u017cliwia dalsze przej\u015bcie formularza.<\/p>\n
verifyCaptcha<\/code>Metoda dzwoni kiedy mo\u017cna rozwi\u0105za\u0107 wszystkie zagadki reCAPTCHA. Nast\u0119pnie usuwamy komunikat o b\u0142\u0119dzie po rozwi\u0105zaniu zagadki.<\/p>\n
Nasz ostateczny kod to:<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak zweryfikowa\u0107 Google reCAPTCHA za pomoc\u0105 JavaScript. Wypr\u00f3buj to w swoim projekcie i podziel si\u0119 swoimi przemy\u015bleniami lub sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n