Подключение невидимой Яндекс SmartCaptcha к сайту на PHP — пошаговая инструкция

Показывать справа: 0

Что такое Яндекс SmartCaptcha

Яндекс SmartCaptcha — современная система защиты сайта от спама, автоматических регистраций, флуда и отправки форм ботами. В отличие от привычной Google reCAPTCHA, сервис анализирует поведение посетителя и во многих случаях вообще не показывает никаких заданий пользователю.

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

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

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

Создание SmartCaptcha в Яндекс Cloud

Для создания и настройки SmartCaptcha необходимо перейти в панель управления Яндекс Cloud: консоль Яндекс Cloud SmartCaptcha .

Перед подключением необходимо получить два ключа:

  • Site Key (публичный ключ)
  • Secret Key (секретный ключ)

Для этого необходимо открыть консоль Яндекс Cloud, выбрать папку проекта и перейти в сервис SmartCaptcha.

  1. Открыть раздел SmartCaptcha.
  2. Создать новую капчу.
  3. Указать домены, на которых будет использоваться защита.
  4. Сохранить настройки.
  5. Скопировать Public Key.
  6. Скопировать Secret Key.

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

Общая схема работы SmartCaptcha

Работа невидимой капчи состоит из нескольких последовательных этапов.

  1. Пользователь открывает страницу.
  2. Подключается библиотека SmartCaptcha.
  3. Для каждой формы создается собственный виджет.
  4. После нажатия кнопки отправки запускается проверка.
  5. Яндекс анализирует посетителя.
  6. Возвращается одноразовый токен.
  7. Токен автоматически передается на сервер.
  8. PHP отправляет запрос в API Яндекса.
  9. Яндекс подтверждает подлинность токена.
  10. Только после успешной проверки выполняется обработка формы.

Подключение библиотеки SmartCaptcha

Первым делом необходимо подключить официальный JavaScript Яндекса.

<script
src="https://smartcaptcha.cloud.yandex.ru/captcha.js?render=onload&onload=smartCaptchaInit"
defer
></script>

После загрузки страницы библиотека автоматически вызывает функцию smartCaptchaInit(). Именно в ней создаются все экземпляры капчи.


<script async>
//Публичный ключ можно хранить в настройках сайта или базы данных. 
Именно этот ключ передается Яндексу при создании видже
var recaptcha_site_key = "<?=$option_site['capt_pub']?>";

 
window.smartCaptchaInit = function () {


    if (!window.smartCaptcha)
        return;


    $('form').each(function(){


        var form = $(this);

//Поиск всех форм
        var container = form.find('.captcha-container');


        // если в форме нет капчи
        if (!container.length)
            return;



        var widgetId = window.smartCaptcha.render(
            
            container[0],

            {
                sitekey:recaptcha_site_key,

                invisible:true,


                callback:function(token){

                let name_form = form.attr('name');


                    // form.find(
                    //     'input[name="smart-token"]'
                    // )
                    // .val(token);
                if (name_form=='question-form')
                   sendQuestionForm(form);
                if (name_form=='pjPrPostRating')
                   go_form_add_review(form);

                }

            }


        );



        // сохраняем ID капчи внутри формы

        form.data(
            'captcha-widget-id',
            widgetId
        );


    });


};

Вместо привязки к одной форме код проходит по всем формам страницы.

Это удобно, если на странице находятся:

  • форма обратной связи;
  • форма отзывов;
  • форма вопросов;
  • оформление заказа;
  • регистрация.

Капча автоматически подключится только к тем формам, внутри которых присутствует контейнер .captcha-container.

Контейнер для SmartCaptcha

В HTML достаточно добавить один пустой блок. 

<form action="index.php"
method="post"
name="question-form"
id="question-form">

    <div class="captcha-container"></div>

</form>

Именно в этот контейнер Яндекс вставляет собственный невидимый виджет.

Создание виджета SmartCaptcha

var widgetId = window.smartCaptcha.render(

    container[0],

    {

        sitekey: recaptcha_site_key,

        invisible: true,

        callback:function(token){

        }

    }

);

Функция render() создает новый экземпляр SmartCaptcha и возвращает уникальный идентификатор виджета <>(widgetId).

Именно этот идентификатор используется позднее для запуска проверки или сброса капчи.

Сохраняем ID созданного виджета

После создания SmartCaptcha необходимо сохранить идентификатор виджета внутри формы.

form.data(
    'captcha-widget-id',
    widgetId
);

На одной странице может находиться сразу несколько различных форм. Каждая из них получает собственный экземпляр SmartCaptcha и собственный идентификатор. Благодаря этому не приходится искать нужную капчу вручную — достаточно обратиться к данным формы.

Запуск проверки после отправки формы

Невидимая SmartCaptcha не выполняет проверку сразу после загрузки страницы. Проверка запускается непосредственно перед отправкой формы.

jQuery("form[name='pjPrPostRating']").bind("submit", function () {

    var obj = jQuery('#pjRrFormAction__go');

    obj.addClass('loading');

    obj.attr('disabled');

    obj.val(obj.data('loading'));

    go_form_send_frage($(this));

    return false;

});

После нажатия кнопки отправки стандартная отправка формы отменяется. Вместо этого вызывается функция go_form_send_frage(), которая запускает SmartCaptcha.

Запуск невидимой капчи

function go_form_send_frage(form){

    var widgetId = form.data(
        'captcha-widget-id'
    );

    window.smartCaptcha.execute(
        widgetId
    );

}

Функция execute() начинает проверку пользователя.

Если Яндекс определит, что посетитель является обычным человеком, через несколько миллисекунд будет вызвана функция callback.

Если потребуется дополнительная проверка, SmartCaptcha самостоятельно покажет окно с заданием.

Получение токена

После успешной проверки SmartCaptcha вызывает callback-функцию.

callback:function(token){

}

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

Сам по себе токен не подтверждает прохождение проверки. Его обязательно необходимо проверить на сервере через официальный API Яндекса.

Отправка формы после успешной проверки

В данном проекте одна функция SmartCaptcha обслуживает сразу несколько форм.

callback:function(token){

    let name_form = form.attr('name');

    if (name_form=='question-form')
        sendQuestionForm(form);

    if (name_form=='pjPrPostRating')
        go_form_add_review(form);

}

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

Упрощённый JavaScript для запуска формы после проверки капчи

function sendQuestionForm(form) {

    // Здесь обычно выполняется AJAX отправка формы
    console.log('Форма прошла SmartCaptcha');

    // пример отправки данных
    var formData = form.serialize();

    console.log(formData);

}

Такой подход позволяет использовать один общий механизм защиты для любого количества форм без дублирования кода.

Передача токена на сервер

При отправке AJAX-запроса необходимо передать значение smart-token.

data.smart_token = token;

Или при использовании FormData:

formData.append(
    'smart-token',
    token
);

Без передачи токена сервер не сможет подтвердить прохождение проверки.

Получение токена в PHP

На сервере первым делом необходимо получить токен из POST-запроса.

$smart_token = '';

if (!empty($_POST['smart-token'])) {

    $smart_token = $_POST['smart-token'];

}

Если значение отсутствует, дальнейшая проверка выполняться не должна.

Проверка SmartCaptcha через API Яндекса

После получения токена необходимо отправить запрос на сервер Яндекса.

public static function check_captcha($token){

    global $option_site;

    $secret = $option_site['capt_sec'];

    $ch = curl_init();

    $args = http_build_query([

        "secret" => $secret,

        "token" => $token,

        "ip" => $_SERVER['REMOTE_ADDR']

    ]);

    curl_setopt(
        $ch,
        CURLOPT_URL,
        "https://smartcaptcha.yandexcloud.net/validate?$args"
    );

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    curl_setopt($ch, CURLOPT_TIMEOUT, 1);

    $server_output = curl_exec($ch);

    $httpcode = curl_getinfo(
        $ch,
        CURLINFO_HTTP_CODE
    );

    curl_close($ch);

    if ($httpcode !== 200){

        return false;

    }

    $resp = json_decode($server_output);

    return $resp->status === "ok";

}

Что происходит внутри проверки

PHP отправляет Яндексу три параметра:

  • секретный ключ проекта;
  • одноразовый токен пользователя;
  • IP-адрес посетителя.

После проверки Яндекс возвращает JSON-ответ. Если поле status содержит значение ok, значит пользователь успешно прошёл проверку и форму можно обрабатывать дальше.

Если API возвращает ошибку либо сервер Яндекса временно недоступен, необходимо считать проверку неуспешной и запретить выполнение дальнейших действий. Такой подход значительно повышает безопасность сайта и предотвращает обход защиты.

Проверяем результат SmartCaptcha

Обработка результата проверки в PHP

После создания функции проверки необходимо вызвать её перед обработкой данных формы.

В данном случае переменная $smart_captcha_check хранит результат проверки.

$smart_captcha_check = false;


$smart_token = '';

if (!empty($_POST['smart-token'])) {

    $smart_token = $_POST['smart-token'];

}


if (!empty($smart_token)) {


    $smart_captcha_check = SEO::check_captcha(
        $smart_token
    );

}

Изначально проверка считается не пройденной. Только после успешного ответа API Яндекса значение изменяется на true.

Запрет обработки формы без успешной капчи

Последний этап — блокировка действий пользователя, если SmartCaptcha не была пройдена.

if (!$smart_captcha_check) {

    $fled[] = 'rate_starts';

    $mess_fled[] = 'Проверка капча не прошла';

}

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

Сброс SmartCaptcha после ошибки

Иногда форма может не пройти дополнительную серверную проверку. Например, пользователь не заполнил обязательное поле или произошла ошибка сохранения данных.

В таком случае старый токен SmartCaptcha использовать повторно нельзя. Необходимо сбросить виджет и получить новый токен.

if (res.status == 0) {


    var widgetId = form.data(
        'captcha-widget-id'
    );


    window.smartCaptcha.reset(
        widgetId
    );

}

Метод reset() очищает текущую проверку и позволяет пользователю повторно отправить форму.

Почему серверная проверка обязательна

Многие разработчики ограничиваются только подключением JavaScript-капчи. Такой вариант небезопасен.

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

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

  • браузер получает токен;
  • сервер получает токен из POST;
  • PHP отправляет запрос в API Яндекса;
  • Яндекс подтверждает или отклоняет проверку;
  • сервер принимает решение о выполнении операции.

Защита нескольких форм на одной странице

Одним из преимуществ данного варианта подключения является возможность использовать SmartCaptcha сразу в нескольких местах сайта.

Например:

  • форма обратной связи;
  • добавление отзыва;
  • вопрос по товару;
  • регистрация пользователя;
  • заявка на обратный звонок.

Для этого достаточно добавить контейнер:

<div class="captcha-container"></div>

И указать обработчик формы в callback.

Преимущества невидимой SmartCaptcha

  • не мешает пользователю проходить оформление заявки;
  • не требует постоянного ввода символов;
  • работает автоматически;
  • защищает AJAX-формы;
  • подходит для любых CMS и самописных сайтов;
  • проверка выполняется на стороне сервера.

Возможные ошибки при подключении

SmartCaptcha не появляется

Чаще всего причина заключается в неправильном подключении JavaScript-файла.

Необходимо проверить:

  • загружается ли captcha.js;
  • вызывается ли функция smartCaptchaInit;
  • правильно ли указан публичный ключ;
  • разрешен ли домен в настройках Яндекс Cloud.

API возвращает ошибку

Если PHP получает ответ отличный от HTTP 200, проверка должна считаться неуспешной.

Причины:

  • неверный Secret Key;
  • истёкший токен;
  • повторное использование токена;
  • ошибка соединения с API.

Форма отправляется без капчи

Обычно это происходит, если сервер проверяет только наличие поля smart-token, но не делает запрос к API Яндекса.

Наличие токена не означает успешное прохождение проверки. Его обязательно необходимо валидировать.

Интеграция SmartCaptcha в существующий сайт

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

В таких случаях выполняется не только установка капчи, но и адаптация существующего кода: обработчиков JavaScript, AJAX-запросов, PHP-функций и серверной проверки.

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

SmartCaptcha можно подключить к Joomla, WordPress, OpenCart и собственным PHP-приложениям без изменения структуры проекта.

Заключение

Невидимая Яндекс SmartCaptcha позволяет надежно защитить формы сайта от спама, сохранив удобство для обычных посетителей.

Правильное подключение состоит из двух обязательных частей:

  1. создание виджета и получение токена в браузере;
  2. проверка токена через API на сервере.

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

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

Создание Сайтов на Joomla Создание Сайтов на WordPress PHP PHP Разработка Перенос сайта
Покупка готового скрипта joomla 3

или просто напишите в телеграмм https://t.me/webalan