Error reload the page bitrix captcha

Битрикс: в поисках потерянной капчи

Представляю Вашему вниманию короткую статью о том, как искать объяснение непонятных явлений в битриксе. В качестве примера приведу историю — когда-то, еще на заре изучения системы, мне удалось вывести в форме авторизации капчу. Причем как это вышло, выяснить не получилось. И вот сейчас, кастомизируя очередной шаблон компонента авторизации, обнаружился код ее выводящий. Спортивный интерес и отсутствие информации в официальной документации (хотя вполне может быть, я просто не нашел то что нужно) подтолкнули меня на маленькое расследование.

Первым делом, надо посмотреть в шаблоне компонента элемент массива, в котором приходит флаг показа капчи — несложно увидеть, что это $arResult[«CAPTCHA_CODE»]. Массив arResult формируется внутри компонента, поэтому следующим шагом стало изучение содержимого bitrixcomponentsbitrixsystem.auth.formcomponent.php. Найденный фрагмент кода показал, что за капчу отвечает функция NeedCAPTHAForLogin, которая по логину пользователя решает, выводить ее или нет.

Api-help битрикса о назначении NeedCAPTHAForLogin рассказывать отказался, в настройках пользователя заветной галочки не оказалось. Остается найти и посмотреть исходник этой загадочной функции. С помощью Total Commander (или аналога) в директории bitrixmodulesmain ищем файлы, содержащие текст NeedCAPTHAForLogin. Напомню, что такие исследования доступны счастливым обладателям версии в исходных кодах. Итак, результат поиска — файлик bitrixmodulesmainclassesgeneralmain.php. Находим кусок кода функции NeedCAPTHAForLogin, который ставит все точки над i

Оказывается, вывод капчи в форме авторизации регулируется в настройках групповой политики неприметной галочкой в самом конце списка.

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

7 комментариев “ Битрикс: в поисках потерянной капчи ”

день добрый Алексей. я только разбираюсь в битриксе, ваш блог очень помогает, спасибо большое!

Спасибо за отзыв, Sergey! Рад стараться:)

Столкнулся с необходимостью отодвинуть вывод капчи не на третью попытку а дальше. Пересмотрел все настройки в разделе «настройки продукта», начал ковырять компонент, единственное описание NeedCAPTHAForLogin в интернете нашел только у вас.
Огромное спасибо за статью!

Стандартная уже мысль, при очередном затыке — надо посмотреть у Валеева 🙂
В очередной раз нашел решение. Спасибо!

Спасибо! Реально помогла статья! Еще запутывает то, что в данной ситуации API битрикса при авторизации через $USER->Login() выдает сообщение «Неверный логин или пароль.», а про капчу ни слова!

Большое спасибо. Разбирался в коде и застрял именно на функции NeedCAPTHAForLogin

Файлы формата CHM обновляются ежемесячно, тем не менее, возможно некоторое отставание их от онлайновой версии курса.

Источник

Отсутствие изображений каптчи (CAPTHA) в битриксе.

На днях возникла проблема с отображением CAPTCHA

Начал разбирать ситуацию. Проблем с правами и доступом к разделу /bitrix/tools/ не было.

Далее в процессе поиска решения, натыкался на статьи, которые говорили об открывающих и закрывающих тегах php в служебных файлах.

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

Один из интернет-пользователей aVadim описал ситуацию следующим образом:

«Если кому интересно, то проблема была в том, что конфиг одного из плагинов был сохранен в формате «UTF-8 c BOM».
Казалось бы, при чем тут капча? Я понимаю это так: сайт работает на niginx + php-fpm. И при загрузке файлов конфига, загружался, кроме прочего, и этот файл с BOM, и эти злосчастные три байта улетали в выходной буфер сервера. А потом, при выводе сгенерированной движком капчи, они встраивались в бинарный изображения, ломая формат картинки.
Интересно то, что при работе с apache в подобных случаях возникают ошибки от того, что идет отправка заголовков функцией header(), в то время как уже пошел вывод клиенту. А вот nginx, видимо, работает иначе, BOM-коды буферизирует, но клиенту сразу не отправляет, поэтому ошибок явных при использовании header() не возникает.»

Благодарен за решение, потому как именно пересохранение файлов /bitrix/php_interface/dbconn.php, /bitrix/php_interface/after_connect_d7.php, и /bitrix/php_interface/after_connect.php в формате UTF-8 без BOM решило мою проблему.

Успехов вам и быстрых поисков возникших проблем!

Источник

Битрикс 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 находится в комментариях. Из кода я его убрал — в другой статье речь идет про обычный прелоадер во время выполнения запроса к серверу. Но на проекте был настолько быстрый отклик, что в прелоадере просто отпала вся необходимость, и капча генерировалась очень быстро.

Источник

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

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

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

Возможно эта тема где-то была, но на форуме не нашел, поэтому решил написать тут у себя, чтобы полежало..

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

В конкретном примере я расскажу, как я кастомизировал компонент iblock.element.add.form, но думаю никому не составит труда применить это решение и к другим компонентам.

Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:

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

моя капча выглядела так:

а во время подгрузки новой капчи — так:

ссылка reloadCaptcha — есть ссылка, по клику которой будет обновляться капча. В лэнг-файле я прописал $MESS [‘RELOAD_CAPTCHA’] = ‘Поменять картинку’

Источник

Не отображается каптча при авторизации в админке!

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

права на папку и файл выставил 755 — bitrix/tools/captcha.php

Далее, в файле init.php:

IsAdmin()) <
$bt = debug_backtrace();
$bt = $bt[0];
$dRoot = $_SERVER[«DOCUMENT_ROOT»];
$dRoot = str_replace(«/», «\», $dRoot);
$bt[«file»] = str_replace($dRoot, «», $bt[«file»]);
$dRoot = str_replace(«\», «/», $dRoot);
$bt[«file»] = str_replace($dRoot, «», $bt[«file»]);
?>

IsAdmin()) <
$dump=»»;
$files = $_SERVER[«DOCUMENT_ROOT»].»/_dump.html»;
$fp = fopen( $files, «a+» );
fwrite( $fp, $dump);
fclose( $fp );
if ($die) die();
>
>

/**
* Функция выводит отладочную информацию (замена pre+print_r+pre) на экран
*
* @param any $obj — объект, значение которого выводт
* @param boolean $admOnly — функци¤ доступна только администартору
* @param boolean $die — остановить выполнение скрипта
* @return boolean
*/
function p($obj,$admOnly=true,$d=false)
<
global $USER;

if($USER->IsAdmin() || $admOnly===false)
<
echo «»;

в конце ставил закрывающий символ кода, НЕ СРАБОТАЛО!

вобще удаляю файл init.php, никакого эффекта!

чистил кэш bitrix/cache/

Библиотека FREE TYPE — присутствует и работает!

в базе таблица b_captcha не битая! даже сделал восстановление на всякий, все равно не работает каптча!

Кто, что может подсказать в чем может быть проблема и как быть дальше?

Источник

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

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

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

Возможно эта тема где-то была, но на форуме не нашел, поэтому решил написать тут у себя, чтобы полежало..

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

В конкретном примере я расскажу, как я кастомизировал компонент iblock.element.add.form, но думаю никому не составит труда применить это решение и к другим компонентам.

Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:

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

моя капча выглядела так:

а во время подгрузки новой капчи — так:

ссылка reloadCaptcha — есть ссылка, по клику которой будет обновляться капча. В лэнг-файле я прописал $MESS [‘RELOAD_CAPTCHA’] = ‘Поменять картинку’

Источник

Отсутствие изображений каптчи (CAPTHA) в битриксе.

На днях возникла проблема с отображением CAPTCHA

Начал разбирать ситуацию. Проблем с правами и доступом к разделу /bitrix/tools/ не было.

Далее в процессе поиска решения, натыкался на статьи, которые говорили об открывающих и закрывающих тегах php в служебных файлах.

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

Один из интернет-пользователей aVadim описал ситуацию следующим образом:

«Если кому интересно, то проблема была в том, что конфиг одного из плагинов был сохранен в формате «UTF-8 c BOM».
Казалось бы, при чем тут капча? Я понимаю это так: сайт работает на niginx + php-fpm. И при загрузке файлов конфига, загружался, кроме прочего, и этот файл с BOM, и эти злосчастные три байта улетали в выходной буфер сервера. А потом, при выводе сгенерированной движком капчи, они встраивались в бинарный изображения, ломая формат картинки.
Интересно то, что при работе с apache в подобных случаях возникают ошибки от того, что идет отправка заголовков функцией header(), в то время как уже пошел вывод клиенту. А вот nginx, видимо, работает иначе, BOM-коды буферизирует, но клиенту сразу не отправляет, поэтому ошибок явных при использовании header() не возникает.»

Благодарен за решение, потому как именно пересохранение файлов /bitrix/php_interface/dbconn.php, /bitrix/php_interface/after_connect_d7.php, и /bitrix/php_interface/after_connect.php в формате UTF-8 без BOM решило мою проблему.

Успехов вам и быстрых поисков возникших проблем!

Источник

Битрикс: в поисках потерянной капчи

Представляю Вашему вниманию короткую статью о том, как искать объяснение непонятных явлений в битриксе. В качестве примера приведу историю — когда-то, еще на заре изучения системы, мне удалось вывести в форме авторизации капчу. Причем как это вышло, выяснить не получилось. И вот сейчас, кастомизируя очередной шаблон компонента авторизации, обнаружился код ее выводящий. Спортивный интерес и отсутствие информации в официальной документации (хотя вполне может быть, я просто не нашел то что нужно) подтолкнули меня на маленькое расследование.

Первым делом, надо посмотреть в шаблоне компонента элемент массива, в котором приходит флаг показа капчи — несложно увидеть, что это $arResult[«CAPTCHA_CODE»]. Массив arResult формируется внутри компонента, поэтому следующим шагом стало изучение содержимого bitrixcomponentsbitrixsystem.auth.formcomponent.php. Найденный фрагмент кода показал, что за капчу отвечает функция NeedCAPTHAForLogin, которая по логину пользователя решает, выводить ее или нет.

Api-help битрикса о назначении NeedCAPTHAForLogin рассказывать отказался, в настройках пользователя заветной галочки не оказалось. Остается найти и посмотреть исходник этой загадочной функции. С помощью Total Commander (или аналога) в директории bitrixmodulesmain ищем файлы, содержащие текст NeedCAPTHAForLogin. Напомню, что такие исследования доступны счастливым обладателям версии в исходных кодах. Итак, результат поиска — файлик bitrixmodulesmainclassesgeneralmain.php. Находим кусок кода функции NeedCAPTHAForLogin, который ставит все точки над i

Оказывается, вывод капчи в форме авторизации регулируется в настройках групповой политики неприметной галочкой в самом конце списка.

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

7 комментариев “ Битрикс: в поисках потерянной капчи ”

день добрый Алексей. я только разбираюсь в битриксе, ваш блог очень помогает, спасибо большое!

Спасибо за отзыв, Sergey! Рад стараться:)

Столкнулся с необходимостью отодвинуть вывод капчи не на третью попытку а дальше. Пересмотрел все настройки в разделе «настройки продукта», начал ковырять компонент, единственное описание NeedCAPTHAForLogin в интернете нашел только у вас.
Огромное спасибо за статью!

Стандартная уже мысль, при очередном затыке — надо посмотреть у Валеева 🙂
В очередной раз нашел решение. Спасибо!

Спасибо! Реально помогла статья! Еще запутывает то, что в данной ситуации API битрикса при авторизации через $USER->Login() выдает сообщение «Неверный логин или пароль.», а про капчу ни слова!

Большое спасибо. Разбирался в коде и застрял именно на функции NeedCAPTHAForLogin

Файлы формата CHM обновляются ежемесячно, тем не менее, возможно некоторое отставание их от онлайновой версии курса.

Источник

Сломалась CAPTCHA

только капча не работает? А графики веб-аналитики строятся?

constanta.dn.ua
модуля веб-аналитики у нас нет. редакция — «малый бизнес»

попробовала поменять капчи через панель администрирования. не работала капча «волна», кот. работала со шрифтом bitrix_captcha.ttf. с font.ttf — все ок.

но как-то через раз. вот «негатив» использует второй тип шрифта — но тоже или вобще не отображается, или 1-2 символа.

произошло это после смены хостинга.

alenka, похоже у вас на сайте изменен сам механизм генерации капчи, это видно по 4-м символам вместо 5, только до ума её так и не довели.

Можете показать код файла /bitrix/tools/captcha.php?

я думаю, что тут прав где-то для чего-то не хватает.

Источник

Не отображается каптча при авторизации в админке!

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

права на папку и файл выставил 755 — bitrix/tools/captcha.php

Далее, в файле init.php:

IsAdmin()) <
$bt = debug_backtrace();
$bt = $bt[0];
$dRoot = $_SERVER[«DOCUMENT_ROOT»];
$dRoot = str_replace(«/», «\», $dRoot);
$bt[«file»] = str_replace($dRoot, «», $bt[«file»]);
$dRoot = str_replace(«\», «/», $dRoot);
$bt[«file»] = str_replace($dRoot, «», $bt[«file»]);
?>

IsAdmin()) <
$dump=»»;
$files = $_SERVER[«DOCUMENT_ROOT»].»/_dump.html»;
$fp = fopen( $files, «a+» );
fwrite( $fp, $dump);
fclose( $fp );
if ($die) die();
>
>

/**
* Функция выводит отладочную информацию (замена pre+print_r+pre) на экран
*
* @param any $obj — объект, значение которого выводт
* @param boolean $admOnly — функци¤ доступна только администартору
* @param boolean $die — остановить выполнение скрипта
* @return boolean
*/
function p($obj,$admOnly=true,$d=false)
<
global $USER;

if($USER->IsAdmin() || $admOnly===false)
<
echo «»;

в конце ставил закрывающий символ кода, НЕ СРАБОТАЛО!

вобще удаляю файл init.php, никакого эффекта!

чистил кэш bitrix/cache/

Библиотека FREE TYPE — присутствует и работает!

в базе таблица b_captcha не битая! даже сделал восстановление на всякий, все равно не работает каптча!

Кто, что может подсказать в чем может быть проблема и как быть дальше?

Источник

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

Возможно эта тема где-то была, но на форуме не нашел, поэтому решил написать тут у себя, чтобы полежало..

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

В конкретном примере я расскажу, как я кастомизировал компонент iblock.element.add.form, но думаю никому не составит труда применить это решение и к другим компонентам.

Первым шагом мы копируем шаблон в свое пространство имен как обычно, затем редактируем место, где выводится капча таким образом:

<div id="captchaBlock">
   <div id="whiteBlock">
      <img id="loaderImg" src="<?=SITE_TEMPLATE_PATH?>/i/ajax-loader.gif" />
   </div>
   <input id="captchaSid" type="hidden" name="captcha_sid" value="<?=$arResult['CAPTCHA_CODE']?>" />
   <img id="captchaImg" src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult['CAPTCHA_CODE']?>" width="180" height="40" alt="CAPTCHA" />
   <a id="reloadCaptcha"><?=GetMessage('RELOAD_CAPTCHA')?></a>
</div>

в стилях нужно прописать

/*--CAPTCHA--*/
#captchaBlock{position:relative;}
#captchaBlock #whiteBlock{display:none; text-align:center; position:absolute; background-color:#FFF; width:180px; height:40px;}
#captchaBlock #whiteBlock #loaderImg{margin-top:3px;}

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

тут

.

моя капча выглядела так:

а во время подгрузки новой капчи — так:

ссылка reloadCaptcha — есть ссылка, по клику которой будет обновляться капча. В лэнг-файле я прописал $MESS [‘RELOAD_CAPTCHA’] = ‘Поменять картинку’

В файле шаблона с формой добавить:

<script type="text/javascript">
   $(document).ready(function(){
      $('#reloadCaptcha').click(function(){
         $('#whiteBlock').show();
         $.getJSON('<?=$this->__folder?>/reload_captcha.php', function(data) {
            $('#captchaImg').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
            $('#captchaSid').val(data);
            $('#whiteBlock').hide();
         });
         return false;
      });
   });
</script>

Предварительно библиотека jquery должна быть подключена.
В папке шаблона компонента, там где лежит файл template.php, создать файл reload_captcha.php со следующим содержанием:

<?php
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
echo json_encode($APPLICATION->CaptchaGetCode()); 
?>

вот и все)

Назад в раздел

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

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

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

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

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>

<?include_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/classes/general/captcha.php");
$cpt = new CCaptcha();
$captchaPass = COption::GetOptionString("main", "captcha_password", "");
if(strlen($captchaPass) <= 0)
{
    $captchaPass = randString(10);
    COption::SetOptionString("main", "captcha_password", $captchaPass);
}
$cpt->SetCodeCrypt($captchaPass);
?>

<form id="writeUs" method="post" action="/ajax/writeUs.php" class="zayavkaform js-form">
	<div class="zayavwrap">
		<h1>Написать нам</h1>
		<input name="contactmail" type="hidden" value="<?=$email?>">
		<p>Контактное лицо<span>*</span></p>            
		<input required="" name="fio" type="text" class="inptext">    

		<p>Номер телефона<span>*</span></p>            
		<input required="" name="phone" type="text" class="inptext">    

		<p>Введите код с картинки<span>*</span></p>
		<input class="captchaSid" name="captcha_code" value="<?=htmlspecialchars($cpt->GetCodeCrypt());?>" type="hidden">
		<table>
			<tr>
				<td><input class="inptext" required="" id="captcha_word" name="captcha_word" type="text"></td>
				<td><img class="captchaImg" src="/bitrix/tools/captcha.php?captcha_code=<?=htmlspecialchars($cpt->GetCodeCrypt());?>"></td>
			</tr>
		</table>
		<input type="submit" value="ОТПРАВИТЬ">
		<div class="error-text"></div>
	</div>
</form>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

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

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

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

$('.js-form').on('submit', function(){
    var $this = $(this);
    $.ajax({
        url: $this.attr('action'),
        type: 'post',
        cache: false,
        data: $this.serialize(),
    }).done(function(data){
        if (data == 'error') {
            $this.find('.error-text').text('Вы не правильно заполнили поля!');
        } else {
            //$this.html('<h1>'+data+'</h1>');
            parent.$.fancybox.close();
            $.fancybox({
                href: '#finish',
                closeBtn: true
            });
        }
        console.log(data);
    }).error(function(){
        console.log('There was an error');
    });

    return false;
});

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

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

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

<?php require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");

if(!$APPLICATION->CaptchaCheckCode($_POST["captcha_word"], $_POST["captcha_code"])) {
  echo 'error';
} else {

  CModule::IncludeModule("iblock");

  $el = new CIBlockElement;
  $arLoadProductArray = Array(
      "MODIFIED_BY" => $USER->GetID(),
      "IBLOCK_SECTION_ID" => false,
      "IBLOCK_ID" => 31,
      "NAME" => htmlspecialchars($_POST['fio']).' ('.htmlspecialchars($_POST['phone']).')',
      "PREVIEW_TEXT" => 'Контактное лицо: '.htmlspecialchars($_POST["fio"])."rn".
                        'Название организации: '.htmlspecialchars($_POST["name"])."rn".
                        'Телефон: '.htmlspecialchars($_POST["phone"])."rn".
                        'E-mail: '.htmlspecialchars($_POST["email"])."rn".
                        'Вопрос: '.htmlspecialchars($_POST["text"]),
      "ACTIVE" => "Y"
  );
  $ELEMENT_ID = $el->Add($arLoadProductArray);

  $arEventFields = array(
      "EMAIL_FROM"   => FORM_SENDER_EMAIL,
      "EMAIL_TO"     => FORM_RECEIVE_EMAIL,
      "NAME"         => htmlspecialchars($_POST["fio"]),
      "COMPANY_NAME" => htmlspecialchars($_POST["name"]),
      "PHONE"        => htmlspecialchars($_POST["phone"]),
      "EMAIL"        => htmlspecialchars($_POST["email"]),
      "QUESTION"     => htmlspecialchars($_POST["text"])
  );

  CEvent::Send("SEND_FEEDBACK", "s1", $arEventFields);

  echo '<span class="form-success">Спасибо! Форма отправлена.</span>';

}

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

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

<p>Введите код с картинки<span>*</span></p>
<input class="captchaSid" name="captcha_code" value="<?=htmlspecialchars($cpt->GetCodeCrypt());?>" type="hidden">
<table>
	<tr>
		<td><input class="inptext" required="" name="captcha_word" type="text"></td>
		<td><img class="captchaImg" src="/bitrix/tools/captcha.php?captcha_code=<?=htmlspecialchars($cpt->GetCodeCrypt());?>"></td>
	</tr>
</table>

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

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

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

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

<div class="captcha-block">
	<p>Введите код с картинки<span>*</span></p>
	<input class="captchaSid" name="captcha_code" value="<?=htmlspecialchars($cpt->GetCodeCrypt());?>" type="hidden">
	<table>
		<tr>
			<td><input class="inptext" required="" id="captcha_word" name="captcha_word" type="text"></td>
			<td><img class="captchaImg" src="/bitrix/tools/captcha.php?captcha_code=<?=htmlspecialchars($cpt->GetCodeCrypt());?>"></td>
		</tr>
	</table>
	<a class="captcha-link reloadCaptcha" href="#">Поменять картинку</a>
</div>

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

<script type="text/javascript">
   $(document).ready(function(){
      $('.captcha-block').on('click', '.reloadCaptcha', function(){
      	var $parent = $(this).closest('.captcha-block');
         //$parent.find('.whiteBlock').show();
         $.getJSON('/ajax/reload_captcha.php', function(data) {
            $parent.find('.captchaImg').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
            $parent.find('.captchaSid').val(data);
            //$parent.find('.whiteBlock').hide();
         });
         return false;
      });
   });
</script>

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

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

<?php
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
echo json_encode($APPLICATION->CaptchaGetCode()); 
?>

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

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

• Что такое капча и какие с ней бывают проблемы
• Google-капча: принцип работы
• Как подключить reCAPTHCA в Битрикс
  • Решения из MarketPlace
  • Как сделать самим
• Выводы

Что такое капча и какие с ней бывают проблемы

Что такое “капча” сегодня знает даже школьник. А вот “зачем” — хорошо знают владельцы сайтов.

Любая капча это палка о двух концах. Сложная капча хорошо защищает от спам-роботов, но она же мешает клиентам отправить заявку или заказ. Простая — наоборот, удобна для людей и уязвима для роботов.
На помощь, с девизом “Просто для людей, сложно для роботов”, спешит Google reCapthca.

Забегая вперед, скажу что мы сделали свой клевый/универсальный/не требующий программирования модуль для замены стандартной капчи на reCaptcha для Битрикс.

Google-капча: принцип работы

reCAPTCHA представляет из себя небольшой виджет. Для большинства пользователей он выглядит как просто поле с галочкой.
В некоторых случаях потребуется пройти небольшое задание, чтобы доказать что Вы не робот. Например, Google может попросить Вас выбрать из списка изображения с определенным объектом, или выделить на одном изображении нужный объект:
Потребуют ли от Вас проходить такое задание или нет зависит от того, что Google знает о Вас.

Если Ваши действия в интернете похожи на человеческие (вы читаете разные сайты, авторизованы в почте, вводите поисковые запросы) — скорее всего проходить квест не потребуется.

Работа большинства капч основана на задаче распознавания текста. Роботы плюс-минус научились их разгадывать. Google reCaptcha 2.0 пошла дальше и использует задачи распознавания изображений. Пока роботы угадывают изображения сильно хуже людей.

Как подключить reCAPTHCA в Битрикс

Мы бы хотели найти такую волшебную таблетку, которая решит эту задачу. Но наше исследование показывает что пока ее нет. Поэтому кроме обзора MarketPlace-решений мы опишем наше видение архитектурно-правильных вариантов такой интеграции.

Решения из MarketPlace

Маркетплейс предлагает несколько решений для подключения рекапчи. Среди них есть платные и бесплатные. Все обещают примерно одинаковую функциональность: включение и отключение рекапчи на всем сайте буквально в один клик. Нужно только зарегистрировать Ваш домен на сайте www.google.com/recaptcha и вписать 2 полученных ключа в настройках модуля.

Наиболее больные острые вопросы при подключении рекапчи:

• поддержка нескольких капч на странице;
• капча во всплывающем окне, которое потенциально загружается по AJAX.

Как же справляются с этими задачами готовые решения Marketplace?

Мы проверили на примере пары самых популярных (по количеству установок) решений которые можно попробовать без покупки.

Модуль “reCaptchaFree”

Доступные настройки:

• поддержка многосайтовости — можно настроить рекапчу для каждого сайта в отдельности;
• возможность отключения рекапчи без удаления модуля. Правда здесь обнаружилась проблема — при деактивации рекапчи с помощью этой настройки скрипты js все равно подключались на странице;
• настройка визуального отображения виджета и т.д.

Порадовало, что модуль оказался работоспособен на формах в модальном окне и AJAX-форме. Однако, для работы некоторых компонентов в режиме ajax требуется вносить изменения в код шаблона, что неудобно, если таких компонентов на сайте много.

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

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

Модуль “Google ReCaptcha – улучшенная капча и защита от ботов”

Состав настроек невелик: только ключи. Поэтому для отключения рекапчи придется удалять модуль. Что касается работоспособности, то с обычными формами модуль справился неплохо. А вот с некоторыми компонентами в режиме Ajax вызвал ошибки. Другие модули (например, Google reCAPTCHA | продвинутая капча) из MarketPlace не предоставляют возможность для тестирования.

Как сделать самим

Если по каким-то причинам нас не устраивают готовые решения  или нам требуется рекапча только в одной форме на сайте, то мы можем сами ее подключить. Мы знаем 3 правильных способа это сделать.

Кастомизация компонента и шаблона компонента

Капча выводится в шаблонах некоторых компонентов. Правильность ее ввода проверяется в компоненте. Почему так? — Потому что: Так архитектурно правильно. MVC и все такое. Шаблон компонента кешируется и выполняется не всегда. Следовательно, без кастомизации компонента здесь никак не обойтись. Прежде, чем кастомизировать компонент, для работы с капчей удобно создать отдельный класс.

class GoogleReCaptcha

{

public static function getPublicKey() { return ‘your_public_key’;}

public static function getSecretKey() { return ‘your_secret_key’;}

/**

   * @return array — if validation is failed, returns an array with errors, otherwise — empty array. This format is expected by component.

   */

  public static function checkClientResponse()

  {

      $context = BitrixMainApplication::getInstance()->

getContext();

      $request = $context->getRequest();

      $captchaResponse = $request->getPost(«g-recaptcha-response»);

      if($captchaResponse)

      {

          $url = ‘https://www.google.com/recaptcha/api/siteverify’;

          $data = array(‘secret’ => static::getSecretKey(), ‘response’

=> $captchaResponse);

          $httpClient = new HttpClient();

          $response = $httpClient->post($url,$data);

          if($response)

              $response = BitrixMainWebJson::

decode($response,true);

          if(!$response[‘success’]) {

              return $response[‘error-codes’];

          }

          return array();

      }

      return array(‘no captcha response’);

  }

}

Пример подключение рекапчи в форму регистрации Используем компонент bitrix:main.register. В этом компоненте предусмотрена стандартная капча.
Скопируем компонент в наше пространство имен директории  /bitrix/components/. Найдем в коде компонента проверку ввода каптчи. Фрагмент из файла  component.php:

// check captcha

   if ($arResult[«USE_CAPTCHA»] == «Y»)

   {

       if (!$APPLICATION->CaptchaCheckCode($_REQUEST[«captcha_word»], $_REQUEST[«captcha_sid»]))

           $arResult[«ERRORS»][] = GetMessage(«REGISTER_WRONG_CAPTCHA»);

   }

В данном фрагменте заменим проверку стандартной капчи на нашу проверку рекаптчи  Google:

if ($arResult[«USE_CAPTCHA»] == «Y»)

   {

       $errorMessages = GoogleReCaptcha::checkClientResponse();

if( !empty($errorMessages)))

           $arResult[«ERRORS»][] = $errorMessages;

   }

Затем отредактируем шаблон компонента. Заменим вывод стандартной капчи на рекапчу:

Фрагмент из файла template.php:

<div class=»g-recaptcha» data-sitekey=»<?=GoogleReCaptcha::getPublicKey()?>»>

Изменения только компонента недостаточно для работы капчи. Также необходимо подключить скрипт для взаимодействия с сервисом. Сделать это следует в файле component_epilog.php компонента.

BitrixMainPageAsset::getInstance()->addString(

“<script src=’https://www.google.com/recaptcha/api.js’></script>”);

В результате получим:

Подключение рекапчи с помощью JS

Можно попробовать пойти другим путем, чтобы не пришлось кастомизировать десятки компонентов. А именно:

1. При отображении страницы в браузере найдем и подменим все bitrix-капчи на reCAPTCHA.

2. Будем ловить заполнение форм на любой страницы (все POST-хиты). Если в запросе есть разгаданная пользователем reCAPTHCA заставим битрикс думать, что пользователь разгадал bitrix-капчу.

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

Данные HTTP запросов компоненты получают из суперглобальных переменных $_POST, $_GET, $_REQUEST. Для проверки капчи компонент ожидает переменные captcha_sid и captcha_word. captcha_word при отправке формы с рекапчей будет пустая. Ее мы возьмем из таблицы b_captcha.

Изменять суперглобальные переменные  нужно до отработки компонентов. Для этого можно использовать события, которые вызываются в процессе выполнения страницы, а именно OnPageStart или OnBeforeProlog. Вот так будет выглядеть PHP-часть:

$context = BitrixMainApplication::getInstance()-&gt;

getContext();

$request = $context->getRequest();

$captchaResponse = $request->getPost(«g-recaptcha-response»);

if($captchaResponse)

{

if(!GoogleReCaptcha::checkClientResponse())

 {

$captchaSid = $request->getPost(«captcha_sid»);

    if($captchaSid)

    {

//Т.к. нет API, позволяющего получить слово капчи по ID, делаем запрос напрямую к БД

       $dbRes = BitrixMainApplication::getConnection()->query(

«SELECT CODE FROM b_captcha WHERE id='».$captchaSid.»‘»);

       if($res = $dbRes->fetch())

       {

          if($res[‘CODE’])

          {

             $_REQUEST[‘captcha_word’] = $_POST[‘captcha_word’] = $res[‘CODE’];

          }

       }

    }

 }

}

Если пользователь вводил рекапчу и успешно ее прошел, то мы подставляем верное значение captcha_word. В противном случае при проверке капчи компонент выдаст ошибку.

Подключение рекапчи с помощью OnEndBufferContent

Замену капчи мы можем осуществлять не только на клиентской части с помощью JS, но и на серверной. Для этого снова используем событие выполнения страницы OnEndBufferContent.

Пример замены капчи на стороне сервера:

public static function OnEndBufferContent(&$content)

{

//Для форм загружаемых по ajax добавляем вызов скрипта рендера рекапчи

$renderScript = «»;

$htmlId = «»;

$context = BitrixMainApplication::getInstance()->getContext();

$request = $context->getRequest();

if($request->isAjaxRequest())

 {

    $id = uniqid (‘r_’);

    $renderScript = «<script>renderRecaptcha(‘$id’);</script>»;

    $htmlId = ‘id=»‘.$id.'»‘;

 }

//Убираем  поля для ввода слова

$content = preg_replace( ‘/<input[^<>]*names?=s?.captcha_word.[^<>]*>/’ , » , $content );

//Все изображения заменяем на рекапчу

$content = preg_replace ( ‘/<img[^<>]*srcs?=s?./bitrix/tools/captcha.php?(captcha_code|captcha_sid)=[^<>]*>/’ , «<div class=’g-recaptcha’ data-sitekey=»your_site_key» «.$htmlId.»></div>».$renderScript ,  $content);

}

Функция рендера рекапчи на JavaScript выглядит так:

renderRecaptcha = function(elementId) {

if (typeof (grecaptcha) != «undefined») {

    var element = document.getElementById(elementId);

    if(element != undefined && element.childNodes.length == 0) {

       grecaptcha.render(element, {

          ‘sitekey’: ‘your_site_key’

       });

    }

 }

}

Ее следует добавить в шаблон сайта.

Дальнейшая проверка капчи осуществляется также как во втором способе — по событию OnPageStart или OnBeforeProlog.

Сообщения об ошибках

При замене капч разом на всем сайте (способы 2 и 3) нам потребуется изменить сообщение об ошибке ввода капчи. Чтобы избежать подобных ситуаций:
Все сообщения записываются в языковых переменных. Их мы можем переопределить глобально. Создадим файл /bitrix/php_interface/user_lang/ru/lang.php.

Для компонента добавления и редактирования элемента инфоблока запись в файле будет выглядеть так:

$MESS[‘/bitrix/components/bitrix/iblock.element.add.form/lang/ru/component.php’][‘IBLOCK_FORM_WRONG_CAPTCHA’] = «Не пройдена проверка от автоматического заполнения»;

Выводы

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

Задача выглядит не очень сложной. Тем не менее в найденных на MarketPlace решениях она решена с огрехами. Мы исправили эту досадную ситуацию и представляем Вам наш модуль для замены капчи Битрикс на Google reCaptcha.