Интеграция Google No Captcha ReCaptcha в формы WordPress

2020-10-20

Из этой статьи вы узнаете, как интегрировать новую reCatcha Google в формы входа, комментариев, регистрации и восстановления пароля WordPress:

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

Поэтому ReCaptcha больше не являлась безопасной. Кроме этого метод был довольно неудобным для пользователей. Поэтому в Google разработали новое решение и назвали его No Captcha ReCaptcha.

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

Обзор No Captcha ReCaptcha

Обзор No Captcha ReCaptcha

No Captcha ReCaptcha отображает флажок, с помощью которого пользователю предлагается указать, что он не является ботом. Это может показаться не надежным решением, но внутренние алгоритмы и методы Google позволяют точно определить, является ли пользователь ботом. Новая версия является более удобной и безопасной.

Регистрация сайта и получения ключей

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

Вы должны создать страницу настроек для плагина, которая позволяет администратору WordPress установить ключ сайта и секретный ключ, которые он получит в панели администрирования ReCaptcha:

function no_captcha_recaptcha_menu() {
	add_menu_page("reCapatcha Options", "reCaptcha Options", "manage_options", "recaptcha-options", "recaptcha_options_page", "", 100);
}
function recaptcha_options_page() { ?>
	<div class="wrap">
		<h1>reCaptcha Options</h1>
		<form method="post" action="options.php">
		<?php settings_fields("header_section");
			do_settings_sections("recaptcha-options");
			submit_button(); ?>          
		</form>
	</div>
<?php }
add_action("admin_menu", "no_captcha_recaptcha_menu");
function display_recaptcha_options() {
	add_settings_section("header_section", "Keys", "display_recaptcha_content", "recaptcha-options");
	add_settings_field("captcha_site_key", __("Site Key"), "display_captcha_site_key_element", "recaptcha-options", "header_section");
	add_settings_field("captcha_secret_key", __("Secret Key"), "display_captcha_secret_key_element", "recaptcha-options", "header_section");
	register_setting("header_section", "captcha_site_key");
	register_setting("header_section", "captcha_secret_key");
}
function display_recaptcha_content() {
	echo __('<p>You need to <a href="https://www.google.com/recaptcha/admin" rel="external">register you domain</a> and get keys to make this plugin work.</p>');
	echo __("Enter the key details below");
}
function display_captcha_site_key_element() { ?>
	<input type="text" name="captcha_site_key" id="captcha_site_key" value="<?php echo get_option('captcha_site_key'); ?>" />
<?php }
function display_captcha_secret_key_element() { ?>
	<input type="text" name="captcha_secret_key" id="captcha_secret_key" value="<?php echo get_option('captcha_secret_key'); ?>" />
<?php }
add_action("admin_init", "display_recaptcha_options");

Давайте рассмотрим, как работает приведенный выше код:

Мы создаем страницу настроек в панели администрирования WordPress;
На этой странице настроек выводятся два поля для ввода ключа сайта и секретного ключа;
Эти ключи сохраняются как параметры WordPress site_key и secret_key.

Добавление No Captcha ReCaptcha в форму комментариев WP

Нам нужно интегрировать ReCaptcha в форму комментариев, чтобы исключить возможность размещения ботами спама.

Создайте в папке плагина файл style.css и поместите в него следующий код:

#submit {
	display: none;
	}

Приведенный выше код скрывает кнопку "Оставить комментарий" в форме комментариев WordPress. Таким образом, мы размещаем панель ReCaptcha над кнопкой "Оставить комментарий", вставив кнопку и панель ReCaptcha вручную.

Ниже приводится код для вставки ReCaptcha в форму комментариев:

function frontend_recaptcha_script() {
	wp_register_script("recaptcha", "https://www.google.com/recaptcha/api.js");
	wp_enqueue_script("recaptcha");
	
	$plugin_url = plugin_dir_url(__FILE__);
	wp_enqueue_style("no-captcha-recaptcha", $plugin_url ."style.css");
}
add_action("wp_enqueue_scripts", "frontend_recaptcha_script");
function display_comment_recaptcha() { ?>
	<div class="g-recaptcha" data-sitekey="<?php echo get_option('captcha_site_key'); ?>"></div>
	<input name="submit" type="submit" value="Submit Comment">
<?php }
add_action("comment_form", "display_comment_recaptcha");
function verify_comment_captcha($commentdata) {
	if (isset($_POST['g-recaptcha-response'])) {
		$recaptcha_secret = get_option('captcha_secret_key');
		$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
		$response = json_decode($response["body"], true);
		if (true == $response["success"]) {
			return $commentdata;
		} else {
			echo __("Bots are not allowed to submit comments.");
			return null;
		}
	} else {
		echo __("Bots are not allowed to submit comments. If you are not a bot then please enable JavaScript in browser.");
		return null;
	}
}
add_filter("preprocess_comment", "verify_comment_captcha");

Давайте рассмотрим, как работает приведенный выше код:

Мы подключаем JavaScript-файл Google ReCaptcha в интерфейсе WordPress с помощью действия wp_enqueue_scripts;
Мы также подключаем файл style.css с помощью функции wp_enqueue_style;
В форме комментариев мы выводим флажок с помощью действия comment_form;
После того, как комментарий был отправлен, перед его добавлением в базу данных WordPress вызывается фильтр preprocess_comment. Внутри фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, то возвращается комментарий, чтобы добавить его в базу данных. В противном случае возвращается ноль, чтобы блокировать добавление комментария в базу данных.

Добавление No Captcha ReCaptcha в форму входа WP

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

function login_recaptcha_script() {
	wp_register_script("recaptcha_login", "https://www.google.com/recaptcha/api.js");
	wp_enqueue_script("recaptcha_login");
}
add_action("login_enqueue_scripts", "login_recaptcha_script");
function display_login_captcha() { ?>
	<div class="g-recaptcha" data-sitekey="<?php echo get_option('captcha_site_key'); ?>"></div>
<?php }
add_action( "login_form", "display_login_captcha" );
function verify_login_captcha($user, $password) {
	if (isset($_POST['g-recaptcha-response'])) {
		$recaptcha_secret = get_option('captcha_secret_key');
		$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
		$response = json_decode($response["body"], true);
		if (true == $response["success"]) {
			return $user;
		} else {
			return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot"));
		} 
	} else {
		return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot. If not then enable JavaScript"));
	}   
}
add_filter("wp_authenticate_user", "verify_login_captcha", 10, 2);

Давайте рассмотрим, как работает приведенный выше код:

Мы подключаем JavaScript-файл Google ReCaptcha на страницах входа, регистрации и восстановления пароля с помощью действия login_enqueue_scripts;
Мы выводим флажок с помощью действия login_form;
Перед получением окончательного результата аутентификации WordPress запускает фильтр wp_authenticate_user для добавления дополнительного этапа валидации. Мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы возвращаем объект пользователя, в противном случае мы возвращаем объект ошибки.

Добавление No Captcha ReCaptcha в форму регистрации WP

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

function display_register_captcha() { ?>
	<div class="g-recaptcha" data-sitekey="<?php echo get_option('captcha_site_key'); ?>"></div>
<?php }
add_action("register_form", "display_register_captcha");
function verify_registration_captcha($errors, $sanitized_user_login, $user_email) {
	if (isset($_POST['g-recaptcha-response'])) {
		$recaptcha_secret = get_option('captcha_secret_key');
		$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
		$response = json_decode($response["body"], true);
		if (true == $response["success"]) {
			return $errors;
		} else {
			$errors->add("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot"));
		}
	} else {
		$errors->add("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot. If not then enable JavaScript"));
	}
	return $errors;
}
add_filter("registration_errors", "verify_registration_captcha", 10, 3);

Давайте рассмотрим, как работает приведенный выше код:

Мы выводим флажок с помощью действия login_form;
Перед получением окончательного результата аутентификации WordPress запускает фильтр registration_errors, чтобы добавить дополнительный шаг валидации. Внутри этого фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы возвращаем пустой объект ошибки, иначе мы добавляем дополнение к объекту ошибки и возвращаем его.

Добавление No Captcha ReCaptcha в форме восстановления пароля

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

function verify_lostpassword_captcha() {
	if (isset($_POST['g-recaptcha-response'])) {
		$recaptcha_secret = get_option('captcha_secret_key');
		$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
		$response = json_decode($response["body"], true);
		if (true == $response["success"]) {
			return;
		} else {
			wp_die(__("<strong>ERROR</strong>: You are a bot"));
		}
	} else {
		wp_die(__("<strong>ERROR</strong>: You are a bot. If not then enable JavaScript"));
	}
	return $errors;    
}
add_action("lostpassword_form", "display_login_captcha");
add_action("lostpassword_post", "verify_lostpassword_captcha");

Давайте рассмотрим, как работает приведенный выше код:

Мы отображаем флажок с помощью действия lostpassword_form;
Перед получением окончательного результата аутентификации WordPress запускает действие lostpassword_post, чтобы добавить дополнительный этап проверки. Внутри этого фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы не возвращаем ничего, иначе мы блокируем скрипт с помощью сообщения об ошибке.

Заключение

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