So now the expectations rise and he asks me to validate reCaptcha using AJAX - I do not have any experience of AJAX combined with ASP either.
Going through the resources section of the recaptcha.net site did not help much in this regard. So here are the steps that I did to achieve this. Note that most parts of the solution here have been taken from various pages on the net which are listed at the bottom of this post in the References section.
There are 6 parts of the code as follows:
- JavaScript to create reCaptcha on the page that has the input form
- Insert the created reCaptcha in the desired location
- Generic JavaScript to make AJAX call
- Make AJAX call to Server-side component to validate reCaptcha
- Handle AJAX validation response from server-side component
- 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. Generic JavaScript to make AJAX call
Here is a generic JavaScript function to make an AJAX call
4. Make AJAX call to Server-side component to validate reCaptcha
Here is the JavaScript "onClick" function that will make the specific call to the server-side component to validate the reCaptcha input.
5. Handle AJAX validation response from server-side component
Here code that needs to be put in the asp file that processes the submitted form.
// The function for handling the response from the server
var showMessageResponse = function (oXML) {
// get the response text, into a variable
var response = oXML.responseText;
// act on the result from the server
if (response == "PASS") {
//alert("Captcha Passed ...");
document.getElementById("Form1").action = "process_form.asp";
document.getElementById("Form1").submit();
} else {
// Reload the captcha image if the validation failed & alert the user
alert("Captcha Failed. Please try again ...");
Recaptcha.reload();
}
};
6. 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
response.write("PASS")
else
'They answered captcha incorrectly
response.write("FAIL")
end if
Note:
- Of course, you need to sign-up for a free reCaptcha account at reCaptcha.net.
- The above steps 1, 3, 4 & 5 can be put in the same script block.
- The above step 2 needs to be put in the place in the form where reCaptcha is to be shown.
- Remember to substitute the public & private keys with the ones that you get when you sign up for a free reCaptcha account.
- 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:
- This Google Groups post
- reCaptcha resources page
- This post on Jeff Niblack's Blog
- This post on World of Code Blog
- This blog post on Dark Side of Carton.
