menu

Saturday, October 13, 2012

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.

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)
  1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  3. <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


  1. <div id="slidetl">
  2.         <div id="slider"></div>
  3. </div>


5) Add the link to the custom JS file after that ONLY

  1. <script type="text/javascript" src="slidetl.js"></script>

Finally the code would be


  1. <html>
  2. <head>
  3. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  5. <link href="slidetl.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8.        
  9. <form id="form1" action="index.php" method="post">
  10. Username : <input type="text" value="admin" name="user" /><br />
  11. Password :  <input type="password" value="admin" name="user" />
  12. <br /><br />
  13. <div id="slidetl">
  14.         <div id="slider"></div>
  15. </div>
  16. <script type="text/javascript" src="slidetl.js"></script>
  17. </form>
  18. </body>
  19. </html>


6) Open the slidertl.js and change the first 3 variable values as necessary


  1. var slider = $("#slider"); //the id of the sliding element
  2. var container = $("#slidetl"); //the id of the slider
  3. 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 or https://github.com/ManZzup/slidetl

Cyah with some new skins :D
Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)