Captcha — специальный код призванный отфильтровать программные скрипты от реальных людей. Чем проще каптча тем лучше, однако на ее устойчивости к автоматизированным определениям это не должно никоим образом отражаться.
Раньше мною уже была написана HTML Captcha, теперь я решил попробовать написать каптчу на AS 3.0(ActionScript 3.0). Код получился минимальный!
С ActionScript 3.0 познакомился буквально месяц назад, когда понадобилось срочно сделать баннер с меняющимися фотками на flash. Быстро прочитав справку (благо с ООП знаком) у меня получился довольно неплохой баннер, который подгружает фотки из каталога, а описание к ним загружает из xml файла который лежит так же в каталоге с флеш роликом. Но разговор сейчас не об этом.
Первым делом в Adobe Flash Professional CS5 был создан пустой проект ActionScript 3.0 в котором в свойствах был указан основной класс приложения и версия флеш плеера.
Теперь пишем этот основной класс captcha. первоначально подключаем необходимые встроенные классы. Для программирования я использую удобнейшую среду Flash Develop. Все класс подключались автоматически в процессе разработки. Основная задумка каптчи в следующем: при загрузке на captcha ничего не будет, а для того чтобы увидеть контрольный код необходимо вручную навести указатель мыши на каптчу и под маской найти код. При нажатии на каптчу происходит обновление кода. Вот и вся задумка, теперь перейдем к реализации.
|
1 2 3 4 5 6 7 8 9 10 |
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField; import flash.ui.Mouse; |
Тут начинается самое интересное. Основной класс captcha расширяет класс MovieClip. К каждой строчке написан подробный комментарий
|
1 2 3 4 5 6 |
public class captcha extends MovieClip { public var mylabel: TextField = new TextField(); // создаем переменную объекта TextField в которую будет выводится содержимое каптчи public var myURLloader: URLLoader; // переменная для загрузки информации с определенного адреса public var myURLRequest: URLRequest; // переменная которая хранит адрес страницы к которой каптча при обновлении будет обращаться public var myMask: Sprite; // рисованный объект, который будем использовать как маску к слою с контрольным кодом public var myRect: Sprite; // рисованный объект, который будет использоваться в качестве ползунка и следовать за мышкой по оси x |
Одним из пунктов задумки было сделать так, чтобы при движении мыши над каптчей ползунок двигался за указателем мыши по оси x не сдвигаясь при этом вверх и вниз. Так же было сделано, чтобы при заходе курсора мыши на каптчу, он прятался. При щелчке мыши необходимо производить запрос нового кода, поэтому на время получения кода будем отключать слушатель клика мыши, чтоб посетитель не мог щелкать слишком часто а дожидался загрузки нового кода.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//Пишем инициализацию основного класса public function captcha() { //Вешаем слушатель события на движение мышки над областью каптчи stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); //Вешаем слушатель события на клик мыши stage.addEventListener(MouseEvent.CLICK, mouseClicklistener); //Вешаем слушатель события на вход мыши на площадь Каптчи stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutlistener); //Вешаем слушатель события на выход мыши с каптчи stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverlistener); //Создаем текстовое поле на котором напишем посетителю что надо сделать с каптчей чтобы увидеть код var myLabelAction:TextField = new TextField(); myLabelAction.text = "Find a code. Use mouse."; //делаем чтобы текстовое поле не выделялось на каптче мышкой myLabelAction.selectable = false; //задаем координаты myLabelAction.width = stage.stageWidth; myLabelAction.x = stage.stageWidth/2 - myLabelAction.textWidth/2; myLabelAction.y = myLabelAction.textHeight/3; //добавляем поле в видимую область флеш ролика addChild(myLabelAction); //создаем графический объект - будущую маску myMask = new Sprite(); //делаем маску невидимой, так как ее еще не к чему применить myMask.visible = false; //Рисуем ползунок который по размерам будет точно такой же как маска myRect = new Sprite(); myRect.visible = false; myMask.graphics.beginFill(0x000000, 1); myRect.graphics.beginFill(0x000000, 0.1); myMask.graphics.drawRect(0, 0, stage.stageWidth / 7, 50); myRect.graphics.drawRect(0, 0, stage.stageWidth / 7, 50); myMask.graphics.endFill(); myRect.graphics.endFill(); //Добавляем ползунок на сцену addChild(myRect); |
В следующем блоке кода мы прописываем адрес файла в котором будет генерироваться код каптчи. а также можно занести этот код в какую либо переменную сессии посетителя, для того чтобы в дальнейшем сравнить введенный код с тем, который отображается на каптче и таким образом предотвратить автозаполнения форм.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
myURLRequest = new URLRequest('http://omelchuck.ru/wp-content/uploads/2011/09/captcha.php'); myURLloader = new URLLoader(); //вешаем слушатель событий на загрузчик файла. После загрузки выполняется процедура urlLoadComplete myURLloader.addEventListener(Event.COMPLETE, urlLoadComplete); //добавляем на сцену текстовое поле в котором будет отображаться код флеш каптчи addChild(mylabel); addChild(myMask); getnewCode(); } private function mouseOverlistener(e:MouseEvent):void { Mouse.hide(); } private function mouseOutlistener(e:MouseEvent):void { Mouse.show(); } private function getnewCode():void { //Получаем новый код. На это время отключаем слушателей кликов мыши и ее движения. myMask.visible = false; myRect.visible = false; stage.removeEventListener(MouseEvent.CLICK, mouseClicklistener); stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); myURLloader.load(myURLRequest); } private function mouseClicklistener(e:MouseEvent):void { getnewCode(); } private function mouseMoveListener(e:MouseEvent):void { //заставляем маску и ползунок двигаться за мышкой по оси x myMask.x = mouseX - myMask.width / 2; myRect.x = mouseX - myRect.width / 2; } private function urlLoadComplete(e:Event):void { //При успешной загрузке файла с кодом каптчи - выводим код в текстовое поле и маскируем его под подготовленную ранее маску. mylabel.text = myURLloader.data; mylabel.selectable = false; mylabel.x = stage.stageWidth / 2 - mylabel.textWidth / 2; mylabel.y = stage.stageHeight / 2; mylabel.mask = myMask; if (myRect.visible == false) { myRect.visible = true; myMask.visible = true; } //Вновь запускаем слушателей событии клика мыши и ее движения stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); stage.addEventListener(MouseEvent.CLICK, mouseClicklistener); } } } |
[kml_flashembed publishmethod=»static» fversion=»9.0.0″ movie=»http://omelchuck.ru/wp-content/uploads/2011/09/captcha.swf» width=»150″ height=»50″ targetclass=»flashmovie»]
Вот такая каптча получилась в результате. При щелчке мыши можно заметить как ползунок с Flash Captcha исчезает, а сама Flash Captcha перестает реагировать на щелчки мыши. Это означает, что перестает работать слушатель событий щелчков мыши.
Чуть не забыл. В файле captcha.php для примера я внес всего 2 строчки:
|
1 |
<!--?php $captch_num = rand(1, 999999); echo $captch_num;?--> |
Но Вы можете на свое усмотрение сделать генерацию кода с буквами или еще с какими-то символами.
Надеюсь пост оказался для кого-нибудь полезным. Планирую сделать плагин для wordpress на основе такой Captcha.
