Sunday, 20 January 2013

Implementing your own Image captchas (javascript)

Prevent Automated Input !! Use captchas !!

Hey there guys !! Time for a brief detour from the usual server side coding stuff , let's focus on something more cool today . After going through this post you can pretty much create your own captchas . So why
should we use captchas ?? Let's first see what is the full-form of captcha : "Completely Automated Public Turing test to tell Computers and Humans Apart" .. So i guess now you've got a rough idea what a captcha is used for ? Those of you who are still confused , well , just know that captcha is used to prevent automated software actions . Also there are audio captchas for the visually impaired and so on .

Captcha Text !!

So what algorithm did i follow or how did i make the captcha ?
Simple !! I had a pool of images , i just took the input from the user , and then i checked whether the input is a sub-string of the file name of the image , since i had named the files as captcha_<image_text>.jpg . One of the image was chosen at random when the user loaded the page . Is it foll proof ? NO !! Even the recaptcha provided by google isn't , cause the computer knows only one of the two words it shows , it assumes that if u know one word correctly , then you know the other one two , still it works most of the time without any problems !!

I included my version of the captcha below as a drop-box download link .
-->How to use it ?
Just open index.html , Enter the text you see and click ok , if you enter it correctly it'll show success , else it'll show a failure alert .

You can use the code in any way you like , though i personally recommend using the google recaptcha for commercial or large-scale purposes  .

Download The html/Javascript for Captcha