Recently Google introduced new reCaptcha API called “No CAPTCHA reCAPTCHA” . Its a complete new design captcha system. This protects your website for spammers and robots. As per Google,
While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today’s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.
Now using this new captcha system users do not need to identify a complex distorted text string to prove themselves as human being. Sometimes it becomes too much irritating when the text strings are very much distorted even difficult to recognized by human beings. As per the new catacha system users just need to click on checkbox to identify themselves as human being.
Google does say that this won’t entirely do away with CAPTCHAs — there may still be times when you’ll be asked to enter some text as well.
Google’s new reCATPTCHA system makes use of an advanced risk analysis engine to identify humans and robots.The idea here is to track user’s actions before, during and after ticking the check box saying “I’m not a robot“. Basically it checks how the cursor moved on its way to the check (organic path/acceleration), which part of the checkbox was clicked (random places, or dead on center every time), browser fingerprint, Google cookies & contents. At the end of the day, if it’s not sure, it will still offer you traditional CAPTCHA .
Here is how Google’s new reCAPTCHA looks like.
Sometime if it can not verify only by clicking the checkbox it presents with the old traditional captcha,
In this post I had implemented new reCaptch API system with HTML login form using ColdFusion.
Steps:
1. Click Here to to create a Google reCaptcha application.
2. After this step you will be provided with google site key and secret key. The site key will be used in our HTML form as a hidden field and secret key will be used for communication between our site and google.
Algorithm:
- Add the google site key to the form with a hidden field. Example,
-
<div class="g-recaptcha" data-sitekey="6LctadUSAAAAAI81jKmWaBFGWwMky64xbBGhVl8L"></div>
- When the user clicks on the check box, an ajax request will be automatically sent to the server and validate the CAPTCHA, if it is valid mark it as
in use
. (Show the result – identifier is OK/not OK – to the user) - When the user sends the form, the form’s data contains the identifier. Check it once more on the server side by making a http request to google, it should exist and it should be in
in use
state. - If all validations are succeeded , the form’s data is ready to use/process
Here is the quick demo I have implemented using ColdFusion.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<cfparam name="FORM.username" default="" type="string" > | |
<cfparam name="FORM.password" default="" type="string" > | |
<cfif structKeyExists(FORM,"submit")> | |
<cfset recaptcha = FORM["g-recaptcha-response"] > | |
<cfif len(recaptcha)> | |
<cfset googleUrl = "https://www.google.com/recaptcha/api/siteverify"> | |
<cfset secret = "6LctadUSAAAAAM7NPoPq5jlbm3a37ib3sHlRFyNE"> | |
<cfset ipaddr = CGI.REMOTE_ADDR> | |
<cfset request_url = googleUrl & "?secret=" & secret & "&response=" & recaptcha & "&remoteip" & ipaddr> | |
<cfhttp url="#request_url#" method="get" timeout="10"> | |
<cfset response = deserializeJSON(cfhttp.filecontent)> | |
<cfif response.success eq "YES"> | |
<!— Start validating the username/password here. —> | |
</cfif> | |
</cfif> | |
</cfif> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='https://www.google.com/recaptcha/api.js'></script> | |
</head> | |
<body> | |
<form method="post"> | |
UserName: | |
<input type="text" name="username"> | |
<br><br> | |
Password: | |
<input type="password" name="password"> | |
<br><br> | |
<div class="g-recaptcha" data-sitekey="6LctadUSAAAAAI81jKmWaBFGWwMky64xbBGhVl8L"></div> | |
<input type="submit" value="Submit" name="submit"> | |
</form> | |
</body> | |
</html> |
Great article, thank you, but when I try the coding I get a “Element g-recaptcha-response is undefined in a Java object of type class coldfusion.filter.FormScope.” error upon submitting. Any ideas?
LikeLike
Me too. I got problem when submit form `Element G is undefined in FORM.`
After that, I think it’s because i did not define the variable, so I setup at the top “
Then I submit form, but it cause another error : `Parameter 1 of function SetVariable, which is now FORM.g-recaptcha-response, must be a syntactically valid variable name.` and this time, I stucked @@ Someone please help.
LikeLike
I got the issue . You should not modify the class name for the form element div.g-recaptcha . It should be “g-recaptcha” only. let me if this solves your issue.
LikeLike
I’m not sure I understand. What needs to be adjusted to the code you provided?
LikeLike
I have checked my code its working fine on my system, The error you posted “Element g-recaptcha-response is undefined”normally occurs when you rename the Class name of google recaptcha element that is “div class=’g-recaptcha’ to some other class name.
LikeLike
I checked my div code and matched the name. Still throwing the same Java error. I have Coldfusion 9. I wonder if that could be the issue?
LikeLike
Wierd. a cfdump of the form scope does not even show the variable in there.
LikeLike
I realize this post is 2 years old but I was wondering if you were able to integrate this in your ColdFusion application. I am getting similar errors as listed by you:
Element g-recaptcha-response is undefined in a Java object of type class coldfusion.filter.FormScope
and dump of form shows an empty struct.
I am using Cold Fusion 10.
The example works as a standalone cfm page but integrating the code in my existing application gives the errors listed above.
I also get ‘Variable G is undefined. ‘ when I do a cfdump of the div in the form action page.
LikeLike
Hi – I got it to work. I had to call the verify server response code in the action form and everything works nicely.
Another thing to note is to use the array notation as shown in the example form[‘g-recaptcha-response’] and not form.g-recaptcha-response or #g-recaptcha-response#
There is another good example of ReCaptcha using ColdFusion/CFML code by Steve Withington at https://github.com/stevewithington/ReCAPTCHA
LikeLike
Here is my FORM scope dump . http://img42.com/frkXO
Its clearly working for me , not sure why you people are facing issues.
LikeLike
Isinya, ya itu tadi, koleksi e-book-ku dari jaman aku masih ganteng sampai dengan sekarang yang notabene semakin ganteng la.23wuihig0; narsis poull…
LikeLike
I am a CF newbie; when execution of , it does not validate; can you please upload your working cfm as a reference? Thanks.
LikeLike
Nonhtig I could say would give you undue credit for this story.
LikeLike
Sorry, the code got deleted when posting. here it is again — cfif response.success eq YES — on response validation.
LikeLike
Nice, thanks for posting this… works great.
Note: if you get the error “invalid-input-response” or “missing-input-response” check to see if you are running any code that is sanitizing FORM variables for malicious input. custom tags like inputfilter or Portcullis. It could be mangling the variable name.
LikeLike
Thank you for posting this helpful info.
LikeLike
Thanks for the write up! I’m working on implementing this now and will write again if I have questions!
LikeLike
Just a heads up, the address for the captcha request has been changed by Google. In order to get this to work properly, you need to change the address from: https://www.google.com/recaptcha/api/siteverify to https://google.com/recaptcha/api/siteverify
LikeLike
Thanks very much this was most helpful 🙂 Well done!
LikeLike
I appreciate your very good work above, but you have WAY overcomplicated this. Here’s the simplest explanation:
In the :
https://www.google.com/recaptcha/api.js
Inside your form (anywhere):
On the resulting page:
The result will be returned in the form field called form.G-RECAPTCHA-RESPONSE but you CAN’T check its value using isdefined() because it is actually a struct (array). Because of this, you must use StructKeyExists() instead. If the CAPTCHA was successful a long value will be present. If not, it will be null, so the easiest way to check it is:
Captcha Successful… do your code
Captcha Not Complete… do your code
</cfif
That's it!! Works for me on many different sites.
LikeLike
GREAT explanation! Thank you for the post. It is working very well for me.
LikeLike
Help, I’ve been informed and I can’t become igtroann.
LikeLike