RealCaptcha

Опубликовано: 07 Окт 2015

Перепечатанно отсюда.

Каждый веб-программист понимает важность защиты форм обратной связи от спам ботов. Если в MODX Evolution была встроенная аккуратная каптча, то в Revolution от неё отказались и предложили в качестве альтернативы гугловскую ReCaptcha, которая искажает символы так, что с первой попытки угадать их бывает крайне сложно.

Поискав информацию на тему альтернативной каптчи для MODX Revo я обнаружил что выбор очень скуден. Есть готовый компонент «Qaptcha», основанный на jquery плагине и пару статей на тему, как сделать каптчу для MODX самому, но толком они ничего не объясняют. Поэтому я решил написать свой вариант простой каптчи для MODX Revo. Свою каптчу я назвал «RealCaptcha» и на её основе собрал пакет для MODX Revolution. Это мой первый опыт сборки пакетов, поэтому возможны какие-то баги, не судите строго. Если можете помочь в улучшении приведенной сборки, то пишите в комментариях.

Скачать «RealCaptcha» 1.0.4

Для установки пакета скопируйте его в директорию /core/packages/, а затем в «Система -> Управление пакетами», нажмите «Искать пакеты локально».

Пакет состоит из одного чанка и сниппета

Чанк выводит каптчу и поле для ввода символов с неё:

[ [$RealCaptcha]]

Сниппет производит проверку правильности введенных символов с каптчи. Если они совпадают, то возвращает «true», если нет - «false»:

[ [!RealCaptchaValid]]

Изображение каптчи генерируется скриптом «kcaptcha», который распаковывается по умолчанию в директорию:/assets/components/realcaptcha/kcaptcha/. Там лежит конфигурационный файл, изменяя параметры которого, Вы можете добиться нужного уровня искажения изображения каптчи.

Привязка RealCaptcha к FormIt

Исходим из того, что форма обратной связи у вас уже настроена и работает. В таком случае для привязки каптчи внутри формы обратной связи пропишите чанк

[ [$RealCaptcha]]

(где-нибудь перед кнопкой Отправки), а в вызове сниппета «FormIt» пропишите дополнительные параметры - «validate» и «customValidators». Вот как это выглядит у меня:

[ [!FormIt?
      &hooks=`email`
      &emailTpl=`MyLetterChunk`
      &emailTo=`exemple@mail.ru`
      &successMessage=`Письмо успешно отправлено.`
      &emailSubject=`Обратная связь exemple.ru`
      &validate=`captcha:RealCaptchaValid, name:required, email:email:required`
      &customValidators=`RealCaptchaValid`
]]

Конечный результат будет выглядеть примерно так:

Чтобы при неправильно введенных символах выводилась ошибка, в форме или перед ней прописываем плейсхолдер:

[ [!+fi.error.captcha]]

Простая каптча для формы обратной связи готова.

Привязка RealCaptcha к Quip

Теперь рассмотрим каким образом можно привязать «RealCaptcha» к комментариям «Quip».

Сначала давайте выведем нашу каптчу на форме отправки нового сообщения. За генерацию этой формы отвечает сниппет «QuipReply», а за оформление - чанк, который указывается в качестве параметра - «&tplAddComment»:

[ [!QuipReply?
      &thread=`realcaptcha-196`
      &moderate=`0`
      &tplAddComment=`comment-chank`
]]

В этом чанке перед кнопкой «Отправить», вызываем чанк, отвечающий за вывод каптчи, а так же код, который будет выводить ошибку в случае неверно введенных символов:

<span class="quip-error"></span>
[ [$RealCaptcha]]

Осталось дело за малым - вызвать в коде компонента «Quip» наш сниппет проверки правильности введенной каптчи. Для этого открываем файл /core/components/quip/controllers/web/ThreadReply.php и в функцию «handlePost()» прописываем следующий код:

/* RealCaptcha */
$fields['captcha'] = strip_tags($fields['captcha']);
$validate = $this->modx->runSnippet('RealCaptchaValid',array('component' => 'Quip','QuipValue' => $fields['captcha']));
if ($validate!='RealCaptchaTrue') $errors['RealCaptcha'] = 'Ошибка. Каптча введена неверно!';

В коде мы вызываем сниппет «RealCaptchaValid» с параметром «component=Quip» и при отрицательном результате проверки каптчи генерируем ошибку. Теперь всё должно работать.

В завершение хочется поблагодарить человека с ником Anovoselof, который описал способ привязки своей каптчи к комментариям в MODX Revolution. Я всего лишь оформил всё это в качестве пакета и упростил использование.

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: