Установка 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_response() ) {
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

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

  • 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, указанный в контактах. Я посмотрю что там и внесу необходимые корректировки.

  • Дмитрий

    Установил Ваш плагин, но не могу его найти в панели WordPress, чтобы ввести ключи. Почему?

    • Дмитрий

      Дмитрий, поля для ввода ключей находятся на главной странице настроек WordPress, которую Вы можете найти в Меню -> Настройки (ищите поля внизу страницы).

  • Александр

    Дмитрий, спасибо за вашу прекрасную работу!
    Скажите, а будет ли этот плагин работать после обновления WP или шаблона? Не вносит ли он каких-либо изменений в файлы, которые могут быть обновлены со временем?

    • Дмитрий

      Александр, всегда рад помочь!
      В большинстве случаев обновление ядра WordPress и тем оформления никак не влияет на работу плагина. Исключением являются ситуации, когда в ядре переименовываются или удаляются необходимые для работы плагина функции, в теме удаляются хуки или же возникает конфликт скриптов при установке других плагинов. В этом случае могут потребоваться некоторые доработки. Но это обычная ситуация, которая может возникнуть с любым плагином, поэтому не беспокойтесь. Плагин всегда можно будет отключить до момента решения проблемы.

  • Александр

    По ссылке для скачивания плагина лежит файл .PHP, как его установить-то? Просто стандартный установщик плагинов хочет .zip , а как руками ставить плагин я, к своему стыду, не знаю…

    • Дмитрий

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

  • Геннадий

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

    • Денис

      Геннадий,
      // Добавление блока reCAPTHCA в форму комментирования
      add_action( ‘comment_form’, array( $this, ‘recaptchadiv’ ) );

  • Альберт

    Дмитрий, здравствуйте! Установил ваш замечательный плагин, все работает хорошо, нет спама. Плагин Akismet я удалил и нужен ли он, если ваш плагин не пропускает ни одного спама в комментарии? Но у меня проблема с выводом «Я не робот» он находится ниже кнопки отправить. Помогите, пожалуйста, перевести «Я не робот» выше кнопки оправить.

  • Дмитрий

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

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

  • Арина

    Дмитрий, здравствуйте! А может подсказать, как подключить Google reCAPTCHA к формам Contact form 7? Спасибо!

    • Дмитрий

      Арина, здравствуйте. Без изучения кода плагина Contact form 7, подключить к нему Google reCAPTCHA невозможно. Впрочем, это и не нужно, так как согласно данным, полученным с официального сайта, начиная с версии 7 4.3 Google reCAPTCHA встроена в плагин по умолчанию.

      • Арина

        Дмитрий, спасибо! О таком простом решении я даже не думала :(

    • Денис

      Арина, просто введите ключи в настройках

  • Денис

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

    // Добавление блока reCAPTHCA в форму комментирования
    add_action( ‘comment_form’, array( $this, ‘recaptchadiv’ ) );

    • Дмитрий

      Денис, только что все перепроверил. В плагине используется хук «comment_form_after_fields». Таким образом, блок reCAPTCHA выводится перед кнопкой отправки формы, а не перед textarea. На всякий случай обновил ссылку на плагин.

  • Марина

    Отлично

  • Павел

    Добрый день! Спасибо Вам большое за Ваш труд. Решил установить recaptcha на свой сайт cccp-blog.com без плагина с помощью предоставленного кода.
    Интеграцию ещё не начинал, но интересует вопрос по поводу предварительной обработки комментария:

    //if ( !verify_recaptcha() ) {

    Нигде не могу найти функцию verify_recaptcha() в Вашем коде. Максимально похожее — verify_recaptcha_response(). Это опечатка или Вы забыли привести код функции verify_recaptcha()?

    Заранее спасибо за ответ.

    • Дмитрий

      Павел, добрый день! Спасибо за уведомление. Это опечатка в статье. Уже исправил.

  • Владимир

    Добрый день! А не подскажете как сделать. такую же проверку как у вас на сайте с помощью Js. Чтобы не открывалась новая страница а было сообщение как показано здесь на картинке — prntscr.com/glfmro

    • Дмитрий

      Владимир, добрый день. Ниже реализация на jQuery.
      $( document ).on( ‘submit’, ‘form’, function () {
      if ( $( this ).find( ‘.recaptcha’ ).length > 0 ) {
      if ( grecaptcha.getResponse() === «» ) {
      alert( ‘Вы не отметили чекбокс «Я не робот»!’ );
      return false;
      }
      }
      } );
      WordPress автоматически заменяет спецсимволы, поэтому замените в условиях квадратные кавычки на обычные.

      • Владимир

        Дмитрий, Помогите адаптировать его и добавить в файл wp-comments-recaptcha.php, чтобы все было в одном месте, если это возможно. Спасибо.

        • Дмитрий

          Владимир, напишите мне на почту через форму обратной связи. По возможности помогу.

          • Владимир

            Дмитрий, Все отлично. Вот скриншот замененного файла http://prntscr.com/go169b Благодарю за помощь. Все работает прекрасно.

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

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