1c_bitrix_captcha

Битрикс CAPTCHA — валидация форм и защита от спама

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

CAPTCHA в своих формах при помощи 1C-Битрикс

В формах у 1С-Битрикс капча присутствует, и включается в настройках компонента. Рассмотрим пример генерации CAPTCHA для своих веб-форм при помощи встроенных инструментов в данную CMS.

Для понимания разобьем весь процесс на 3 шага.

ШАГ I. Разбираем HTML код формы:

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

Как это выглядит:

битрикс капча

ШАГ II. Теперь пишем js, который отвечает за отправку формы (jquery — ajax):

Какие в скрипте есть нюансы:
1. В action мы записываем ссылку на файл, который обрабатывает данные из формы и записывает их в админку Битрикса;
2. Выводим на месте ошибки что поля заполнены не верно в случае если это так — когда js переменная data = error;
3. При помощи плагина fancybox, мы сначала закрываем окно с нашей формой, а потом открываем окно с благодарностью, универсальное для всех форм.

Подключение jquery на сайте — обязательно.

ШАГ III. Страница для нашей формы — /ajax/writeUs.php :

В самом начале мы проверяем — правильная ли у нас капча, если нет то передаем слово error и скриптом проверяем есть у нас ошибка или нет. Разбирать подробно как добавить поля в инфоблок, отправить почтовое сообщение в данной статье мы не будем (но самые любопытные смогут прочитать код и понять как это делается 🙂 ).

Пара слов о блоке с формой:

Как вы видите, у нас есть скрытый инпут в который мы пишем значение капчи и тег с картинкой, в которую и передается CAPTCHA ID.

Как в битриксе обновить капчу без перезагрузки страницы

В нашей форме уже есть «защита от спама». Очень нужная вещь, обновление картинки — на случай если плохо читается, или просто не видно.

Взглянем на наш код теперь:

Как видно из кода выше, мы добавили текстовую ссылку на смену картинки. Теперь напишем скрипт, который будет менять код для родительского блока captcha-block:

Чуть ниже код, который отвечает за генерацию капчи, а пока что давайте разберемся что тут происходит.
1. Мы пишем что скрипт срабатывает когда загружена все элементы страницы — документ рэди;
2. Регистрируем обработчик событий по клику на ссылку с классом reloadCaptcha в блоках с классом captcha-block ;
3. Записываем объект в переменную $parent, который и является нашим родительским блоком (у каждой формы он свой, а нам надо менять только внутри того, где мы кликнули);
4. Далее мы отправляем запрос на страницу, которая находится в корне сайта, в папке /ajax/ — имя страницы вы уже поняли 🙂 ;
5. Полученный результат (data) — мы записываем и в переменную внутри тега img и в скрытый инпут, который в дальнейшем и проверяется при отправке формы.

Код для страницы /ajax/reload_captcha.php:

Внимательный читатель догадался, показ и исчезновение блока .white-block находится в комментариях. Из кода я его убрал — в другой статье речь идет про обычный прелоадер во время выполнения запроса к серверу. Но на проекте был настолько быстрый отклик, что в прелоадере просто отпала вся необходимость, и капча генерировалась очень быстро.

Благодарю автора статьи за отличное решение, ссылка на оригинал:
https://dev.1c-bitrix.ru/community/webdev/user/61475/blog/2818/#like

Если на вашем сайте необходимо выполнить работы по защите от спама в веб-формах при помощи CAPTHCA, обращайтесь ко мне за помощью.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *