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

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

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

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

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

Обзор No Captcha ReCaptcha

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *