Статьи

Интеграция CAPTCHA с формой комментариев WordPress

За прошедшие годы WordPress стал мишенью для спамеров благодаря растущей популярности.

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

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

В предыдущих уроках мы узнали, как интегрировать CAPTCHA в форму входа и регистрации WordPress.

Аналогичным образом, теперь мы рассмотрим, как интегрировать CAPTCHA с системой комментариев WordPress.

В каталоге плагинов WordPress доступно много плагинов CAPTCHA, таких как WP-reCAPTCHA и Securimage-WP-Fixed .

Целью данного руководства является не создание еще одного плагина CAPTCHA, а:

  1. Продемонстрируйте, как API WordPress HTTP можно использовать в плагине.
  2. Как включить дополнительные поля формы в форму комментариев WordPress.
  3. Как проверить и использовать значения, добавленные в настраиваемые поля.

Без дальнейших церемоний, давайте начнем с разработки плагинов.

Разработка плагинов

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

Включите заголовок плагина.

<?php /* Plugin Name: Add reCAPTCHA to comment form Plugin URI: http://sitepoint.com Description: Add Google's reCAPTCHA to WordPress comment form Version: 1.0 Author: Agbonghama Collins Author URI: http://w3guy.com License: GPL2 */ 

Создайте класс с тремя свойствами, в котором будут храниться закрытый и открытый ключ reCAPTCHA, а также сообщение об ошибке CAPTCHA (ошибки генерируются, когда форма CAPTCHA оставлена ​​пустой, а пользователь проваливает вызов).

 class Captcha_Comment_Form { /** @type string private key|public key */ private $public_key, $private_key; /** @type string captcha errors */ private static $captcha_error; 

Метод магического конструктора класса будет содержать две пары ловушек действий и фильтров.

 /** class constructor */ public function __construct() { $this->public_key = '6Le6d-USAAAAAFuYXiezgJh6rDaQFPKFEi84yfMc'; $this->private_key = '6Le6d-USAAAAAKvV-30YdZbdl4DVmg_geKyUxF6b'; // adds the captcha to the WordPress form add_action( 'comment_form', array( $this, 'captcha_display' ) ); // delete comment that fail the captcha challenge add_action( 'wp_head', array( $this, 'delete_failed_captcha_comment' ) ); // authenticate the captcha answer add_filter( 'preprocess_comment', array( $this, 'validate_captcha_field' ) ); // redirect location for comment add_filter( 'comment_post_redirect', array( $this, 'redirect_fail_captcha_comment' ), 10, 2 ); } 

Объяснение кода: во- первых, мой открытый и закрытый ключи reCAPTCHA сохраняются в свойствах их классов.

Метод captcha_display() который будет выводить вызов reCAPTCHA, добавляется в форму комментария действием comment_form .

Действие wp_head включает функцию обратного вызова delete_failed_captcha_comment() , которая удалит любой отправленный комментарий, который не прошел вызов CAPTCHA.

Фильтр preprocess_comment вызывает метод validate_captcha_field() чтобы убедиться, что поле CAPTCHA не оставлено пустым, а также, что ответ правильный.

Фильтр comment_post_redirect вызывает redirect_fail_captcha_comment() для добавления некоторых параметров запроса в URL перенаправления комментариев.

Вот код для captcha_display() который выведет вызов CAPTCHA.

Кроме того, он проверяет, есть ли строка запроса, прикрепленная к URL текущей страницы, и отображает соответствующее сообщение об ошибке в зависимости от значения $_GET['captcha'] установленного redirect_fail_captcha_comment()

 /** Output the reCAPTCHA form field. */ public function captcha_display() { if ( isset( $_GET['captcha'] ) && $_GET['captcha'] == 'empty' ) { echo '<strong>ERROR</strong>: CAPTCHA should not be empty'; } elseif ( isset( $_GET['captcha'] ) && $_GET['captcha'] == 'failed' ) { echo '<strong>ERROR</strong>: CAPTCHA response was incorrect'; } echo <<<CAPTCHA_FORM <style type='text/css'>#submit { display: none; }</style> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=<?= $this->public_key; ?>"> </script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=<?= $this->public_key; ?>" height="300" width="300" frameborder="0"></iframe> <br> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> </noscript> <input name="submit" type="submit" id="submit-alt" tabindex="6" value="Post Comment"/> CAPTCHA_FORM; } 
 /** * Add query string to the comment redirect location * * @param $location string location to redirect to after comment * @param $comment object comment object * * @return string */ function redirect_fail_captcha_comment( $location, $comment ) { if ( ! empty( self::$captcha_error ) ) { $args = array( 'comment-id' => $comment->comment_ID ); if ( self::$captcha_error == 'captcha_empty' ) { $args['captcha'] = 'empty'; } elseif ( self::$captcha_error == 'challenge_failed' ) { $args['captcha'] = 'failed'; } $location = add_query_arg( $args, $location ); } return $location; } 

Метод validate_captcha_field() как его имя, подразумевает проверку ответа CAPTCHA, убедившись, что поле CAPTCHA не оставлено пустым и предоставленный ответ правильный.

 /** * Verify the captcha answer * * @param $commentdata object comment object * * @return object */ public function validate_captcha_field( $commentdata ) { // if captcha is left empty, set the self::$captcha_error property to indicate so. if ( empty( $_POST['recaptcha_response_field'] ) ) { self::$captcha_error = 'captcha_empty'; } // if captcha verification fail, set self::$captcha_error to indicate so elseif ( $this->recaptcha_response() == 'false' ) { self::$captcha_error = 'challenge_failed'; } return $commentdata; } 

Давайте подробнее рассмотрим validate_captcha_field() , в частности условный оператор elseif , который вызывается к recaptcha_response() для проверки правильности ответа CAPTCHA.

Ниже приведен код для recaptcha_response() .

 /** * Get the reCAPTCHA API response. * * @return string */ public function recaptcha_response() { // reCAPTCHA challenge post data $challenge = isset( $_POST['recaptcha_challenge_field'] ) ? esc_attr( $_POST['recaptcha_challenge_field'] ) : ''; // reCAPTCHA response post data $response = isset( $_POST['recaptcha_response_field'] ) ? esc_attr( $_POST['recaptcha_response_field'] ) : ''; $remote_ip = $_SERVER["REMOTE_ADDR"]; $post_body = array( 'privatekey' => $this->private_key, 'remoteip' => $remote_ip, 'challenge' => $challenge, 'response' => $response ); return $this->recaptcha_post_request( $post_body ); } 

Позвольте мне объяснить, как работает recaptcha_response() .

Запрос POST отправляется на конечную точку http://www.google.com/recaptcha/api/verify со следующими параметрами.

  • privatekey : ваш личный ключ
  • remoteip IP-адрес пользователя, который решил CAPTCHA.
  • challenge Значение recaptcha_challenge_field, отправленное через форму.
  • response Значение поля recaptcha_response_field, отправленного через форму.

Данные запроса и ответа POST, отправленные формой, собираются и сохраняются в $challenge и $response соответственно.
$_SERVER["REMOTE_ADDR"] записывает IP-адрес пользователя и его значение в $remote_ip .

WordPress HTTP API — параметр POST в виде массива, поэтому код приведен ниже.

 $post_body = array( 'privatekey' => $this->private_key, 'remoteip' => $remote_ip, 'challenge' => $challenge, 'response' => $response ); return $this->recaptcha_post_request( $post_body ); 

recaptcha_post_request() — это функция-оболочка для HTTP API которая примет параметр / тело POST , сделает запрос к API reCAPTCHA и вернет true если тест CAPTCHA был пройден, и false противном случае.

 /** * Send HTTP POST request and return the response. * * @param $post_body array HTTP POST body * * @return bool */ public function recaptcha_post_request( $post_body ) { $args = array( 'body' => $post_body ); // make a POST request to the Google reCaptcha Server $request = wp_remote_post( 'https://www.google.com/recaptcha/api/verify', $args ); // get the request response body $response_body = wp_remote_retrieve_body( $request ); /** * explode the response body and use the request_status * @see https://developers.google.com/recaptcha/docs/verify */ $answers = explode( "\n", $response_body ); $request_status = trim( $answers[0] ); return $request_status; } 

Любой комментарий, сделанный пользователем, который не delete_failed_captcha_comment() с использованием капчи или оставил поле пустым, удаляется с помощью delete_failed_captcha_comment()

 /** Delete comment that fail the captcha test. */ function delete_failed_captcha_comment() { if ( isset( $_GET['comment-id'] ) && ! empty( $_GET['comment-id'] ) ) { wp_delete_comment( absint( $_GET['comment-id'] ) ); } } 

Наконец, мы закрываем класс плагина.

 } // Captcha_Comment_Form 

Мы закончили кодирование класса плагина. Чтобы заставить класс работать, нам нужно создать его экземпляр следующим образом:

 new Captcha_Comment_Form(); 

При активации плагина CAPTCHA будет добавлено в форму комментариев WordPress, как показано ниже.

CAPTCHA в форме комментариев WordPress

Заворачивать

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

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

Пока я не приду к тебе снова, счастливого кодирования!