Установка Google reCAPTCHA на WordPress

Logo

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

Google reCAPTCHA для Wordpress

Этапы работы

Установка reCAPTCHA на сайт делится на 3 этапа:

  1. Регистрация и получение API key.
  2. Интеграция на стороне клиента.
  3. Интеграция на стороне сервера.

В данной статье мы рассмотрим процесс добавления Google reCAPTCHA в стандартную форму комментариев WordPress. Если ваш сайт работает под управлением другой CMS, рекомендую воспользоваться официальным руководством от Google.

Регистрация и получение API key

После авторизации в аккаунте Google, переходим на главную страницу Google reCAPTCHA и жмем на кнопку «Get reCAPTCHA».

Google reCAPTHCA - регистрация
Google reCAPTHCA — регистрация

Далее вводим информацию о новом сайте и жмем «Регистрация».

Google reCAPTHCA - добавление нового сайта
Google reCAPTHCA — добавление нового сайта

После регистрации мы получим два ключа:

  1. Ключ сайта (Site key) – используется в открытом виде как идентификатор.
  2. Секретный ключ (Secret key) – используется на стороне сервера для связи с Google.

На этом подготовка к работе завершена.

Интеграция на стороне клиента

Интеграция Google reCAPTCHA на стороне клиента заключается в добавлении HTML-кода в шаблон сайта. Сделать это можно разными способами, но мы рассмотрим только наиболее правильный. Его суть заключается в использовании специализированных функций WordPress. При этом весь код добавляется в файл functions.php, не затрагивая других файлов, в частности файлов движка сайта.

Всего нужно выполнить 2 действия:

  1. Подключить скрипт reCAPTHCA api.js
  2. Добавить HTML-код блока reCAPTCHA.

Подключение reCAPTCHA api.js

Подключение нового скрипта в WordPress сводится к трем операциям:

  1. Регистрации скрипта при помощи функции wp_register_script().
  2. Инициализации скрипта при помощи функции wp_enqueue_script().
  3. Привязке функций к событию wp_enqueue_scripts при помощи функции add_action(). Для этого функции wp_register_script() и wp_enqueue_script() помещаются в еще одну функцию, которая вызывается в add_action().
add_action( 'wp_enqueue_scripts', 'add_recaptcha_js', 5, 1 );
function add_recaptcha_js() {
// Регистрация reCAPTHCA api.js, version - null, in footer - false
wp_register_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js?hl=ru', array(), null, false );
// Подключение reCAPTHCA api.js
wp_enqueue_script( 'recaptcha' );
}

Добавление HTML-кода блока Google reCAPTCHA

В данном примере мы добавим код блока Google reCAPTCHA в конец стандартной формы комментирования WordPress, непосредственно перед кнопкой отправки. Для этого используем специально предназначенный для этих целей хук comment_form. При этом блок будет отображаться только неавторизованным пользователям.

add_action('comment_form_after_fields', "recaptchadiv");
function recaptchadiv($post_id) {
global $user_ID;
$recaptcha_site_key = 'site_key';
if ($user_ID) {
return $post_id;
}
echo '<div class="g-recaptcha" data-sitekey="'.$recaptcha_site_key.'"></div>';
return $post_id;
}

Не забываем заменить site_key на свой ключ.

Интеграция на стороне сервера

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

Таким образом, для защиты комментариев WordPress нам потребуется две функции:

  1. Функция проверки ответа сервера Google.
  2. Функция предварительной обработки данных комментария.

Как и в случае интеграции на стороне клиента, весь код добавляется в файл functions.php.

Функция проверки ответа сервера Google reCAPTCHA

function verify_recaptcha_response() {
$recaptcha_secret_key = 'secret_key';
$recaptcha_site_key = 'site_key';
if ( isset ( $_POST['g-recaptcha-response'] ) ) {
$captcha_response = $_POST['g-recaptcha-response'];
} else {
return false;
}
// Verify the captcha response from Google
$response = wp_remote_post(
'https://www.google.com/recaptcha/api/siteverify',
array(
'body' => array(
'secret' => $recaptcha_secret_key,
'response' => $captcha_response
)
)
);
$success = false;
if ( $response && is_array( $response ) ) {
$decoded_response = json_decode( $response['body'] );
$success = $decoded_response->success;
}
return $success;
}

Не забываем заменить secret_key и site_key на соответствующие значения. Поскольку это пример, то значения задаются статично. Более правильным было бы сохранить ключи в настройках WordPress, как это будет сделано в плагине, но это немного усложнит код.

Функция предварительной обработки комментария

Завершающим этапом является написание функции предварительной проверки данных комментария и ее привязка к событию preprocess_comment.

add_action('preprocess_comment', "preprocess_comment_cb");
function preprocess_comment_cb($commentdata) {
global $user_ID;
if ($user_ID) {
return $commentdata;
}
if ( !verify_recaptcha() ) {
echo '<p style="font-size: 1rem;">Вы не прошли защиту от спама Google reCAPTCHA. Вернитесь на <a href="#" onclick="history.go(-1);">предыдущую страницу</a> и повторите попытку.';
exit;
}
return $commentdata;
}

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

Плагин защиты комментариев от спама

Для тех, кто любит простые решения, я написал плагин для защиты комментариев WordPress от спама при помощи Google reCAPTCHA. Для его использования вам необходимо:

  1. Скачать плагин.
  2. Установить плагин.
  3. Ввести ключи в настройках WordPress.

Ключи необходимо вводить на главной странице настроек WordPress (Меню -> Настройки) в самом. Поля станут доступны внизу страницы настроек сразу после активации плагина.

Поля ввода ключей Google reCAPTHCA
Поля ввода ключей Google reCAPTHCA

Если ключи не будут введены, то защита отключится без каких-либо ошибок или последствий для работы сайта.

Для придания отступов и других стилей, добавьте в файл style.css правило для класса g-recaptcha.

. g-recaptcha {
}

Заключение

Использование Google reCAPTCHA в комментариях позволит избавится от автоматически распространяемого спама и значительно снизит нагрузку на базу данных сайта. В свою очередь, подключение плагина Akismet защитит вас от спама, распространяемого вручную. Таким образом, рекомендую использовать Google reCAPTCHA в связке с плагином Akismet. Это гарантирует практически 100% защиту от спама, за исключением редких случаев «хитрого спама».

На этом статья про установку Google reCAPTHCA подошла к концу. Если у Вас остались какие-то вопросы или пожелания, вы всегда можете оставить свой комментарий к статье.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 7

  • seoonly.ru

    Капча шикарная, хрумер не пробивает-)

  • Илья

    Добрый день.

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

    • Дмитрий

      Илья, добрый день.

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

      Учитывая все вышесказанное, я разработал специальный плагин, который полностью заменяет стандартную форму авторизации/регистрации/сброса пароля и позволяет пользователям совершать все эти операции непосредственно через сайт, без посещения страницы wp-login.php. Пример: http://dmitriydenisov.com/login/

      Если вас заинтересовал данный плагин — свяжитесь со мной, обсудим детали.

      • Илья

        Дмитрий, я подумал, что на логин форму все-таки рекапча мне не нужна.

        Но столкнулся вот с какой загвоздкой — у меня рекапча размещается не перед кнопкой «Отправить», а после нее. Это касается не только Вашего плагина, но и других, которые я пробовал. С чем может быть связано?

        • Дмитрий

          Илья, это связано с использованием собственного шаблона комментариев WordPress и неправильной установкой хуков в процессе разработки. Чтобы это исправить, откройте на редактирование файл comments.php и найдите следующий код:

          < ?php do_action( 'comment_form_after_fields', $post->ID ); ?>

          Если его нет, то скопируйте и добавьте его сразу после вывода основных полей формы комментирования перед кнопкой «Отправить». Это должно решить проблему.

          • Илья

            Дмитрий, у меня в файле comments.php темы очень короткий код, от самой формы там только это:

            Да и в принципе в файлах темы нигде шаблона формы не нашел.

            Есть файл /wp-includes/comment-template.php
            Там нашел строчку, и она перед кнопкой «Отправить»:
            do_action( ‘comment_form_after_fields’ );
            Переделал на:
            do_action( ‘comment_form_after_fields’, $post->ID );
            Ничего не изменилось.

            • Дмитрий

              Илья, к сожалению, система обрезала Ваш код. Что касается ядра WordPress, то изменять его не нужно. Верните все к исходному состоянию.

              Чтобы ускорить процесс, отправьте файл comments.php на мой email, указанный в контактах. Я посмотрю что там и внесу необходимые корректировки.

Оставить комментарий

отменить ответ