cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Tony Collen <colle...@umn.edu>
Subject Re: Image-Based Authentication
Date Thu, 30 Oct 2003 21:46:07 GMT
Alright, here is the complete guide to how I got image-based 
authentication working.  I refactored it to not use interceptions, as well.

If there are any questions, please ask! :)

Here is the sitemap snippet:

<map:match pattern="">
     <map:call function="main"/>
</map:match>

<map:match pattern="form/*.flow">
     <map:call continuation="{1}"/>
</map:match>

<map:match pattern="*.jxt">
     <map:generate type="jxt" src="documents/{1}.jxt"/>
     <map:serialize type="xhtml"/>
</map:match>

<map:match pattern="auth/*.jpg">
     <map:call continuation="{1}">
         <map:parameter name="msg" value="image"/>
     </map:call>
</map:match>

<map:match pattern="internal/auth.jpg">
     <map:generate type="jxt" src="documents/auth-jxt.svg"/>
     <map:serialize type="svg2jpeg"/>
</map:match>


Here is the associated Flowscript:


function main() {

     var secret = generateSecret();

     while (true) {
         cocoon.sendPageAndWait("main.jxt", {secret:secret});

         if (cocoon.parameters.msg == "image") {
             cocoon.sendPage("internal/auth.jpg", {text:secret});
             return;
         } else {

             var input = cocoon.request.get("secret");

             if (input == secret) {
                 break;
             }
         }
     }

     cocoon.sendPage("/image/success.jxt", {secret:secret});

}

function generateSecret() {

       var characters = 
"!@#$%^&*(){}[]<>.,ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

       var passwordlength = 7;

       var password = "";
       var randomnumber = 0;

       for (var n = 0; n < passwordlength; n++) {
          randomnumber = Math.floor(characters.length*Math.random());
          password += characters.substring(randomnumber,randomnumber + 1)
       }

       return password;
}


And here are the appropriate files (mostly jxtemplates):

main.jxt:

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
     <title>image authentication</title>
</head>
<body>

     <h1>Image-based authentication</h1>

     <p>As a security measure, please enter the string you see below.</p>

     <img src="/image/auth/${continuation.id}.jpg"/>

     <form method="post" action="/image/form/${continuation.id}.flow">
         <input type="text" name="secret"/>
         <input type="submit"/>
     </form>


</body>
</html>

success.jxt:

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
     <title>image authentication</title>
</head>
<body>

     <h1>Success!</h1>
     <p>The code was obviously ${secret}</p>
     <p>This sample demonstrates how you would implement an image-based
         authentication using flow and the intercepted flowscript.</p>
     <p>This is most commonly used to keep robots or spiders out of an 
area, but
         you don't neccesarily care about humans.</p>


</body>
</html>

auth-jxt.svg:

<?xml version="1.0" encoding="UTF-8"?>

<svg width="200" height="75">
     <defs>
         <filter id="blur2">
             <feGaussianBlur stdDeviation="2"/>
         </filter>
     </defs>
      <g id="imagegroup">
         <text 
style="fill:#0086B3;font-size:42;font-family:TrebuchetMS-Bold;filter:url(#blur2);" 
x="0" y="48">${text}</text>
      </g>
</svg>




Regards,

Tony


Mime
View raw message