Slide to Login for Websites ~ The new CAPTCHA system

ManzZup's Avatar, Join Date: May 2009
Skilled contributor
Hey guys,

Its for a quick post becuase im still working on this Jquery plugin. YES, as the name says it is the *new* system for the reckless captcha, the Slide to Login. Basically it implements the popular ideas of Slide to Unlock in Smartphones, it will replace both the Login Button + the captcha verification to just one little Slide in effort.



How anti-spam mechanism works?



It rely on the simple mechanism of the mouse. That is if one is to slide this to the end, the mouse should be reported to be at the end of the slide. That is the anti spam mechanism check whether the mouse was in the required position when the form submit was called. It may have security holes but for now it seems okay.

How to use?



1) First download the necessary files and keep them in the directory.
2) Now in your HTML code add the following references (in the head tag)

Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<link href="slidetl.css" rel="stylesheet" type="text/css" />
3) Make your form elements and name the form as "form1". (You can use any name but for the example lets keep it as form1)

4) At the bottom of the form add the following to insert the slider
Code:
<div id="slidetl">
        <div id="slider"></div>
</div>
5) Add the link to the custom JS file after that ONLY
Code:
<script type="text/javascript" src="slidetl.js"></script>
Finally the code would be
Code:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<link href="slidetl.css" rel="stylesheet" type="text/css" />
</head>
<body>
       
<form id="form1" action="index.php" method="post">
Username : <input type="text" value="admin" name="user" /><br />
Password :  <input type="password" value="admin" name="user" />
<br /><br />
<div id="slidetl">
        <div id="slider"></div>
</div>
<script type="text/javascript" src="slidetl.js"></script>
</form>
</body>
</html>
6) Open the slidertl.js and change the first 3 variable values as necessary
Code:
var slider = $("#slider"); //the id of the sliding element
var container = $("#slidetl"); //the id of the slider
var form = $("#form1"); //id of the form to be submitted
YEhAAA the Slide is READY TO GO

Still under high development but working for now. Documentation on the way, but need your ideas on bugs, improvements and SPECIALLY the security wise problems with the plugin. Please spread the word, its OPEN

Demo: http://zontek.zzl.org/demo/slide
Download: http://zontek.zzl.org/files/slidetl.zip

Cyah with some new skins
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
So this takes out the scenario of enter details and hit enter to login.
0
ManzZup's Avatar, Join Date: May 2009
Skilled contributor
yup basically cutting out the reading of the captcha and pressing the login
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
No Invisible Captcha is better option but again it assumes lot of things from spammers.
0
ManzZup's Avatar, Join Date: May 2009
Skilled contributor
hmm may be a combination would be better
might check on it
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Yes. That would be deadly.
0
ManzZup's Avatar, Join Date: May 2009
Skilled contributor
IF download link is broken
https://github.com/ManZzup/slidetl