Thursday, April 15, 2010

Implementing reCaptcha in Classic ASP

A friend of mine was very impressed with reCaptcha and wanted me to help him implement on his website that uses classic ASP! Going through the posts mentioned in the reference below gave me a bit of an idea but the solution was not very clear. Here's how I finally implemented it...

There are 3 parts of the code as follows:
  1. JavaScript to create reCaptcha on the page that has the input form
  2. Insert the created reCaptcha in the desired location
  3. Server side component to validate the reCaptcha

1. JavaScript to create reCaptcha on the page that has the input form
Here is the code that needs to be placed in the ASP file to generate the JavaScript which when called, generates the code for reCaptcha. The generated string needs to be placed in your form where you want the reCaptcha to be displayed.

<%
recaptcha_public_key = "XXXXXXXXXXXXXXXX"
function recaptcha_challenge_writer(publickey) 
  recaptcha_challenge_writer = "<script type=""text/javascript"">" & _ 
 "var RecaptchaOptions = {" & _ 
 " theme : 'red'," & _ 
 " tabindex : 0" & _ 
 "};" & _ 
 "</script>" & _ 
 "<script type=""text/javascript"" src=""http://api.recaptcha.net/challenge?k=" & publickey & """></script>" & _ 
 "<noscript>" & _ 
 "<iframe src=""http://api.recaptcha.net/noscript?k=" & publickey & """ frameborder=""1""></iframe>
 " & _ 
 "<textarea name=""recaptcha_challenge_field"" id=""recaptcha_challenge_field"" rows=""3"" cols=""40""></textarea>" & _ 
 "<input type=""hidden"" name=""recaptcha_response_field"" id=""recaptcha_response_field"" value=""manual_challenge"">" & _ 
 "</noscript>" 
end function 
%>

2. Insert the created reCaptcha in the desired location
Here is how you need to place the code in your form where you want the reCaptcha to be displayed.

<%=recaptcha_challenge_writer(recaptcha_public_key)%>

3. Server side component to validate the reCaptcha
Here code that needs to be put in the asp file that processes the submitted form.

'Define some variables to be used on page
dim pubkey, privkey, challenge, form_response, test_captcha, recaptcha_confirm

'Customize your public and private keys and other variables
pubkey = "XXXXXXXXXXXXXXXX"
privkey = "XXXXXXXXXXXXXXXX"

' Get the user input
challenge = Request.Form("recaptcha_challenge_field")
form_response = Request.Form("recaptcha_response_field")

' Generate the POST string for reCaptcha
Dim VarString
VarString = _
"privatekey=" & privkey & _
"&remoteip=" & Request.ServerVariables("REMOTE_ADDR") & _
"&challenge=" & challenge & _
"&response=" & form_response

' Make an AJAX call to validate input reCaptcha
Dim objXmlHttp
Set objXmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP")
if isNull(objXmlHttp) then
Set objXmlHttp = Server.CreateObject("Microsoft.XMLHTTP")
end if
objXmlHttp.open "POST", "http://api-verify.recaptcha.net/verify", False
objXmlHttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
objXmlHttp.send VarString

' Receive response from reCaptcha server
Dim ResponseString
ResponseString = split(objXmlHttp.responseText, vblf)
Set objXmlHttp = Nothing

if ResponseString(0) = "true" then
'They answered captcha correctly
''' Handle Success scenario
else
'They answered captcha incorrectly
''' Handle Failure scenario
end if


Note:
  1. Of course, you need to sign-up for a free reCaptcha account at reCaptcha.net.
  2. The code in step 3 above needs to be put in the top of the file which processes your submitted form - the asp file that is mentioned in the action of this particular form. The above code needs to be executed before anything else in that file.
  3. It's regular processing steps should be put in the if block (line 37) that has the comment that the user answered the captcha correctly.
  4. Error message display logic should go into the else block (line 40) that has the comment that the user answered the captcha incorrectly.
  5. Remember to substitute the public & private keys with the ones that you get when you sign up for a free reCaptcha account.
  6. This is a very basic, no-frills version. You can modularize, clean-up, optimize and add more error-handling. But this should be good enough to get you started!

References:
  1. This Google Groups post
  2. reCaptcha resources page
  3. This post on Jeff Niblack's Blog
  4. This post on World of Code Blog

8 comments:

Anonymous said...

Hi there.

I know this is quite an old post, but am curious to solve my issue.
I am trying to implement recaptcha for my asp form. the form has more than 35 fields and is divided into 4 div sections.
To call the form I am using a function Outputform and to save the form I am using another function Saveform. I am calling these two functions based on Request method of the page, ie; "POST". If request method is not post, it would display the form if not it will save the form.
Now my problem is I am unable to implement the captcha script with my code. So can you please help me with this. I can email you more details if you need.

Thank you so much for your time.

Darshan Shah said...

Per my understanding of what you are doing, here is what I think you need to to:
1. Add the sections 1 & 2 to the "Outputform" method where you are generating the form.
2. Add section 3 as the first thing that you do in the "Saveform" method with your code that actually saves the data replacing line 37.

HTH

Joe W said...

I was looking for something EXACTLY like this and came across your post. AWESOME. Thanks for sharing.

Anonymous said...

I found this better than the example in Google's docs on Classic ASP implementation for ReCaptcha.

Thanks,

Anonymous said...

when the recaptcha failed, i have it redirect to original "form", but all fields are wiped out. Is there a trick to train data on the form?

Anonymous said...

This scripts works and was simple to implement.

Thanks a million for your kindness!

Anonymous said...

I am confused, Do you add the step one before the doc type, set two after form action?

Darshan Shah said...

Step 1 is the code to be put with your other javascript stuff, generally in the head section.

Step 2 is the code to be put in just before the form submit code.

Hope that clarifies it!

LinkWithin

Related Posts Plugin for WordPress, Blogger...