Code Сulture
Авторизация

~4 минуты, Опубликовано 05.02.2023

Как установить Yandex Smart Captcha на WordPress

Как установить Yandex Smart Captcha на WordPress
Содержание скрыть

Введение. Что такое капча от Яндекса.

Yandex SmartCaptcha – это антиспам система, разработанная компанией Яндекс. Она использует искусственный интеллект и машинное обучение для определения, является ли пользователь человеком или роботом. Это позволяет защитить сайты от автоматизированных атак, спама и других видов нежелательной активности. Yandex SmartCaptcha предлагает простой и удобный интерфейс для пользователей, а также эффективную защиту для веб-сайтов.

Выглядит она следующим образом (капча установлена на форме отправке комментария к статье, можете увидеть ее “в живую”):

Как установить капчу от Яндекс на сайт WordPress

В примере мы разберем установку капчи в форму “Добавить комментарий”, но вы сможете использовать код в своих формах, достаточно будет подключить к ним обработчик, который мы будем использовать ниже.

Создайте капчу

  1. В консоли управления выберите каталог.
  2. Выберите сервис Yandex SmartCaptcha.
  3. Нажмите кнопку Создать капчу.
  4. Введите имя капчи (любое название, которое будет понятно вам).
  5. Выберите сложность Medium или который подходит вам.
  6. Укажите список сайтов, на которых будет размещаться капча.
  7. Типа конфигурации оставьте стандартным.
  8. Нажмите кнопку Создать.

Подключение капчи

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

Подключение скрипта в header

В файле header.php  перед закрывающим тегом </head> добавить подключение скрипта

<script src="https://captcha-api.yandex.ru/captcha.js" defer></script>

Работа с файлом function.php

Далее, что необходимо сделать, в файл function.php (лежит в корне вашей темы) добавить код проверки капчи и вывода самого поля проверки.

Читайте также  Как изменить слово "Рубрика" в названии категории WordPress

В самом верху после открывающего тега <?php определяем две константы с ключами, которые мы получили при создании капчи (где найти – смотрим скрин #1 и скрин #2)

define('SMARTCAPTCHA_SITE_KEY', 'ВАШ_КЛЮЧ_SMARTCAPTCHA_SITE_KEY');
define('SMARTCAPTCHA_SERVER_KEY', 'ВАШ_КЛЮЧ_SMARTCAPTCHA_SERVER_KEY');

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

Далее нам необходимо добавить поле с проверкой в форму комментирования, в том же файле functions.php, после наших констант вставляем хук добавления кастомного поля в форму

add_action( 'comment_form_logged_in_after', 'add_yandex_captcha_field' );
function add_yandex_captcha_field() {
    echo '<div 
          style="max-width: 300px"
          id="captcha-container"
          class="smart-captcha"
          data-sitekey='.SMARTCAPTCHA_SITE_KEY.'
        ></div>';

    echo'</span></p>';
}

Данный html-код, который выводится в echo вы можете использовать в своих формах, где нужно добавить Яндекс Капчу.

Валидации запроса

При отправке формы автоматически сработает функция verify_yandex_captcha_field, которая отправит запрос в Яндекс на проверку

add_filter( 'preprocess_comment', 'verify_yandex_captcha_field' );
function verify_yandex_captcha_field( $commentdata ) {
    // ничего не делаем если это ответ на комментарий
    if ( isset( $_REQUEST['action'] ) && $_REQUEST['action'] === 'replyto-comment' ) {
        return $commentdata;
    }
    
    if ( empty( $_POST['smart-token'] ) || !yandex_check_captcha($_POST['smart-token']) ) {
       $captchaError = new WP_Error( 'failure-check-captcha', '<b>Ошибка:</b> Проверка Yandex Smart Captcha не пройдена. Попробуйте снова.',  101);
       wp_die(
     '<p>' . $captchaError->get_error_message() .$_POST['smart-captcha']. '</p>',
     __( 'Comment Submission Failure' ),
     array(
         'response'  => $captchaError,
         'back_link' => true,
     )
       );
     }
     return $commentdata;
}

Код отправки данных пользователя в Яндекс

// Yandex Captcha Validate Request
function yandex_check_captcha($token) {
    if(!$token){
        return false;
    }
    $ch = curl_init();
    $args = http_build_query([
        "secret" => SMARTCAPTCHA_SERVER_KEY,
        "token" => $token,
        "ip" => $_SERVER['REMOTE_ADDR'], // Нужно передать IP пользователя.
                                         // Как правильно получить IP зависит от вашего прокси.
    ]);
    curl_setopt($ch, CURLOPT_URL, "https://captcha-api.yandex.ru/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) {
        echo "Allow access due to an error: code=$httpcode; message=$server_output\n";
        return false;
    }
    $resp = json_decode($server_output);
    return $resp->status === "ok";
}

Всё. Теперь наша форма комментирования записей работает с антиспам системой от Яндекс – Yandex Smart Captcha!

Читайте также  Как изменить слово "Рубрика" в названии категории WordPress

Если вы хотите интегрировать капчу в другие формы, вам достаточно будет в вашей форме разместить html код поля:

<div style="max-width: 300px" id="captcha-container" class="smart-captcha" data-sitekey='.SMARTCAPTCHA_SITE_KEY.'></div>

При валидации данных формы вызвать обработчик капчи – yandex_check_captcha и передать в нее $_POST[‘smart-token’], исходный код yandex_check_captcha найдете выше.

На этом установка Капчи от Яндекс завершена. По этому же алгоритму вы можете интегрировать ее на любую свою систему.

Если остались вопросы, то вы можете оставить комментарий и мы поможем с установкой!

Категории: WordPress