cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Tony Collen <>
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 pattern="form/*.flow">
     <map:call continuation="{1}"/>

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

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

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

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});
         } else {

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

             if (input == secret) {

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


function generateSecret() {

       var characters = 

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


<?xml version="1.0"?>
<html xmlns:jx="">
     <title>image authentication</title>

     <h1>Image-based authentication</h1>

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

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

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



<?xml version="1.0"?>
<html xmlns:jx="">
     <title>image authentication</title>

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



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

<svg width="200" height="75">
         <filter id="blur2">
             <feGaussianBlur stdDeviation="2"/>
      <g id="imagegroup">
x="0" y="48">${text}</text>



View raw message