Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   Slide to Login for Websites ~ The new CAPTCHA system (http://www.go4expert.com/forums/slide-login-websites-captcha-t29190/)

ManzZup 13Oct2012 23:07

Slide to Login for Websites ~ The new CAPTCHA system
 
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.

http://2.bp.blogspot.com/-JAa5jW6pYc...Untitled-5.png

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 :D

shabbir 14Oct2012 07:21

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
So this takes out the scenario of enter details and hit enter to login.

ManzZup 14Oct2012 20:22

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
yup basically cutting out the reading of the captcha and pressing the login :)

shabbir 15Oct2012 09:21

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
No Invisible Captcha is better option but again it assumes lot of things from spammers.

ManzZup 15Oct2012 21:55

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
hmm may be a combination would be better
might check on it

shabbir 16Oct2012 10:37

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
Yes. That would be deadly.

ManzZup 26Aug2013 15:53

Re: Slide to Login for Websites ~ The new CAPTCHA system
 
IF download link is broken
https://github.com/ManZzup/slidetl


All times are GMT +5.5. The time now is 17:43.