sexy captcha - a new drag-and-drop approach
TRANSCRIPT
Sexy Captcha - A New Drag-and-Drop Approach
2:14 AM Posted by Rock N' Roll Louis!
Hey all,
Inspired by the cats at WebDesignBeach.com and the cool "Ajax Fancy Captcha" they created, I decided to take a stab at my own version.
My goal was to create a truly ajaxified, sexy captcha module. Something that would be visually stimulating, functional and that would return immediate feedback on whether the user's answer was correct.
DEMO:
Here is the end result -- version 0.1, that is. Try it out below!
FEATURES: Cool, visually appealing approach to captcha Ajax call to give instant feedback on captcha answer Mobile browser compability (Android and iPhone)
INSTALLATION:
Download the files here: http://lukeblackamore.com/projects/sexy-captcha/sexy-captcha.zip
On your form page create a captcha wrapper div and make sure that it appears within your form tag. There is a hidden form element that will hold the value of the user's captcha answer.<form name="myForm"> <div class="myCaptcha"></div></form>
Include the following code somewhere near the bottom of your page.<script> $('document').ready(function() { $('.myCaptcha').sexyCaptcha('captcha.process.php'); }); </script>
The captcha module posts an ajax call to the captcha.process page and gets either a success or failure message back, which in turn displays either a green success or red failure notice to let the user know whether they've passed the test.
If failed, the user can click the "Refresh" link to refresh the captcha. This will not refresh the page or lose any previously entered form data. This is done by another ajax post. It will also reset the captcha and session variables in order to prevent a bot from trying all four combinations to get the correct code before attempting to submit the form.
In your PHP form processing page, you will need to verify that the captcha puzzle was successfully solved. You can do so by wrapping your form processing code with the following if-statement.session_start();
$requestVars = isset($_REQUEST) ? $_REQUEST : array();
if (substr($requestVars['captcha'], 10) == $_SESSION['captchaCodes'][$_SESSION['captchaAnswer']]) { //Your form processing code}
UPDATES: A good friend, Pete Warnock, pointed out that the drag-and-drop interface didn't
work on Android phones and iPhones. So, I've updated the code to allow a user to either drag the correct shape or simply click the correct shape. This allows the code to work on both regular and mobile browsers.
ISSUES:
1) Because IE continues to be the bane of our (designers/developers) existence, it's managed to take a certain amount of sexiness away from the plugin's look-and-feel. I'm going to make a nicer fix for this, but for the time being, here's what we get.
Obviously the sharp edges around the dragged object, in this case the heart, take away a good deal of the sex appeal. This will be fixed in version 1.0.
2) There are a few things that I'm doing with the plugin to make it more bot-safe. These additions will appear in subsequent versions.
WRAP UP:
Please feel free to use this plugin on your website!
If you have comments, questions, suggestions or bugs, don't hesitate to post below!
|
52 comments:
Varr Willis said...
Wow, this kicks ass!
Thanks for developing this. I can see myself using this on several of my web projects.
Great work!
October 12, 2009 2:06 PM
Joshua said...
This is nice bluke!
October 13, 2009 2:55 PM
Warhole said...
Hello,
Great job! Nevertheless, you attribute any licence on your program. By this way, i can't define if i can modify or/and redistribute.
I don't want to make modification without your rights.
Bye
October 15, 2009 7:01 AM
Rock N' Roll Louis! said...
Warhole,
This is licensed under the GNU GPL license. Please feel free to modify and redistribute this as you like.
Thanks!
October 15, 2009 12:08 PM
Warhole said...
Louis,
Thanks for your answer. Good choice for the GPL. ;)
Just a comment, you should add a comment in your code to put the licence you choose for your project.
Bye
October 19, 2009 5:01 AM
Damir Sečki said...
Hey. how can I set a callback on soccess?
Nice work btw... it is twice too big, but I can correct this myself ;)
October 24, 2009 1:44 PM
Salman Khimani said...
c'mon, index.html file in the given demo isn't working.Work seems nice but can't even try it with your demo.Please update files.
October 31, 2009 1:38 PM
Chris said...
Thanks a bunch I used it and works great!
February 23, 2010 12:24 PM
Al said...
I am not a developer/jq coder at all (frontend designer/html/css), but I was able to resize (smaller) this sexy captcha in about an hour. I was so damn proud of myself, but couldn't have done it with your slick code and professionalism. Thanx so much for offering this captcha under the GNU GPL license. I'm looking forward to seeing what's next!!!! Cheers
March 10, 2010 6:56 AM
Jérémy said...
Hello !
I am developping a web application using java on server side and i tried to use you're very nice plug in.
Had to modify you're source code a little bit and i've created the server side code in Java that replace the php file you use.
If you want this source code for you're plug-in, you can contact me at this mail : [email protected]
Have a nice day !
May 2, 2010 6:48 PM
Anonymous said...
Hi. This looks very nice. I noticed though that the background position of the draggable vs droppable containers gives away the correct image. I think someone could write some code to browse the DOM and send a post with the correct image. Maybe the droppable image should be created dynamically and the GUID of the correct image stored in a session variable that could be compared with the GUID of the submitted image.
May 6, 2010 8:59 AM
HerrSerker said...
This is nice work, but you maybe need some accessibility fallback
May 25, 2010 3:58 AM
lol768 said...
Great work!
However I can't get it to work if it is loaded via ajax into my website. The text appears but the actual object does not. Do you have any suggestions?
May 29, 2010 1:28 PM
Anonymous said...
First off, just wanted to say nice work. This may be a stupid question, but is there any way to do client side validation without having to submit the form? The few examples that I've seen that use this style of captcha all seem to validate on the
server side, which isn't all that elegant a solution, considering how slick it is otherwise. This is the first captcha code that I've worked with, so it just may be that it would be simple if I had any experience with it. Thanks in advance...
June 20, 2010 6:34 PM
Anonymous said...
Its lovely, but accesibility is an issue
July 20, 2010 5:11 AM
Anonymous said...
This is too cool man! I've been searching for the perfect captcha to use on my sites for quite some time and they've all been useless up until now. I think even a monkey could figure this one out, but a spam bot shouldn't be able to :). Thanks!
August 27, 2010 12:10 PM
Alex said...
great. I use it and it works perfectly. thanks a lot. The design is very nice.
September 18, 2010 12:33 AM
Anonymous said...
to check within your javascript, before submit if the captcha is correct you could use the following:
if (typeof($('#captchaWrapper').find('.captchaSuccess').val())!='undefined'){alert('yes!');} else {alert('no!');}If this is not the correct way, please let me know, but it works for me :-)
September 22, 2010 8:40 AM
Anonymous said...
if sorry... the line was a bit to long:
if (typeof( $('#captchaWrapper').find('.captchaSuccess').val() ) != 'undefined')
{alert('yes!');} else {alert('no!');}
September 22, 2010 8:42 AM
Anonymous said...
but... please keep in mind that however it is nice to check your validation clientside, you ALWAYS have to check it again serverside!
September 22, 2010 9:14 AM
Anonymous said...
the only thing is a macro just needs to reload the page and keep clicking in the same place untill it gets it right?
October 6, 2010 2:55 AM
nfl jerseys sale said...
The dogwood bud, pale green,is inlaid with russet markings. Within the perfect cup a score of clustered seeds are nestled. One examines the bud in awe: Where nfl football jerseys were those seeds a month ago? The apples display their milliner's scraps of ivory silk,rose-tinged. All the sleeping things wake it,feel it, crumble April in your peyton manning jersey hands.
October 13, 2010 2:37 AM
Anonymous said...
looks easy to break. people can code captcha breakers and you don't think they could code a simple shape matcher? hell, you GIVE the shape over to the right. all the programmer would need to do is generate an outline of whatever shape to look for (the differences in color are all you need for detection) using the empty spot on the right and compare it against all of the shapes on the left. the one that is the "closest" to the outline (it'd probably be pretty damn close to an exact match... if the outlining algorithm was decent enough) is the answer
i mean sure your captcha sure LOOKS sexy, but i don't think it would last 2 days in the real world. a bot would be written to break it in no time.
worthless.
October 14, 2010 9:24 AM
Anonymous said...
last anonymous post... you're an idiot. examine the code. It needs tweaks, but its not vulnerable the way you're thinking because it doesn't compare "shapes".
October 14, 2010 10:20 PM
Ravishankar Haranath said...
Very nice work! Thank you so much:-)
October 15, 2010 2:58 AM
Anonymous said...
Anon that thinks i'm an idiot: all the bot needs to do is compare the shapes... that's the point. what's in the code is irrelevant
October 21, 2010 11:37 PM
ee said...
Hi. Nice one. But, as usual there is one problem with IE. Imagine that you want to put this captcha into draggable div. In FF it works cool, but in IE, when you try to drag and image, all div is dragging too. Bizarre view :). Now I'm searching for elegant solution. Maybe someone had the similar one?
November 23, 2010 10:49 PM
jplewis01 said...
Great Idea! WAY too easily circuvented with multiple approaches.
January 6, 2011 10:38 AM
Anonymous said...
Hi all
I've installed it all ok, but how do I check the captcha is ok before the form is allowed to be submitted. At the moment a user can submit the form without having completed the CAPTCHA. (The CAPTCHA is inside the form tags).
I'm sure it's obvious.Mark
January 14, 2011 1:44 AM
Anonymous said...
...and is there a way to reduce the size?
ThanksMark
January 14, 2011 2:19 AM
manchester handyman said...
yeh its good stuff this, will give it a try out when i back from my hols, thanks
February 6, 2011 2:16 PM
Tony said...
Looks cool id like to have it but have no idea how. Always instructions for jquery are for mid level of understanding.I open this index in me web editor and preview and I get a mess. The old version works but I have no idea how to link to the secure page.If there is a good beginner tutorial, That would be great. I do not need a wizard just copy past, put your info here start to finish.
February 10, 2011 9:41 AM
cheese42 said...
Bonjour, super joli captcha, fonctionne parfaitement, installé sur une page d'inscription de membres, super !!!!thanks.
February 13, 2011 3:48 AM
Anonymous said...
Looks nice, but index.html is broken big time! Please correct it
February 19, 2011 9:45 AM
Anonymous said...
I wanted to use this on some forms that I was building, but I needed to add some working validation. Using the code that someone added last September, I created a complete validation example that can be viewed @ http://netcentrx.net/sexy-captcha/index.html
Hopefully this will help someone else if they want to use it.
March 1, 2011 4:41 PM
Anonymous said...
Nice and sexy, BUT damn easy to break.Just need to check the background-image offset of the .target and I'm done.
Since you need to tell the browser what to display a program can do this easily, too.
March 4, 2011 2:52 PM
martin said...
I can't define if i can modify or/and redistribute.
March 30, 2011 5:12 PM
Son Ha said...
How can I apply this captcha for an asp.net page?
May 17, 2011 6:27 PM
Anonymous said...
It is awesome! tnx a lot for the post.. cheers:)
June 1, 2011 11:24 PM
Caisses populaires said...
Nice tool but not working in IE.
June 9, 2011 10:25 AM
Anonymous said...
Hello,
I would like to use your sexyCaptcha, but it doesn't appear, see thispic belowhttp://img863.imageshack.us/img863/3499/image000r.png
What could be the problem ?
June 17, 2011 1:45 AM
Anonymous said...
Hello,I wrote the previous comment, I realized what is the problem.
I used a dummy php instead of captcha.process.php
June 17, 2011 1:03 PM
Anonymous said...
fabulous work!
and I've created a drupal module on http://drupal.org/sandbox/rogical/1186186.
any advice to the module is OK.
June 27, 2011 8:05 PM
Nico Giangregorio said...
Hello,Good job man, great user experience with your plugin.
I just published an article on my blog, about how to use this plugin with a Java web application.
Feel free to leave a comment:
http://nickgiango.blogspot.com/2011/07/ajax-captcha-with-jquery-and-java.html
or to checkout the source code:
https://github.com/nicogiangregorio/java-ajax-captcha
July 13, 2011 4:40 AM
andrew siddle said...
Nice job... i have been looking for good Captcha Code i think i found it.....thanks
August 19, 2011 3:31 AM
pharmacy said...
I’m struggling to make it look good, as well as offer the best quality content. I have learned much at your website and also I anticipate alot more articles and will be coming back soon
October 14, 2011 10:12 AM
Jez Gomez said...
Well done Luke, I think this is really inventive. Ironically, in order to post this comment, Blogger made me use the old style Captcha.
November 4, 2011 5:34 AM
liberar por imei said...
thanks for such detailed information.
December 25, 2011 10:00 AM
Plasterer Manchester said...
great work!! thanks!
January 20, 2012 5:12 AM
Unknown said...
it can be sexy, and whatever, but it just wont stop anybody, who want to avoid this captcha.
here is the solver:
var res=document.querySelector(".targetWrapper .target").style["background-position"].match(/\d+/);
[].map.call(document.querySelectorAll(".draggable"),function(a){if(a.style["background-position"].match(/\d+/)[0]==res){return document.querySelector(".captchaAnswer").value=a.id}});
January 23, 2012 6:45 AM
Anonymous said...
So sad... this sexy-captcha do not work for me. When I open Index.html I see some line's code (of captcha.process.php), the black box and the heart inside... :(
February 8, 2012 10:02 AM
djary said...
Account Suspended :(
February 14, 2012 1:50 PM
Post a Comment
Newer Post HomeSubscribe to: Post Comments (Atom)
Search
About Me
Rock N' Roll Louis! View my complete profile
Blog Archive
o October (2)
www. flick r .com
