З цієї статті ви дізнаєтеся, як інтегрувати нову 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() { ?>

reCaptcha Options

You need to register domain you and get keys to make this plugin work.

‘);
echo __(“Enter the key details below”);
}
function display_captcha_site_key_element() { ?>


Давайте розглянемо, як працює наведений вище код:

  • Ми створюємо сторінку налаштувань в панелі адміністрування 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() { ?>

Давайте розглянемо, як працює наведений вище код:

  • Ми підключаємо 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() { ?>

Давайте розглянемо, як працює наведений вище код:

  • Ми підключаємо JavaScript-файл Google ReCaptcha на сторінках входу, реєстрації і відновлення пароля за допомогою дії login_enqueue_scripts;
  • Ми виводимо прапорець з допомогою дії login_form;
  • Перед отриманням остаточного результату аутентифікації WordPress запускає фільтр wp_authenticate_user для додавання додаткового етапу валідації. Ми перевіряємо, чи є користувач людиною або ботом. Якщо це людина, ми повертаємо об’єкт користувача, в іншому випадку ми повертаємо об’єкт помилки.

Додавання No Captcha ReCaptcha в форму реєстрації WP

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

function display_register_captcha() { ?>

add(“Captcha Invalid”, __(“ERROR: You are a bot”));
}
} else {
$errors->add(“Captcha Invalid”, __(“ERROR: 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(__(“ERROR: You are a bot”));
}
} else {
wp_die(__(“ERROR: 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, поділіться своїм досвідом в коментарях.

Переклад статті «Integrating Google No Captcha reCaptcha In WordPress Forms» був підготовлений дружною командою проекту Сайтостроение від А до Я.

RELATED ARTICLESMORE FROM AUTHOR