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:
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.
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script> |
Do wnętrza tagów <form>…</form> wklejamy:
1 |
<div class="g-recaptcha" data-sitekey="TWÓJ SITE KEY"></div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>reCAPTCHA</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script> <style type="text/css"> .error { color:#ff0000; } </style> </head> <body> <script> $(document).ready(function() { $("#submit").on('click', function() { var form_data = { recaptcha: $('.g-recaptcha-response').val() }; $.ajax({ type: "POST", url: 'send.php', data: form_data, success: function(response) { if (response == 'error_captcha') { $('.msg').html('<p class="error">Zaznacz, że nie jesteś robotem.</p>'); } else { $('.msg').html('<p>Ok, nie jesteś robotem :) Wiadomość została wysłana.</p>'); } } }); return false; }); }); </script> <form action="" method="post"> <div class="g-recaptcha" data-sitekey="TWÓJ SITE KEY"></div> <p><a id="submit" href="#">Wyślij formularz</a></p> </form> <div class="msg"></div> </body> </html> |
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)).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php /* send.php */ define("SECRET_KEY","TWÓJ SECRET KEY"); // ustawiamy secret key $recaptcha = filter_var($_REQUEST['recaptcha'],FILTER_SANITIZE_STRING); // filtrujemy dane z recaptcha // odwołanie do zewnętrznych zasobów Google $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response=".$recaptcha); $response = json_decode($response, true); if ($response["success"] != true) { echo 'error_captcha'; // użytkownik nie zaznaczył "Nie jestem robotem" } else { // wysłanie formularza, inne zdarzenie... echo 'ok'; } ?> |
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:
1 2 3 4 5 6 |
var form_data = { recaptcha: $('.g-recaptcha-response').val(), firstname: $('#firstname').val(), email: $('#email').val(), // itd... }; |
oraz formularz html:
1 2 3 4 5 6 |
<form action="" method="post"> <input type="text" id="firstname" name="firstname" /> <input type="email" id="email" name="email" /> <div class="g-recaptcha" data-sitekey="TWÓJ SITE KEY"></div> <p><a id="submit" href="#">Wyślij formularz</a></p> </form> |
Do następnego! ->