Интеграция Google No Captcha ReCaptcha в формы WordPress
Из этой статьи вы узнаете, как интегрировать новую reCatcha Google в формы входа, комментариев, регистрации и восстановления пароля WordPress:
Существует много различных решений для блокировки ботов. Одним из самых популярных до недавнего времени была ReCaptcha. Она выводит изображение с определенным текстом, и пользователь должен ввести этот текст. Но алгоритмы ботов становятся более продвинутыми, и они научились ломать эту защиту.
Поэтому ReCaptcha больше не являлась безопасной. Кроме этого метод был довольно неудобным для пользователей. Поэтому в Google разработали новое решение и назвали его No Captcha ReCaptcha.
В этой статье мы рассмотрим, что представляет собой No Captcha ReCaptcha, и как создать плагин, который интегрирует ReCaptcha в формы входа, комментариев, регистрации и восстановления пароля WordPress.
Обзор 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, поделитесь своим опытом в комментариях.