ReCaptcha to ochrona antyspamowa, która weryfikuje czy użytkownik jest człowiekiem czy botem. Nawet jeśli nazwa tego zabezpieczenia jest Ci obca – myślę, że niejednokrotnie przy próbie wysłania formularza kontaktowego, komentarza lub logowania do stron internetowych byłeś zmuszony do przepisywania dziwnych (bardzo często zniekształconych i nieczytelnych) znaków, aby dokończyć daną operację. Ja również czasami miałem problem z wpisaniem poprawnych słów w polu reCaptcha. Na szczęście w tym miesiącu została wprowadzona nowa wersja reCaptchy – no Captcha.

Google postanowiło ułatwić użytkownikom usług internetowych przechodzenie przez ochronę antyspamową. Nowa wersja reCAPTCHA ma być rozwiązaniem znacznie lepszym, które w większości wypadków będzie wymagało niewielkiego wysiłku użytkownika. Najpierw google różnymi metodami sprawdza użytkownika (niestety jeszcze nie znalazłem dokładnego opisu tych różnych metod), jeżeli nie znajdzie w jego zachowaniu niczego podejrzanego, wypełnienie pola zabezpieczającego ogranicza się do zaznaczenia checkboxa z etykietą informującą, że nie jesteśmy robotem.

Jeśli natomiast wzbudzimy podejrzenia mechanizmu antyspamowego, konieczna będzie dodatkowa weryfikacja. Niestety będzie ona realizowana jak dotychczas za pomocą przepisywania nieczytelnych znaków lub dopasowywania obrazków (na zasadzie podobieństwa). Ta druga opcja jest przeznaczona przede wszystkim dla użytkowników urządzeń mobilnych, na których dużo prościej jest wybrać obrazek, niż odczytywać i wprowadzać znaki. (możliwa jest też weryfikacja audio na podstawie odtwarzanych dźwięków).

Implementacja no Captcha w formularzu kontaktowym

Nową wersję reCaptchy możecie na żywo zobaczyć w moim formularzu kontaktowym. Postaram się pokrótce przedstawić sposób implementacji tego mechanizmu.

Mój formularz posiada dodatkową weryfikację, taką jak wprowadzenie poprawnego adresu e-mail i tak dalej, jednak w artykule skupię się jedynie na elementach no Captcha.

Przed rozpoczęciem dodawania nowego mechanizmu, należy posiadać prywatny oraz publiczny klucz reCaptcha powiązany z domeną, gdzie chcemy użyć zabezpieczenia. Klucze możemy za darmo uzyskać na tej stronie:
https://www.google.com/recaptcha.

Najważniejszym punktem jest wyświetlenie widgetu noCaptcha.

WIdget no Captcha

Najprostszym sposobem jest dodanie adresu skryptu Java Script oraz znacznika div z klasą g-recaptcha oraz atrybutem data-sitekey z wartością w postaci Twojego klucza publicznego. Skrypt powinien być dodany w sekcji head naszej witryny:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Dla motywów WordPressa kod może być dodany w postaci:

if(is_page('8')) {
	wp_enqueue_script('re-captcha', 'https://www.google.com/recaptcha/api.js', array('other-scripts'), false, false);
}

Dodatkowo dodałem warunek (is_page(..)), który wczytuje wspomniany skrypt tylko na stronie z formularzem kontaktowym. Kod powinien być dodany zazwyczaj w pliku functions.php, lub header.php (tam gdzie ładowane są pozostałe skrypty oraz style css naszego motywu.

Natomiast div z klasą gk-recaptcha powinien być umieszczony wewnątrz formularza <form> w miejscu, gdzie chcemy wyświetlić widget.

<div class="g-recaptcha" data-sitekey="Twój publiczny klucz reCaptcha"></div>

W tym momencie, nasz widget powinien zostać wyświetlony porpawnie, zostało nam tylko skonfigurowanie sprawdzenia, czy weryfikacja reCaptcha została wykonana pomyślnie. Ogólnie mamy 3 metody, żeby to sprawdzić, ja wykorzystam metodę, która umożliwia weryfikację z parametrem POST podczas wysyłania formularza. Wykorzystałem dodatkowo zmienną $validated, która jest ustawiana na wartość "false", jeśli którekolwiek z pól formularza nie przeszło procesu walidacji.

if ($_POST["g-recaptcha-response"]) {
$resp = $reCaptcha->verifyResponse(
		        $_SERVER["REMOTE_ADDR"],
		        $_POST["g-recaptcha-response"]
		    );
} else {
			$validated = false;
		    $errors['recaptcha'] = __("Kod reCAPTCHA nie został wprowadzony poprawnie. Spróbuj ponownie.", 'theme_domain');			
}

Podświetlony fragment kodu weryfikuje pole g-recaptcha-response, jeśli weryfikacja jest poprawna, wartość zmiennej $validated to nadal „true”(wartość początkowa) i formularz jest wysyłany, jeśli weryfikacja nie jest poprawna (pozostała część kodu – linie 7,8), zmienna zostaje zmieniona i wyświetlona zostaje treść błędu, zachęcająca do ponownej weryfikacji pola Captcha.

Zmiana wyglądu widgetu reCaptcha

Dodatkowo możemy dodać atrybut data-theme o wartości dark, żeby zmienić wygląd widget reCaptcha oraz atrybut data-type o wartościach audio lub image w celu wybrania priorytetowej metody weryfikacji:

<div class="g-recaptcha" data-sitekey="Twój publiczny klucz reCaptcha" data-theme="dark" data-type="audio"></div>

Widget no captcha ze stylem „dark”