Защита форм и предотвращение спама - задача не менее важная, чем создание самих веб-приложений. На данный момент для этих целей на многих сайтах и сервисах Интернета используются нструменты с API Google. Компонент Chronoforms — не исключение.  Здесь, наряду с Captcha, Security Question, Security image и Honeypot, для защиты форм также применяются NoCaptcha (в CF5) и ReCaptcha (в CF5 и CF6), работающие с ключами Google API.

Этот метод обеспечения безопасности проектов Chronoforms предполагает два этапа: получение ключей в аккаунте вебмастера Google и настройку соответствующих элементов и обработчиков уже на самой форме обратной связи, на сайте. 

Получение ключей reCaptсha в аккаунте Google

Получение ключей reCaptcha осуществляется в аккаунте Google. После авторизации владелец аккаунта получает доступ к странице управления ключами reCaptcha https://www.google.com/recaptcha/admin#list. Здесь можно добавлять, удалять ключи и изменять их настройки.

Создание ключа Google API для капчи

Рис. 1

Создание нового ключа состоит в следующем:

  1. В поле «Название» вводится в свободной форме название генерируемого ключа
  2. Далее выбирается любая из трех, предложенных версий.
  3. Вводится список доменов, для которых генерируется ключ. Это многострочное поле, где каждое имя домена указывается с новой строки. Если ключи, помимо действующих доменов, будут использоваться и на локальных серверах (например, denwer) — добавляются и их имена (например, «test-domain»).
  4. Затем ставим галку «Примите условия использования reCAPTCHA».
  5. Галку в поле «Отправлять владельцам оповещения» оставлять не обязательно, только, если вы хотите получать сообщения сервиса на свой e-mail.
  6. После заполнения всех указанных полей по нажатию кнопки «Регистрация» ключ будет сгенерирован и откроется страница редактирования его настроек.

Для подключения reCaptcha к любому из инструментов обеспечения безопасности Chronoforms необходимы два ключа.

Получение ключей Google API для капчи

Рис. 2

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

Настройка Google NoCaptcha и reCaptcha на формах Chronoforms 5

Для того, чтобы настроить капчу от Google на формах Chronoforms 5, нужно перейти во вкладку «Дизайнер» (Designer) и поместить элемент «Recaptcha» (из группы элементов «Advanced») на форму так, чтобы он оказался выше кнопки отправки (см. рис. 3).

Редактирование настроек элемента «Recaptcha» в Chronoforms 5

Рис. 3

По нажатию на кнопку «Редактировать» (Edit) элемента «Recaptcha» открывается окно его настроек со следующими полями:

  1. «Метка» (Label) — метка элемента на форме (опционально).
  2. «Позиция метки» (Label position) — переключатель для установки положения метки относительно самой капчи. «Top» — будет расположена сверху, над капчей, «Left» — слева от капчи.
  3. «Код» (Code) — поле с кодом вставки капчи, недоступное для редактирования.
  4. «Дополнительная метка» (Sub Label) — может использоваться в качестве дополнительного пояснения к капче (опционально).

После сохранения настроек визуальной части капчи в дизайнере нужно перейти во вкладку «Установка» (Setup) для настройки функций, отвечающих за загрузку ключей и обработку капчи. Следовательно, разместить нужно два элемента, в зависимости от того, какую капчу предполагается использовать:

  1. «Load ReCaptcha» и «Check ReCaptcha» — для reCAPTCHA
  2. «Load Google NoCaptcha» и «Check Google NoCaptcha» — для noCaptcha

Все они находятся в группе «Anti Spam» во вкладке «Установка» (Setup).

Элементы «Load ReCaptcha» и «Load Google NoCaptcha» размещаются всегда в области события «On Load» выше обработчика «HTML (Render Form)».

Элементы «Check ReCaptcha» и «Check Google NoCaptcha» должны размещаться всегда в области события «On submit» выше всех других обработчиков.

На рисунке ниже (см. рис. 4) приведен пример расположения пары обработчиков, соответствующих «Google NoCaptcha»:

Редактирование настроек элементов «Load Google NoCaptcha» и «Check Google NoCaptcha»  в Chronoforms 5

Рис. 4

 Далее нужно поместить полученные у Google ключи в соответствующие им поля.

Настройка Google NoCaptcha на формах Chronoforms 5

Настройка Google NoCaptcha на формах Chronoforms 5 для пары «Load Google NoCaptcha» и «Check Google NoCaptcha» осуществляется так:

Редактирование настроек элементов «Load Google NoCaptcha» и «Check Google NoCaptcha»  в Chronoforms 5

Рис. 5

  1. В окне редактора элемента «Load Google NoCaptcha» в поле «Сайт ключ» (Site Key) нужно поместить публичный ключ от Google (см. рис. 2 п.1).
  2. В настройках «Check Google NoCaptcha» в поле «Секретный ключ» (Secret Key) нужно поставить значение соответствующего ключа (см. рис. 2. п.2).
  3. Поле «Сообщение об ошибке» (Error Message) должно содержать ее текст на случай некорректного ввода ключа пользователем.

Настройка reCAPTCHA для форм обратной связи Chronoforms 5

Настройка reCAPTCHA для форм обратной связи Chronoforms 5 производится следующим образом:

Редактирование настроек элементов «Load ReCaptcha» и «Check ReCaptcha» в Chronoforms 5

Рис. 6

  1. В «Load ReCaptcha» поле «Открытый ключ» (Public Key)  должно содержать публичный ключ от Google (см. рис. 2 п.1).
  2. В редакторе настроек «Check ReCaptcha» в поле «Закрытый ключ» (Private key)  нужно поместить значение секретного ключа от Google (см. рис. 2. п.2).
  3. Поле «API сервер» (API server) при генерации элемента «Load ReCaptcha» уже содержит url-адрес api сервера Google и изменять его разработчиками не рекомендуется.
  4. «API secure сервер» (API secure server) при генерации функции «Load ReCaptcha» также по умолчанию содержит  url-адрес api secure сервера Google. Изменять его  не нужно, за исключением случаев изменения адресов самого сервиса Google.
  5. Поле «Сервер SSL» (SSL server) в настройках элемента «Load ReCaptcha» представлено в виде переключателя значений «Да» (Yes) и «Нет» (No), который устанавливается в соответствующее положение в зависимости от того, используется на странице с формой протокол https или нет.
  6. «Внешний вид» (Theme) элемента   «Load ReCaptcha», путем выбора значений, может быть следующим: «Clean», «Red»,  «White», «Blackglass» или «Custom».
  7. Поле «Язык» (Language) в «Load ReCaptcha» предоставляет возможность выбора для капчи языков «Englisch», «Dutch», «French», «German», «Portuguese», «Russian», «Spanish» или «Turkish».
  8. Поле «Ошибка» (Error) в окне настроек «Check ReCaptcha» предназначено для ввода текста ошибки, возникающей при получении от Google отрицательного результата проверки ключа.
  9. Поле «Сервер проверки» (Verify server) в «Check ReCaptcha» содержит имя сервера проверки ключей Google. Значение этого поля генерируется по умолчанию и разработчики также не рекомендуют его изменять, за исключением случаев изменения url самого сервиса

После завершения настройки этих функций в область собственного события «On fail» функции «Check ReCaptcha» необходимо поместить обработчик «Event Loop» из группы «Basic» (в меню слева). Производить его донастройку не нужно. Подробнее о том, для чего он используется можно прочитать здесь.

Установка и настройка Google reCaptcha на формах Chronoforms 6

В отличие от CF5, в новой версии компонента поддерживается только один вариант анти-спама от Google — Google reCaptcha.

Установка и настройка Google reCaptcha на формах Chronoforms 6 сводится к размещению и настройке всего двух элементов:

  1. для загрузки и визуализации на форме — элемент «Google reCaptcha» (для клиентской части формы)
  2. для проверки ключа — функция «Check Google reCaptcha» (для серверной части формы).

Для установки  «Google reCaptcha» необходимо открыть вкладку редактора «Дизайнер» (Designer), выбрать (из группы «Security») и перетащить его мышью в область секции на форме, так, чтобы он находился выше кнопки сабмита.

Редактирование настроек элемента «Google reCaptcha» в Chronoforms 6

Рис. 7

В окне редактирования настроек «Google reCaptcha» всего три поля:

  1. «Сайт ключ» (Site key) — обязательное поле для ввода публичного ключа, полученного от Google (см. рис. 2 п. 1).
  2. «Внешний вид» (Theme) — поле для ввода названия шаблона, который применяется к элементам капчи на стороне сайта. По умолчанию это поле содержит значение «light».
  3. «Код языка» (Lang code) — поле кода языка, который будет применен к элементам капчи на стороне сайта. По умолчанию оно содержит шоткод. Если его оставить как есть, язык интерфейса капчи будет переключаться автоматически при переключении языков на сайте.

Вторым этапом подключения данной капчи будет размещение и настройка элемента «Check Google reCaptcha» .

Функцию «Check Google reCaptcha»  из группы «Security» (меню слева во вкладке конструктора «Установка») нужно перетащить мышью в область события «submit» и поместить выше всех остальных обработчиков (см. рис. 8).

Редактирование настроек элемента Check Google reCaptcha в Chronoforms 6

Рис. 8

Этот обработчик имеет три поля настроек:

  1. Переключатель «Включено» (Enabled) для  включения или отключения проверки капчи.
  2. «Секретный ключ» (Secret key) — секретный ключ от Google (см. рис. 2 п.2) для контроля капчи.
  3. «Сообщение об ошибке» (Error Message) —  текст сообщения об ошибке, которая будет отображена на сайте в случае несоответствия ключей.

Во избежание отправки формы при неправильном вводе капчи, в области собственного события «fail» функции «Check Google reCaptcha» должен быть размещен обработчик «Event Loader». Производить его донастройку не нужно.