CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) to technika zabezpieczenia stron internetowych przed spamem, odszyfrowaniem haseł. Dotyczy głównie formularzy HTML. Aby móc przesłać dane z formularza użytkownik musi przejść proces weryfikacji tzw. test na człowieczeństwo. Odbywa się to poprzez wyświetlanie krótkich zadań, pytań na które trzeba odpowiedzieć, zaznaczając lub wpisując prawidłową odpowiedź. Najczęściej stosowanym zabezpieczeniem jest odczytywanie treści z obrazka (np. losowych liczb, znaków alfanumerycznych).

Jednym z rozwiązań stosowanych na stronach internetowych jest gotowy widżet Google reCaptcha. Aby z niego skorzystać musimy najpierw zarejestrować nasz adres Url na stronie google.com/recaptcha:

captcha rejestracja witryn

Po dodaniu strony wyświetlą się nam dwa klucze (secret key i site key), które należy dodać do źródła wg instrukcji.

W sekcji <head>…</head> dołączamy biblioteki: jquery.js oraz captcha api.js.

Do wnętrza tagów <form>…</form> wklejamy:

Ale to jeszcze nie koniec 😉 Czytaj dalej a wszystko się wyjaśni.

W poniższym przykładzie użytkownik będzie miał za zadanie kliknąć przycisk „Wyślij formularz”. Za pomocą metody Ajax uruchomiony zostanie skrypt send.php, który zweryfikuje czy „ptaszek” z podpisem „Nie jestem robotem” został zaznaczony, czy też nie. Odpowiedź (response) zostanie przesłana z powrotem do strony index.phtml i wyświetlona w formie komunikatu. Dzięki Ajaxowi wszystko odbywa się bez odświeżania strony.

Skrypt send.php pobiera wartość $_REQUEST[’recaptcha’] i sprawdza, czy użytkownik zaznaczył checkboxa. Odpowiedź $response[„success”] z powrotem trafia do index.phtml (patrz -> success: function(response)).

Oczywiście formularz może być rozbudowany o więcej pól, w zależności od potrzeb witryny 😉 np. formularz kontaktowy: imię, nazwisko, e-mail, treść wiadomości itd. Wystarczy rozbudować tablicę form_data:

oraz formularz html:

Do następnego! ->

PRZYKŁAD na github ›