Implementation of Captcha, re-captcha and no-captcha in real life (Part 1)

Implementation of Captcha, re-captcha and no-captcha in real life (Part 1)

After an introduction about Captcha, reCAPTCHA and No CAPTCHA in my previous article, today we will discuss about how to implement captcha, re-captcha and no-captcha in real life.

JQuery and Ms Catcha logo

JQuery and Ms Catcha

 

Even though the concept of captcha, re-captcha and no-captcha can be implemented in all of web programming languages, I will be giving examples in .Net with C# and jQuery Plugin.

Expert says the best way to learn coding is –

“Get your hand dirty with the code”

still, the source code of given examples can be downloaded from here.

 

JQuery Plugin

Let’s begin with a simple jQuery plugin which can help us to protect our web form(s) from bots (it is recommended to use client + server side code for validation instead of just client side coding)

Even though there are many jQuery Plug-ins available to implement captcha in client side (you can Google it), I personally like the MotionCAPTCHA jQuery Plug-in.

MotionCAPTCHA is a jQuery CAPTCHA Plug-in that requires users to sketch the shape they see in the canvas in order to submit a form. The submit button is disabled till the user draws the image shown in canvas.

How To Use

Step 1. Add the plugin scripts: (I’m using jQuery 1.6 from the google CDN, but you could load it locally):

Step 2. Code the form as usual, with a unique ID (eg. ‘#formWithCaptcha’) and set the form action to blank (or ‘#’) – eg:

Step 3. Add this placeholder ‘<div>’ element to your form containing the blank canvas:

Step 4. Disable the submit button, eg:

<input type=”submit” disabled=”disabled” value=”Submit Form” />

Step 5. Add a hidden input to the form, with the form action as its value. Give it either a unique id, or the id ‘mc-action’, like so:

<input type=”hidden” id=”fairly-unique-id” value=”http://pranayjoshi.thoughts2share.in/” />

Step 6. Call the plugin on the form element. If you used any other ID than ‘mc-action’ for the hidden input, you’ll just need to pass it to the plugin, like this:

Other options are available (defaults are shown):

Download the POC project from Here.

Now is the time see the outcome of your hard work in browser. The POC which is available in above link outputs like this.

motion Captcha outut

motion Captcha

Note that the submit button is disabled and there is a shape which need to be drawn (including all mandatory field(s)); to enable submit button. If pattern is not drawn there will be an error message show as per configuration provided by you earlier.

Motion Captcha validation failed

Motion Captcha validation failed

On successful captcha pattern drawn test; the button will automatically be enabled and you are ready to submit the form.

Motion Captcha validation passed

Motion Captcha validation passed

 

.NET with CATCHA.dll

The previous method was for the client side validation; let’s move to server side and see how to implement captcha with C#.net using an awesome library called MSCaptcha.dll; but here one question arises why we need server side code when we can do this client side; a very good and valid question.

In the previous example (the jQuery plugin’s POC project), if an advanced user activates developer tool in web browser (by using <F12>) and removes the disable property of the submit button he will be able to enable the button and also can submit the form, by-passing captcha. But, if we implement server side validations also it will be double protection.

Steps to Add Captcha image in Asp.NET Application

Prerequisites : you should have visual studio to run the project and download MSCaptcha.dll you can find the dll in the bin folder of this POC project (download POC project) or you could download the same from here

Step1 : Open visual studio and click on new web site (File>New>Web Site), alternatively simply press ALT+SHIFT+N keys.

starting witha  new web site

starting with a new web site

Step2 : select ASP.net web forms site from the template; (here we are using C# as default language make sure you have selected C# in this section in order to work with C#)

Step3: Provide location and title of the project and hit OK

selecting web site type

Step4: Right click on the project and add a new web form. (hit CTRL+SHIFT+A and select web form from the Add new Item window)

adding new item

Step5 : Provide name and check the “Place code in separate file” checkbox in case it is not checked by default. (it’s always good to place code in separate file to maintain code better)

adding a new web form

Step6: again right click on the project and click references to add Mscaptcha.dll file in the project

adding new reference

Step7 : Browse the Mscaptcha.dll file which we have downloaded in Prerequisites and click OK.

browsing and adding dll

Step8: open the aspx page which we have added in step 5.

Open tool box and add:

A Textbox : to enter captcha response
A Button : to submit and validate captcha
A RequiredFieldValidator : to make captcha mandatory
A Label : to show error and success message

Step9: Register the captcha assembly in aspx page using below code line.

Post registering add captcha control to the page (in the specific position according to your need).

Step10: set up captcha by assigning values to various property e.g. backColor/captchaLenght, a typical example code looks like this

To checkout more property and their uses you can use object browser.

you can use object browser to see more options available

you can use object browser to see more options available

Step11: open the cs file and on onclick event of the button add code to validate captcha;

This will set a bool type property named UserValidated to true or false based on response, it’s time to write code to show user success or error message.

Step12: add httphandler in the web.config file so that it will handle the request for captcha image.

Step13: Save the code (keep the finger cross 😆 ) and run the code.

Did you get captcha image like this???

captcha output

output for lucky guys…

Or did you get this one..??

captcha output 2

don’t worry if you got this

In case you got the second output i.e. no image don’t get disappointed, your code is absolutely fine; it is the configuration which is not allowing image to render.
To solve this open the property window for the project (hit CTRL+W+P) and change the “Managed Pipeline mode” to Classic.

Changing pipeline mode

Changing pipeline mode

Run the code and enjoy the captcha image from your own code.

Now try to validate captcha response by entering some correct and wrong responses,

captcha success and unsuccess

 

The good thing about the Mscaptcha.dll is it’s independent of language, it works fine with special character and any Unicode character, In the below image one can see the output with some Unicode characters (Hindi language)

MS Captcha with Unicode character(s)

MS Captcha with Unicode character(s)

P.S. I have used Visual Studio 2013 to develop this POC project, but there is no dependency on any version of Visual Studio. You may face problems while opening the project in older version, but if you create your own project and follow the steps carefully there should not be any issues. If you face any problems please post details about it in comment , I’ll get back for sure.

Thank you for your precious time. The next post will be continuation to this post i.e. Implementation of Captcha, re-captcha and no-captcha in real life (Part 2). Meanwhile you can visit our home page @ thoughts2Share.in to get more detail about us.

Your comments and suggestion are always welcome.

I am thankful for all of those who said NO to me. It’s because of them I’m doing it myself. ~Albert Einstein

It's only fair to share...Email this to someoneShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestDigg thisShare on TumblrShare on Reddit

1 comment

  • here are the findings

    I just want to mention I am just very new to blogging and truly enjoyed you’re web page. More than likely I’m planning to bookmark your site . You amazingly come with incredible writings. Cheers for sharing with us your blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

Bad Behavior has blocked 109 access attempts in the last 7 days.