A proper as3 captcha validator



13 Comments

Share




Some time ago i was surfing the net and i noticed that flash captchas are very popular on such components stores like flashden etc, but just few of them are actually made properly and can prevent spammers from doing their magic ^_^.

So, i’ve decided to write a little sample catcha validator class for those of u that need or would need one.

Demo available here

Download source files

How to use CaptchaValidator (flash sample):


import fl.controls.Button;
import flash.display.Loader;
import flash.display.SimpleButton;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.events.MouseEvent;
import com.chargedweb.net.CaptchaValidator;
import com.chargedweb.events.CaptchaValidatorEvent;

var tFo:TextFormat = new TextFormat("Verdana", 10);
var capVal:CaptchaValidator = new CaptchaValidator();
capVal.addEventListener(CaptchaValidatorEvent.SUCCESS, onCaptchaSuccess);
capVal.addEventListener(CaptchaValidatorEvent.ERROR_VARS, onErrorVars);
capVal.addEventListener(CaptchaValidatorEvent.ERROR_CAPTCHA, onErrorCaptcha);

var titleTF:TextField = new TextField();
titleTF.multiline = false;
titleTF.autoSize = "left";
titleTF.text = "Try to input the captcha code and click the send button | Click on the image to reload the captcha";
titleTF.x = titleTF.y = 10;
titleTF.setTextFormat(tFo);
addChild(titleTF);

var inputTF:TextField = new TextField();
inputTF.multiline = false;
inputTF.type = "input";
inputTF.width = 100;
inputTF.height = 20;
inputTF.border = true;
inputTF.defaultTextFormat = tFo;
inputTF.setTextFormat(tFo);
inputTF.x = titleTF.x;
inputTF.y = titleTF.y + int(titleTF.height + 5);
addChild(inputTF);

var statusTF:TextField = new TextField();
statusTF.multiline = true;
statusTF.text = "Server results go here";
statusTF.width = 200;
statusTF.height = 100;
statusTF.border = true;
statusTF.setTextFormat(tFo);
statusTF.x = stage.stageWidth - statusTF.width;
statusTF.y = stage.stageHeight - statusTF.height;
addChild(statusTF);

var captchaLdr:Loader = new Loader();
captchaLdr.addEventListener(MouseEvent.CLICK, captchaLdrClick);
captchaLdr.x = inputTF.x;
captchaLdr.y = inputTF.y + int(inputTF.height + 5);
addChild(captchaLdr);

var sendBtn:Button = new Button();
sendBtn.addEventListener(MouseEvent.CLICK, sendBtnClick);
sendBtn.setStyle("textFormat", tFo);
sendBtn.label = "verify captcha";
sendBtn.x = inputTF.x + int(inputTF.width + 5);
sendBtn.y = inputTF.y;
sendBtn.width = 150;
sendBtn.height = inputTF.height;
addChild(sendBtn);

loadCaptchaImage();

function loadCaptchaImage():void
{
captchaLdr.load(new URLRequest("base/captcha.php"));
}

function captchaLdrClick(event:MouseEvent):void
{
loadCaptchaImage();
}

function sendBtnClick(event:MouseEvent):void
{
capVal.captcha = inputTF.text;
capVal.load();
}

function onCaptchaSuccess(event:CaptchaValidatorEvent):void
{
statusTF.appendText("\nOk, captcha verivied");
}

function onErrorVars(event:CaptchaValidatorEvent):void
{
statusTF.appendText("\n#error: Captcha variable not set/wrong send method");
}

function onErrorCaptcha(event:CaptchaValidatorEvent):void
{
statusTF.appendText("\n#error: Wrong captcha code");
}

13 Comments (+add yours?)

  1. David Buhler
    Apr 05, 2010 @ 08:29:36

    I built a CAPTCHA utility. It’s done in pure AS.

    You can find out more information about it, here:
    http://davidbuhler.org/flex-form-function-v0-1-validators-with-formatters-in-a-stateful-form/

  2. jloa
    Apr 05, 2010 @ 15:28:55

    Nice, thx for sharing it with me

  3. Guiguizmo
    Jul 02, 2010 @ 10:49:50

    Hi,

    I’ve discovered your captcha as3 validator and i’d like to thank you for that. It’ll be very helpfull. But actually i’ve got an issue with it : when i try to launch the index.html (via easyPhp of course), i’ve got a “Error #2044: IOErrorEvent non pris en charge : text=Error #2124: Le type du fichier chargĂ© est inconnu.” and captcha image doesn’t appear.

    Do you know how to solve that.

    Thanks a lot.

  4. jloa
    Jul 02, 2010 @ 13:32:35

    Ough, dear… i wish i knew french :)
    But according to google translater the actual error is “Error # 2044: IOErrorEvent Unsupported: text = Error # 2124: Type of the uploaded file is unknown”.
    The key words are “Type of the uploaded file is unknown” – that could probably be caused by the server side. On the other hand the captcha.php which generates the actual captcha image from the archive u’ve downloaded is just the same as the one described on the php.net web samples page @ http://php.net/manual/en/function.imagejpeg.php
    Could u send your source files so that i could figure out what is the actual issue around it?

    ps: glad u found it useful, that’s what my labs r 4 ^_^

  5. Kyle
    Aug 15, 2010 @ 18:27:29

    Yea nice captcha validator but its broke…can you fix it and repost? Also, is the extra security measures, to prevent spam located in the js file only? Does the files need to be up on a server to operate correctly or can it work on my system? Thanks

  6. jloa
    Aug 16, 2010 @ 13:54:30

    Kyle >> why? what’s your statement based on? :) what’s broken about it? yeap, sure files must be up on a server, as it uses a *.php server-side to generate the actual captcha image and to validate it.
    Here’s the demo and it works charming.

  7. Zach
    Aug 21, 2010 @ 14:34:52

    Great tutorial!

    Just something I want to ask so I can expand my knowledge and I know it’s simple, yet I’m just a novice in comparison to you :)

    I’m trying to implement this in a away that after it gets the correct verification from the captcha.php, that it will redirect to the 2nd frame in the flash saying successful and to go check this website location for you to see your post(form to phpbb3 post that I got working)

    what do I need to add to make it work for such a redirection? I really want to use this since it’s not holding any of the server side scripts but loading it from an external php script.

  8. jloa
    Aug 21, 2010 @ 17:55:28

    Zach >> well, there’s a CaptchaValidatorEvent.SUCCESS event, which’s being dispatched by the CaptchaValidator instance, whenever the captcha code is correct.
    With that in mind, you just have to add an event listener and call the nextFrame() or gotoAndStop() method inside the handler.
    Like this:

    
    var capVal:CaptchaValidator = new CaptchaValidator();
    capVal.addEventListener(CaptchaValidatorEvent.SUCCESS, onCaptchaSuccess);
    
    function onCaptchaSuccess(event:CaptchaValidatorEvent):void
    {
    	// eg: go to the "success" frame after a succesful captcha validation
    	gotoAndStop("success");
    }
    
    

  9. autoversicherung
    Oct 29, 2010 @ 01:22:52

    last few days our class held a similar discussion about this topic and you point out something we have not covered yet, thanks.

    - Kris

  10. Juliann Poeschl
    Nov 11, 2010 @ 16:38:05

    Your website is great! This post really caught my eye when I was searching around. Thanks for sharing it.

  11. Burton Haynes
    Nov 15, 2010 @ 06:59:36

    I am usually not a fan of Microsoft, but this was pretty sweet. (Sorry, my Indonesian is not very good :P )

  12. Dewi Mulyaria
    May 31, 2011 @ 21:46:19

    Hore!!! Trims..

    This tutorial fully help me..

  13. nefaste-secure
    May 24, 2012 @ 08:41:54

    Thank for all, , good job.

Leave a Reply

Spam protection by WP Captcha-Free