HTML deo registracijskog naloga

HTML deo registracijskog naloga obično sadrži CAPTCHA, username, password, ponovni password, mejl, submit dugme i, reset dugme.

CAPTCHA deo se koristi da odredi da li je korisnik čovek ili program. Traži se od korisnika da ispiše u formu nekoliko brojeve i slova koja su prikazana u iskrivljenoj slici. Pošto bi računar trebalo da bude nesposoban da reši taj test, svaki korisnik koji unese tačan odgovor se smatra čovekom. Razlog korišćenja ovoga je sprečavanje spama. Oglašivači često prave botove - programe koji krstare internetom i prave po forumima i portalima registracijske naloge kako bi u duskusijama generisali na hiljade reklamnih poruka u vrlo kratkom vremenu. Drugi razlog je što se sprečava automatsko pravljenje velikog broja registracijskih naloga u jako kratkom vremenu sa ciljem da se iscrpu svi resursi u bazi podataka i time blokira sajt.

Captcha se sastoji iz tri dela. Prvi deo je implementiran u HTML delu registracijskog naloga, a drugi dva dela su u zasebnom fajlu pod nazivom na primer kapca.php. Fajl kapca.php sadrži encode_decode() funkciju i PHP kod za generisanje CAPCHA slike.

Captcha deo koji je implementiran u HTML delu registracijskog naloga može izgledati ovako:

Kontrolni tekst: <? $slova= array('w','r','y','u','p','s','d','f','h','k','l','z', 'x','c','v','b','m','2','3','4','8','9'); srand ((float) microtime()*1000000); shuffle ($slova); $ttekst = "$slova[1]"."$slova[2]"."$slova[3]"."$slova[4]"."$slova[5]"."$slova[6]"; $ttekst = encode_decode($ttekst,'k'); ?> <br> <img src="kapca.php?code=<?=$ttekst;?>"> <a href="registracija.php">Izmeni sliku</a><br> Unesi tekst sa slike: <input type="text" name="kapca" size="10" maxlength="6"> <input type="hidden" name="ttekst" value="<?echo $ttekst;?>">

Napomena je da na početku skripte mora da stoji include iskaz koji će umetnuti fajl kapca.php.

Objasnimo sad gornji kod. U nizu $slova smeštamo sva potencijana slova koja želimo da se iscrtavaju na slici. Zatim, ugradjenom funkcijom shuffle($slova) u kombinaciji sa funkcijom srand((float) microtime()*1000000), svaki put kad se zatraži izvršenje captcha menjamo redosled elemenata niza $slova slučajnim odabirom, čime dobijamo uvek razne kombinacije slova i brojeva. Zatim kreiramo promenjljivu $ttekst na primer dužine od 6 znaka čija vrednost se u stvari i lepe na sliku. Tu promenjljivu šaljemo odatle na dva mesta. Prvo mesto je u PHP kod za generisanje CAPCHA slike na sledeći način:

<img src="kapca.php?code=<?=$ttekst;?>">

A drugo mesto je u PHP delu registracijskog naloga kako bi smo tamo uporedli tekst sa slike koji je ukucao posetilac sa stvarnim tekstom na slici, i to kroz sledećeg HTML dela registracijskog naloga:

<input type="hidden" name="ttekst" value="<?echo $ttekst;?>">

A korisnik ukucava tekst sa slike u sledećem elementu forme:

Unesi tekst sa slike: <input type="text" name="kapca" size="10" maxlength="6">

Ovaj kod ne treba posebno objašnjavati ali treba reći da smo veličinu polja odredili da bude 10 unosa znakova a broj unosa znakova 6. Ovde treba još reći da po nekad tekst sa slike može biti nečitljiva pa zato treba dati mogućnost da korisnik menja tekst na slici. To vršimo sledećim kodom:

<a href="registracija.php">Izmeni tekst sa slike</a><br>

Da ne bi komplikovao kod ja sam u stavio ovde da se klikne na link za registraciju jer tako će uvek da se prikaže slika sa novim tekstom. Ali treba napomenuti da tad CAPTCA mora biti na samom početku forme, jer glupo je dozvoliti korisniku popunjavanje svih polja a na kraju kad dodje do CAPTCHA i kad promeni sliku ujedno i izbriše sve što je popunio. Naravno kao što rekoh može se napraviti da unete podatke stavimo u "value" vrednosti elemenata forme pa da captcha bude na kraju forme za registraciju ali ovo je edukativni tekst pa da ga ne komplikujemo previše jer i ovako solidno može da se odradi poso čak i kod profesionalnih formi za registraciju.

E sad kako bi CAPTCHA zaštita bila zaštita u pravom smislu te reči obavezno treba da se "izvorni" tekst koga lepimo na slici ne vidi u formi!!!!!!!! A kao što uočavamo mogo bi se videti na dva mesta u formi, i to kad ga šaljemo slici da ga zalepi i preko hidden polja kad ga prosledjujemo PHP skripti na obradu, jer neko može jednostavno pogledati HTML izgled našeg registracijskog naloga. U PHP-u je naravno korisniku nevidljiv ovaj tekst (izmedju znakova za početak i kraj PHP koda).

Osnovno je pitanje znači kako sakriti taj tekst? Rešenje je zapravo šifrovati taj tekst u našoj CAPTCHA funkciji encode_decode($ttekst,'k'). A u PHP delu registracijskog naloga koji obradjuje unos iz forme mi trebamo dekodovati taj tekst i uporediti ga sa onim koga je uneo korisnik. Ako je isti onda dozvoljavamo registraciju a ako je korisnik pogrešio tekst onda ga vraćamo na ponovno pisanje. Takodje i u PHP kodu za generisanje CAPCHA slike trebamo dekodovati tekst kako bi ga zalepili na sliku.

Funkcija za šifrovanje encode_decode($ttekst,'k') odnosno dešifrovanje encode_decode($ttekst,'d') treba u globalu da obezbedi sledeće:

A24HGU - Tekst pre šifrovanja
1ć*'00#G%4K/(? - Tekst nakon šifrovanja koji se ispisuje u formi na ona naša dva mesta gde je vidljiv tekst
A24HGU - Tekst nakon dekodovanja. Kao što vidimo osnovno i glavno je da bude isti sa tekstom pre šifrovanja !

Funkciju za kodovanje i dekodovanje možemo praviti na mnogo načina. Na primer jedan od načina je da se brojevi i slova prebace funkcijom ord() u ASCII brojeve, pa tako dobijeni brojevi da se nekim složenijim matematičkim obrascem šifriraju. Obično se taj matematički obrazac sastoji od operatora +, - i * a deljenje nije preporučljivo jer unosi decimalne ostatke pa može izazvati grešku prilikom dekodovanja, ali i može ako budemo pažljivije osmišljavali jednačinu. Kasnije kad se dešifruje sve to isto uradimo samo obrnutim redosledom kako bi smo dobili dešifrovani tekst koji je identičan tekstu pre šifrovanja. Naravno glupo je da vam ispisujem neku funkciju za kodovanje i dekodovanje jer poenta je u tome da funkcija koju koristite bude jedinstvena. Funkcija za prebacivanje ASCII broja u ASCII znak je chr(). Pored ofih funkcija u kode dekode funkcijama koje kreiramo vrlo često se koristi i funkcija strlen() za odredjivanje dužine znakovnog niza.

Vratimo se sad kodu za prikaz CAPTCHA slike u HTML formi:

<img src="kapca.php?code=<?=$ttekst;?>">

Kao što vidimo ovo nije poziv "klasične" slika na primer kao što je <img src="kapca.jpg">. Zapravo naš editor slike je u stvari slika, to jest "programibilna slika". Adresa te nazovimo "programibilne" slike je kapca.php?$ttekst. Znači kroz komandnu liniju šaljemo šifrovan tekst slici kako bi ga zalepila.

Konačno pogledajmo sad kod fajla kapca.php:

<? include ('funkcije.php'); $slova = encode_decode($_GET['code'],'d'); $ime = array('1.png','2.png','3.png'); srand ((float) microtime()*1000000); shuffle ($ime); $a = $ime[1]; $im = imagecreatefrompng($a); $black = imagecolorallocate($im, rand(0,100), rand(0,100), rand(0,100)); imagettftext ($im, 25, rand(5,6), rand(2,50), 38, $black, 'star.TTF', $slova); header ("Content-type: image/png"); imagepng ($im); imagedestroy ($im); // ovde u nastavku je još i sadržana naša encode - decode funkcija encode_decode() ?>

Prisetimo se onog dela kad smo objašnjavali upload slika i lepljenje teksta zaljubi.com na slici. Kao što vidimo gotovo je identičan tako da je tamo dato potpuno objašnjenje ovog koda pa se neću ponavljati. Ovde ću samo objasniti funkciju na primer rand(0, 100). Ovom funkcijom, ovako napisanom slučajno generišemo jedan broj iz opsega od 0 do 100. Vidimo da sam često koristio ovu funkciju a razlog tome je da bi se slova lepila na slici u različitim veličinama slučajno izabranih, da bi se ugao pod kojim se ispisuju slova slučajno menja, da bi se boja slova slučajno menjala itd. Drugim rečima što više unesemo slučajnih parametara to je teže napraviti program za skeniranje slike. Sada nakon objašnjenja CAPTCHE nastavimo sa sledećim delom forme za kreiranje naloga kod registracije korisnika.

Ostali minimalni HTML elementi registracijskog naloga kao što smo rekli su:

username,
password,
ponovni password,
mejl,
submit dugme i,
reset dugme.

Već smo se upoznali sa karakteristikama ovih elemenata formi a ovde ću dati objašnjenje eventualno onih delova koji nisu bas poznati. Evo prvo koda:

Username: <br> <input type="text" name="username" size="25" maxlength="20"><br> (max 20 i min 3 znaka. Unesite samo mala i velika slova, brojeve, donju crtu "_", bez razmaka) <br><br> Password:<br> <input type="password" size="10" maxlength="8" name="password1"><br> (max 8 i min 5 mala i velika slova i brojevi bez razmaka) <br><br> Ponovi isti password:<br> <input type="password" size="10" maxlength="8" name="password2"> <br><br> Upisite vas mejl:<br> <input type="text" name="mejl" size="60" maxlength="60"><br> <br><br> <input name="registracija" type="submit" value="Registruj"> <input type="reset">

Ovde se susrećemo sa jednim novim elementom forme a to je polje za registraciju. Zapravo to je gotovo identičan element kao i i text polje stom razlikom što kad ukucavamo širu pojavljuju se tačkice a ne slova. Slova su u našim mislima :) radi bezbednosti da neko iz naše okoline krišom ne vidi šifru koju upisujmo.