YaSmartCaptcha - защитите ваши формы от спама умной капчей от Яндекс

Привет!

Представляю вам небольшой пакет, который упростит интеграцию Яндекс SmartCaptcha на ваш сайт.

Это дополнение позволит использовать SmartCaptcha от Яндекс на вашем сайте на MODX в формах, созданных с использованием сниппета FormIt (ну а также других компонентах, являющимися надстройкой над FormIt, такими как AjaxForm, SendIt).

Регистрация в Yandex Cloud


Перед началом работы ознакомьтесь с инструкцией и зарегистрируйтесь в сервисе: cloud.yandex.ru/ru/docs/smartcaptcha/quickstart

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

После прохождения регистрации создайте свою первую капчу и вы получите 2 ключа (клиентский и серверный). У Яндекса хорошая и понятная документация, проблем быть не должно.

Это бесплатно?
На момент публикации (январь 2024) Яндекс дает 250000 бесплатных проверок на спам в месяц, больше уже за деньги.

Настройка компонента


Перейдите в системные настройки, выберите пространство yasmartcaptcha, и пропишите ключи:

  • yasmartcaptcha_client_key — Клиентский ключ
  • yasmartcaptcha_server_key — Серверный ключ

Добавление капчи в форму


Вообще принцип работы такой же, как в Google Recaptcha v2, если вы пользовались им ранее, то трудностей быть не должно.

Шаг 1. В том месте, где вам нужно добавить капчу, добавьте некешированный вызов сниппета:

[[!YaSmartCaptcha]]

Данный сниппет подключит на страницу (перед закрывающимся body) скрипт

https://smartcaptcha.yandexcloud.net/captcha.js

и добавит html блок с капчей.

У сниппета единственный параметр tpl, имеющий значение по умолчанию tpl.YaSmartCaptcha.

Шаг 2. Добавьте хук YaSmartCaptcha к FormIt, например:

[[!FormIt?
&hooks=`YaSmartCaptcha,email`
..
]]

Если проверка не будет пройдена, то хук установит сразу 2 одинаковые ошибки с ключами smart-token и yasmartcaptcha.

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

Ссылки


Ссылка на github:
https://github.com/createit-ru/YaSmartCaptcha

Скачать пакет:
https://modstore.pro/packages/utilities/yasmartcaptcha
Также ссылка на транспортный пакет есть на github в разделе Releases (правда не гарантирую, что раздел Releases не забуду обновлять).

В заключение


Компонент бесплатный, но если вам понравился и пригодился — можно поблагодарить финансово по ссылке:



Ваши благодарности ускорят внедрение новых функций, увеличат мою мотивацию, заставят внимательнее прислушиваться к пожеланиям!
Наумов Алексей
12 января 2024, 15:22
modx.pro
3
2 379
+14

Комментарии: 13

Евгений Лазарев
20 сентября 2024, 15:22
0
Подскажите пожалуйста, я правильно понял что YaSmartCaptcha работает только с компонентом FormIt? Пытался ее включить для компонента Login, но даже с незаполненным secret_key проходило валидацию. Удалось решить доработав сниппет YaSmartCaptcha:
if ((isset($formit) || isset($login)) && isset($hook)) {
    Наумов Алексей
    20 сентября 2024, 16:19
    +1
    Ага, верное замечание.

    Я только для formit писал. И исправили верно сниппет.

    Если я доберусь до github и будет свободное время — нужно сделать обновление)

    Может PR сделаете, чтобы не забыл? Или issue)
    Наумов Алексей
    04 октября 2024, 09:35
    +1
    Я выпустил обновление с этим исправлением. Теперь компонент работает с FormIt и Login
      Роман
      22 ноября 2024, 08:43
      0
      Подскажите, если на странице будет две формы, они будут работать? К примеру reCaptchaV3 этого сделать не может, нужно через костыль в виде скрипта, который сбрасывал через указанное время отправку и обновлял ключи.
        Евгений Лазарев
        27 ноября 2024, 12:36
        0
        Добрый день. Появилась новая ошибка:
        27.11.2024 	12:30:20 	ERROR 	/www/site.ru/core/components/yasmartcaptcha/model/yasmartcaptcha.class.php 	60
        
        Recoverable error: Object of class Login could not be converted to string
        27.11.2024 	12:30:20 	ERROR 	/www/site.ru/core/components/yasmartcaptcha/model/yasmartcaptcha.class.php 	60
        
        Recoverable error: Object of class LoginHooks could not be converted to string
        Видимо при превращении в строку в массиве $config присутствует объект Login и LoginHooks.
      Виктор
      30 января 2025, 17:25
      0
      Приветствую! Подскажите, как можно добавить капчу в несколько форм на странице? Делаю несколько — работает только первая.
        Наумов Алексей
        30 января 2025, 17:50
        0
        Добрый день! Честно говоря, как помню, там нет привязок к id элемента или чего-то такое, по идее должны работать все. Может ошибки есть в консоли браузера или в логах?
          Виктор
          30 января 2025, 23:08
          0
          Вроде, ничего по капче не увидел. Вот пример страницы.
          titanremont.ru/pages-2024

          Здесь отображается капча в форме на странице, а в модалке из шапки капчи нет. Но в коде видно, что блоку «smart-captcha» присвоен стиль «height:0». Если я отключаю стиль или своим css его перебиваю, то капча уже отображается и работает.
          С чем может быть такое поведение связано?
            Наумов Алексей
            31 января 2025, 09:23
            0
            Странно… но в компоненте нет ни css ни js кода, так что вина тут лежит на том коде, что дает яндекс. Может как-то некорректно рассчитывает высоту элемента
              Виктор
              01 февраля 2025, 21:57
              +1
              Понял, спасибо! В целом, манипуляции с css проблему решают. Сама капча работает корректно
        Максим
        28 марта 2025, 14:50
        0
        Здравствуйте, скажите, а можно ее сделать невидимой для пользователей, только чтоб ботам и подозрительным пользователям показывалась?
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        13