ALCAPTCHA = Капча + AJAX + CodeIgniter

 Очередной велосипед :) Внимание!
Версия библиотеки описываемая в этом посте устарела.
Новую можно получить здесь !!!


Что-то у меня не склеились отношения со штатной капчей от CodeIgniter. А судя по поисковым запросам — не только у меня.

Да и честно говоря очень захотелось изобрести свой велосипед. Вот я и написал свою библиотеку капчи для CodeIgniter. Прошу любить и жаловать :)

СКАЧАТЬ ALCAPTCHA (с примером)
(всего скачали раз)

Вообще говоря в примере всё описано, но я хочу ещё разик остановиться на подробном описании библиотеки.

Инсталляция

Достаточно скопировать файл alcaptcha.php в папку application/libraries. Подразумевается что в PHP на вашем сервере должна работать библиотека GD.

Кроме того в вашем приложении должна быть загружена библиотека session.
Всё. Инсталляция закончена.

Описание библиотеки

У библиотеки только 3 функции

  • generate_code($charlen) — функция генерации случайного кода заданной длины.
    На данный момент изображение оптимизировано на 4 символа. Если понадобится больше — нужно будет в коде вручную раздвинуть размер изображения.

    После генерации функция сохраняет код в сессии

  • image() — функция генерирующая изображение капчи. Код капчи загружается из сессии. Если не нравится изображение — ломать здесь :)
  • check($code) — функция проверки правильности введённого кода.

    Код функции тривиальное сравнение, однако функция для пользователя есть меньшее зло чем залезание в переменные сессии

Вот собственно вся библиотека. Но как это всё использовать?

Использование для простых форм

Для начала распишем использование библиотеки для простых форм без AJAX.
Последовательность действий примерно следующая:

  1. Загрузить библиотеку. Например в конструкторе контроллера
    $this->load->library('alcaptcha');
  2. В контроллере создадим функцию рисования капчи. В ней сделаем вызов функции из библиотеки:
        function captha_img($fiction_param) {
            echo $this->alcaptcha->image();
        }

    Во избежание кеширования, у функции рекомендую вводить случайный неиспользуемый параметр

  3. В функции контроллера, которая будет отображать форму с нашей капчей нужно запустить генерацию кода
     $this->alcaptcha->generate_code(4);

    Причём, поскольку для хранения кода используется сессия, генерация кода должна быть запущена прежде чем будет послан какой-то другой вывод.

  4. Отобразить рисунок на форме и ввести поле для ввода капчи. Например так:
    Введите капчу: 
    >
  5. Собствено и всё! Осталось проверить капчу на приёме:
    if ( $this->alcaptcha->check($this->input->post('captchacode'))) {
          echo "Введена правильная капча";
    }else {
          echo "Введена неправильная капча";
    }

Готово. Должно работать.

Использование для форм с AJAX

Зачем тут нужен AJAX? Иногда капча выдаёт настолько нечитаемый код, что требуется её перезагрузка. Но если это обычная форма — то пропадают все введённые данные! Как быть?

Именно для таких случаев, когда нужно обновить лишь фрагмент страницы, существует AJAX. Тем более что совсем недавно я разобрался как работать с библиотекой xajax в CodeIgniter

Итак последовательность действий немного усложняется. Для начала нужно установить XAJAX на свой CodeIgniter. Подробно инсталляция описана здесь. Далее по порядку:

  1. Загрузить библиотеку alcaptcha. (см. выше п.1)
  2. В контроллере нужно создать функцию рисования капчи.(см. выше п.2). Кстати, при использовании AJAX кеш броузера начинает делать своё чёрное дело, и тут случайный и неиспользуемый параметр окажется нам ещё более кстати!!
  3. В функции контроллера, которая будет отображать форму с нашей капчей нужно запустить генерацию кода. (см. выше п.3)
  4. В конструкторе контроллера загрузить библиотеку xajax и инициализировать её.
    $this->load->library('xajax');
    $this->xajax->registerFunction(
        array('refresh_captcha',&$this,'refresh_captcha')
        );
    $this->xajax->processRequest();
    

    В нашем примере мы назвали ajax-функцию refresh_captcha. В вашем случае функция может называться по-другому.

  5. Теперь займёмся отображением формы. Сначала нужно в заголовочной области подключить скрипты xajax
    xajax->getJavascript('/')?>

    В моём примере скрипты находятся в корневом каталоге сервера.

  6. Внедряем в форму рисунок и поле для ввода капчи. например так:
    
    
    
    обновить капчу Введите код подтверждения:
  7. Где вместо xxxxxx — подставьте имя вашего контроллера.

    Реализовать ajax-функцию. В ней нужно заново сгенерировать код и перегрузить изображение.
    Например так:

        function refresh_captcha() {
            $this->alcaptcha->generate_code(4);
            $objResponse = new xajaxResponse();
            $objResponse->Assign("capchaimg","innerHTML", "");
            return $objResponse;
        }
    
  8. Точно так же как и прежде — проверяем правильность введённой капчи. (см. выше п.5)

Послесловие

Вот собственно и всё. Осталось ещё много украшательства.

Например, настойчиво советую отключать autocomplete=off у полей ввода капчи. Во-первых, врядли попадут одинаковые значения, во-вторых выпадающий список у меня закрывал изображение капчи. Вот такие пироги.

А ещё я вместо слов «Обновить капчу» поставил изображение с кнопкой. Выглядит симпатичнее.

Спросите, почему ALCAPTCHA? Зто сокращение и Altesack и Captcha :)

ALCAPTCHA = Капча + AJAX + CodeIgniter: 6 комментариев

  1. Ice

    Я изменил на jquery =)

    load->library(‘alcaptcha’);
    }

    function index() {
    $this->alcaptcha->generate_code(4);
    ?>

    <?
    echo «This is simple form»;
    echo form_open(‘usingcaptcha/submit’);
    echo «Input code:»;
    echo «»;
    echo «refresh captcha«;
    echo form_input(‘captchacode’);
    echo form_submit(»,’Send’);
    echo form_close();
    echo »

    $(‘#capture’).ajaxForm({
    success: function(data) {
    $(‘#captimage’).attr({src : data});
    }
    });

    function refresh_captcha() {
    $(‘#randtext’).val(Math.random());
    $(‘#capture’).submit();
    }
    «;
    }

    function submit() {
    echo «This is form submit result»;
    if ( $this->alcaptcha->check($this->input->post(‘captchacode’))) {
    echo «Your captcha code is right»;
    }else {
    echo «Your captcha code is wrong»;
    }
    }

    function captha_img() {
    echo $this->alcaptcha->image();
    }

    function captcha_refresh() {
    $this->alcaptcha->generate_code(4);
    echo site_url(‘captcha/captha_img/’.rand(0,255));
    }
    }

  2. altesack Автор записи

    Jquery пока не владею, нужно будет расковырять.
    Спасибо за код, буду думать на досуге.
    Кстати, капчу собираюсь переделывать.

  3. Ice

    Если интересно — могу помочь с jquery, поидее ничего сложного там нет

  4. VItek

    Ice Инетересный подход! Мне понравился! работает отлично!

Комментарии запрещены.