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

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

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

Рис. 1

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

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

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

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

Рис. 2

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

Использование Google NoCaptcha и reCaptcha на формах Chronoforms 5

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

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

Рис. 3

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

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

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

Здесь необходимо разместить два элемента в область  соответствующих событий: один отвечает за загрузку капчи на форму при ее генерации, другой — за проверку капчи при отправке формы.

В зависимости от того, какую капчу вы хотите использовать на форме, Google NoCaptcha или reCaptcha, нужно разместить одну из двух пар элементов:

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

Все четыре элемента находятся в группе «Anti Spam» набора элементов слева во вкладке «Установка» (Setup) редактора формы.

Элементы «Load ReCaptcha» и «Load Google NoCaptcha» (взависимости от того, которая из пар выбрана) должны размещаться выше элемента функции обработчика «HTML (Render Form)» в области события «On Load».

Элементы «Check ReCaptcha» и «Check Google NoCaptcha» (взависимости от того, которая из пар выбрана) должны размещаться выше элементов обработчиков, отвечающих за непосредственную отправку данных формы на сервер или за вывод какой-либо информации на странице с формой (например: «Email», «Display Message» и т. д.), расположенных в области события «On submit».

На рисунке ниже приведен пример расположения пары элементов, соответствующих Google NoCaptcha:

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

Рис. 4

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

Настройка пары элементов для 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) также нужно поместить значение соответствующего ключа от Google (см. рис. 2. п.2).
  3. Поле «Сообщение об ошибке» (Error Message) для ввода текста сообщения об ошибке.

Настройка пары элементов, соответствующих reCAPTCHA, производится следующим образом:

Редактирование настроек элементов «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 и изменять его разработчиками также не рекомендуется.
  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. Значение этого поля генерируется по умолчанию и разработчики также не рекомендуют его изменять.

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

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

В отличие от CF5, в новой версии компонента поддерживается только один вариант анти-спама от Google — Google reCaptcha. Его установка сводится к размещению и настройке всего двух элементов: для загрузки и визуализации на форме — элемент «Google reCaptcha» и, для проверки ключа — элемент функции обработчика «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» во вкладке редактора формы «Установка» (Install). Расположить этот элемент следует выше элементов, отвечающих за отправку формы либо вывод каких-либо сообщений на сайте, в области функции обработчика события «submit». Элемент «Check Google reCaptcha» отнесен к подгруппе набора элементов «Security» группы «Основное» (Core) слева от конструктора функций обработки событий.

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

Рис. 8

Этот элемент имеет также три поля настроек:

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

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

Хостинг SpaceWeb