Obecnie captcha jest jednym z najlepszych sposobów na zatrzymanie spamu. W niniejszym artykule przestawię troszkę inną jej odmianę, niż zazwyczaj możemy odnaleźć na stronach internetowych.
Captcha to nic innego niż test. Jego zadaniem jest sprawdzenie, kto uzupełnia dany formularz: istota ludzka czy komputer. Jeśli okazuje się, że test przebiegnie pomyślnie, mamy do czynienia z człowiekiem, co pozwala na dalsze kroki.
Przykładem mechanizmu captcha, używanym na stronie w formularzu kontaktowym, jest prosty test typu ?podaj wynik? i działanie np. 7 + 4 z polem do wprowadzenia odpowiedzi z klawiatury. Gdy użytkownik wysyła formularz wpisuje w to pole wynik działania, i zatwierdzając go (łącznie z całym formularzem), uruchamia sprawdzanie. Jeśli wynik pasuje, wysłany jest wypełniony formularz.
Dlaczego warto korzystać z systemu Captcha?
Głównym powodem korzystania z captcha (w każdej formie) jest mozliwość upewnienia się, że użytkownik, wypełniający formularz na Twojej stronie to rzeczywiście człowiek, a nie komputer. Istnieje bowiem oprogramowanie, które będzie indeksować strony z formularzami kontaktowymi i wysyłać wiadomości spamowe do właścicieli tychże stron internetowych.
Jeśli Twoja witryna jest nowa, nie wierz w to, że uda ci się uniknąć spamu. Kiedy odnośniki do Twojej strony znajdują się w innych miejscach Internetu, wkrótce i Ciebie dopadnie spam (o ile już się to nie stało).
Najczęściej ludzie używają captcha przy formularzach kontaktowych czy komentarzach. Krótko mówiąc ? wszędzie tam, gdzie chcielibyśmy mieć pewność, że to właśnie człowiek, a nie bot, umieszcza treści. Captcha jest używany również do zatrzymywania automatycznego przesyłania formularzy na stronie.
Różne typy Captcha
Jak to zostało odnotowane na początku tego artykułu, captcha to jedynie prosty test, który ma za zadanie odkryć, czy użytkownik wysyłający formularz jest człowiekiem.
Ponieważ z założenia ma być to prosty test, mamy niejako ograniczone pole do popisu. Zadanie powinno być proste, jednak na tyle, by cel capcha został osiągniety.
Oto przykładowe rodzaje, najczęsciej używanych w tym celu testów:
- Łatwe działania matematyczne,
- Pole typu checkbox ?nie jestem spamerem?,
- Przepisywanie słów z obrazka.
Te trzy, najbardziej popularne techniki prawdopodobnie większość z nas zna, bo sprawdziła je na wlasnej skórze.
Proste działanie z matematyki jest techniką używaną na różnych stronach, jednak obecnie się od niej odchodzi ? nie, nie ze względu trudności rozwiązania zawiłych całek czyrównan różniczkowych. Zadania to najczęściej dodawanie lub odejmowanie w zakresie 20, ot takie małe zadanie dla szarych komórek. Po jego wykonaniu, w zależności od poprawności odpowiedzi, możemy przesłać formularz bądź ponownie powrócimy na stronę jego wypełniania, jeśli mechanizm wykryje błąd.
Checkbox do weryfikacji jest nieco rzadziej spotykanym rozwiązaniem, co jednak nie umniejsza zalet jego stosowania. Dla użytkownika to jedno klikniecie w polu, które informuje, że nie jesteś spamerem. Mechanizm jest prosty: captcha sprawdza, czy zaznaczone jest pole wyboru ? jeśli tak, pozwala na wysłanie formularza.
Jednak najpopularniejszym i zdecydowanie najczęsciej spotykaną metodą jest reCAPTCHA. Wiele serwisów hostingujących korzysta z tej właśnie metody. W polu obrazka wyświetlają się dwa słowa, które to należy wpisać w przeznaczonym na to polu. Wydawałoby się proste, prawda? Słowa uzywane w reCAPTCHA to zeskanowane obrazy z książek, często bywają zniekształcone, co może niektórym skutecznie uprzykrzyć życie. Szczególnie, że nie każdy zna angielski na tyle dobrze, by ostatecznie domyślić się zamazanych liter. W przypadku, gdy już od razu użytkownik stwierdza problem z rozczytaniem obrazka, może go odświeżyć, co w efekcie wygeneruje nowe dwa wyrazy (nie zawsze jednak lepsze). Tak czy inaczej, po udanej próbie możemy przejść dalej, nieudana zaś zmusza nas do dalszego główkowania.
Motion Captcha
Motion Captcha jest pluginem jQuery, stworzonym przez Jossa Crowcrofta. Jego wyjątkowość polega na tym, że aby pomyślnie zdać test należy? pochwalić się zdolnościami artystycznymi. Na tle naszkicowany jest prosty kształt, który wystarczy odwzorować i voila! Połączenie przyjemnego z pożytecznym, gdyż wykonać test może jedynie człowiek posługujący się narzędziem wskazującym, i nie trzeba wysilać szarych komórek zastanawiając się nad tym, czy ?ten znak to O czy 0?. Nie mówiąc już o efekcie wizualnym 😉
Plugin ten jest oparty na HTML5, aby łatwo móc narysować w polu dowolny kształt i upewnić się, że pasuje on do obrazu wygenerowanego uprzednio w tle.
Polecam sprawdzić efekt osobiście na zamieszczonym przez autora demie.
Jak korzystać z MotionCAPTCHA
Najpierw musisz pobrać plik MotionCAPTCHA Javascript.
Następnie trzeba dodać Javascript oraz plik CSS do strony zgodnie z najnowszą wersją jQuery.
Tworzenie formy
Z Captcha zamontowanym na stronie możemy stworzyć i zwalidować każdą formę, którą chcemy przesłać na serwer.
Ostateczna postać Javascript
Mając juz formę, możemy przy użyciu Javascript dodać plugin MotionCaptcha do strony, przy użyciu następującego kodu:
$('#form-id').motionCaptcha({ action: '#fairly-unique-id' });
Są jeszcze inne opcje, które można przekazać do wtyczki, aby zmienić sposób jej zachowania:
$('#form-id').motionCaptcha({
// Podstawy:
action: '#mc-action',
divId: '#mc',
cssClass: '.mc-active',
canvasId: '#mc-canvas',
// Tablica z nazwami kształtów używanych w MotionCAPTCHA:
shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],
// Te wiadomości są wyświetlane po ukończeniu rysowania przez użytkownika:
errorMsg: 'Prosze spróbować ponownie.',
successMsg: 'Captcha udana!',
// Ta wiadomość wyświetla się, kiedy przeglądarka użytkownika nie wspiera znacznika :
noCanvasMsg: "Twoja przeglądarka nie wspiera znacznika - wypróbuj Chrome, FF4, Safari lub IE9."
// To pozwala na wprowadzenie dowolnego łańcucha znaków HTML:
label: '
Narysuj kształt wskazany w polu poniżej:
'
});
