Защита от спама с помощью recaptcha в MODX Revo
Опубликовано: 01.09.2018
Рассмотрим пример создания формы обратной связи в MODX Revolution с защитой от спама. Для защиты от спама будет использовать популярную recaptcha v2 от компании Google.
Новая reCaptcha от Google
С помощью данной инструкции возможно добавлять неограниченное количество форм с капчей на одну страницу.
1. Давайте для начала зарегистрируем свой сайт в сервисе Recaptha .
2. Затем копируем «Ключ» и «Секретный ключ».
3. Теперь нам понадобиться компонент ReCaptchaV2, вы сможете её скачать через встроенный репозиторий (в меню выбираем «приложения -> установщик»). После установки переходим в системные настройки компоненты и прописываем наши ключи в соответсвующих полях.
4. Для создании формы возьмем компоненты Formit и AjaxForm. Первый отвечает за обработку форм, а второй для Ajax обработки. Устанавливаем их, если они отсутствуют. Далее Вызываем следующий вызов сниппета в наш шаблон.
[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm.contacts` &hooks=`email,spam,recaptchav2` &emailFrom=`[email protected]` &emailFromName=`Администратор сайта` &emailSubject=`Заявка с сайта [[++site_url:replace=`http://== `:replace=`/== `]]` &emailTo=`[email protected]` &validate=`name:required,email:required,message:required,work-email:blank,g-recaptcha-response:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Спасибо за заявку, мы свяжемся с Вами в ближайшее время` &emailTpl=`mailtpl` ]]В «hooks» обязательно указать recaptchav2, а в «validate» нужно добавить «g-recaptcha-response:required»
5. В чанке формы «tpl.AjaxForm.contacts» нужно добавить разметку для вызова капчи: <div class="form-item"> <div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div> <span class="error_g-recaptcha-response error"></span> </div> 6. Затем нужно подключить Js-скрипт рекаптчи и вызвать функцию по её обработки <script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script> <script> var CaptchaCallback = function() { $('.g-recaptcha').each(function(index, el) { grecaptcha.render(el, {'sitekey' : '[[++recaptchav2.site_key]]'}); }); }; </script>В результате, получиться примерно следующее:
