Re: Image-Based Authentication

Thu, 30 Oct 2003 14:48:01 -0800

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 = "[EMAIL PROTECTED]&*(){}[]<>.,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

Reply via email to