Sexy Captcha - A New Drag-and-Drop Approach
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)
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.
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:
Wow, this kicks ass!
Thanks for developing this. I can see myself using this on several of my web projects.
Great work!
This is nice bluke!
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
Warhole,
This is licensed under the GNU GPL license. Please feel free to modify and redistribute this as you like.
Thanks!
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
Hey. how can I set a callback on soccess?
Nice work btw... it is twice too big, but I can correct this myself ;)
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.
Thanks a bunch I used it and works great!
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
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 : dallardj@gmail.com
Have a nice day !
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.
This is nice work, but you maybe need some accessibility fallback
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?
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...
Its lovely, but accesibility is an issue
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!
great. I use it and it works perfectly. thanks a lot. The design is very nice.
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 :-)
if sorry... the line was a bit to long:
if (typeof( $('#captchaWrapper').find('.captchaSuccess').val() ) != 'undefined')
{
alert('yes!');
} else {
alert('no!');
}
but... please keep in mind that however it is nice to check your validation clientside, you ALWAYS have to check it again serverside!
the only thing is a macro just needs to reload the page and keep clicking in the same place untill it gets it right?
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.
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.
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".
Very nice work! Thank you so much:-)
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
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?
Great Idea! WAY too easily circuvented with multiple approaches.
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
...and is there a way to reduce the size?
Thanks
Mark
yeh its good stuff this, will give it a try out when i back from my hols, thanks
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.
Bonjour, super joli captcha, fonctionne parfaitement, installé sur une page d'inscription de membres, super !!!!
thanks.
Looks nice, but index.html is broken big time! Please correct it
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.
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.
I can't define if i can modify or/and redistribute.
How can I apply this captcha for an asp.net page?
It is awesome! tnx a lot for the post.. cheers:)
Nice tool but not working in IE.
Hello,
I would like to use your sexyCaptcha
, but it doesn't appear, see this
pic below
http://img863.imageshack.us/img863/3499/image000r.png
What could be the problem ?
Hello,
I wrote the previous comment, I realized what is the problem.
I used a dummy php instead of captcha.process.php
fabulous work!
and I've created a drupal module on http://drupal.org/sandbox/rogical/1186186.
any advice to the module is OK.
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
Nice job... i have been looking for good Captcha Code i think i found it.....
thanks
I’m struggling to make it look good, as well as offer the best quality content. I have learned much at your web
site and also I anticipate alot more articles and will be coming back soon
Well done Luke, I think this is really inventive. Ironically, in order to post this comment, Blogger made me use the old style Captcha.
thanks for such detailed information.
great work!! thanks!
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
}
});
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... :(
Account Suspended :(
Post a Comment