Как добавить CAPTCHA Cloudflare Turnstile в WordPress

Оставьте комментарий / Блог / От

Замените стандартные формы авторизации и комментариев – внедрение Turnstile на уровне ядра и плагинов работает стабильнее, чем вы ожидаете. Зачем ждать, пока спамеры обрушат почту?

Минимум внешних зависимостей. Без JavaScript-библиотек третьих сторон. Подключение производится через API-ключи, полученные в личном кабинете разработчика.

Откройте Настройки плагина WPForms или аналогичной формы обратной связи. Добавьте два поля:


add_action(\'wp_footer\', function() { echo \'<script src=\"https://challenges.cloudflare.com/turnstile/v0/api.js\" async defer></script>\'; });

Затем зарегистрируйте атрибуты сайта:


<div class=\"cf-turnstile\" data-sitekey=\"ВАШ_КЛЮЧ\"></div>

Готово? Не совсем. Без серверной проверки всё бессмысленно. Проверьте токен на серверной стороне:


$response = wp_remote_post(\'https://challenges.cloudflare.com/turnstile/v0/siteverify\', [
\'body\' => [
\'secret\' => \'ВАШ_СЕКРЕТНЫЙ_КЛЮЧ\',
\'response\' => $_POST[\'cf-turnstile-response\']
]
]);

Важно: если вы используете кеширование (WP Rocket, W3 Total Cache), обязательно исключите страницу формы из кеша, иначе проверка сломается.

Некоторые темы WP блокируют инициализацию скриптов в футере. Обход – подключение вручную через functions.php и фильтр wp_enqueue_scripts.

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

Внимание: если ваш сайт использует AMP, Turnstile работать не будет. Это ограничение самой технологии.

Рассчитывать на визуальные редакторы не стоит. Встраивание лучше делать руками – чище, быстрее, надежнее.

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

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

Сначала переходите в личный кабинет на dash.cloudflare.com. Авторизация обязательна. Почта и пароль – стандарт. Двухфакторная аутентификация? Обязательно. Без неё – никак.

Далее:

  1. Перейдите в раздел Turnstile. Прямой адрес: https://dash.cloudflare.com/?to=/:account/turnstile.
  2. Кликаете Add site. Не перепутайте: это не добавление домена в прокси-защиту, это отдельная сущность.
  3. В поле Site name вводите любое название – чисто для ориентировки в панели.
  4. В Domain указываете домен сайта без https и без слэшей. Только основной. Пример: example.com
  5. Выбираете режим: Managed – автоматически, Non-interactive – без пользовательского интерфейса, Invisible – работает в фоне. Для WordPress лучше Managed.
  6. Жмёте Create.
Читайте также:  Как эффективно использовать хуки действий для настройки дочерних тем в WordPress

Сразу получаете два ключа:

  • Site key – нужен в форме
  • Secret key – не публикуется, используется сервером

Они отображаются в таблице. Можно скопировать сразу. Лучше сохранить в .env или wp-config.php. Не вставляйте напрямую в шаблоны – это дыра.

Важно: ключи уникальны для каждого домена. Один ключ – один сайт. Даже если поддомен, всё равно нужен отдельный экземпляр.

Помните: при смене домена Turnstile перестанет работать. Придётся создавать новый набор ключей.

Для разработчиков: тестовые ключи есть. Можно не регистрировать ничего. Используйте:

  • Site key: 1x00000000000000000000AA
  • Secret key: 1x0000000000000000000000000000000AA

Работают везде. Но в продакшене – бан. Не рискуйте.

Установка и активация плагина Cloudflare Turnstile в WordPress

Сначала переходите в административную панель. Раздел Плагины – Добавить новый. В поиске вводите: Turnstile.

Выбирайте вариант от автора WP Cloudflare Turnstile. Не ошибитесь: иконка синяя, в названии есть слово WP. Жмите «Установить» и сразу активируйте.

После активации в меню появится пункт Settings → Turnstile. Открывайте – начинается самое интересное.

Вам понадобятся ключи. Берите их на официальной панели разработчика. Не копируйте пробелы. Вставляете Site Key и Secret Key строго в соответствующие поля. Ошибка – и защита не сработает.

Внимание! Убедитесь, что ключи соответствуют домену без www, если так указано в настройках на стороне сервиса. Несовпадение – частая причина некорректной работы.

Настройки по умолчанию не подходят. Отключите поддержку WooCommerce, если его нет. Иначе получите ошибки в консоли. Не трогайте JSON unless знаете, что делаете.


do_action( \'turnstile_render\' );

Этот вызов вставляется в файл формы авторизации. Тема на Elementor? Тогда используйте шорткод:


[turnstile]

Теперь – тест. Выйдите из админки, откройте страницу входа в режиме инкогнито. Нет блока? Ищите конфликт с плагином кеширования или настройками темы.

Важно помнить: большинство ошибок возникает из-за несовместимости с Ajax-запросами или нестандартной верстки формы.

После успешной проверки можно включить интеграцию в формы комментариев и регистрации. Но по одной. Иначе отлов багов превратится в пытку.

Читайте также:  Themereview.co — инновационный сервис для обзора и анализа тем для вашего контента

Никаких визуальных индикаторов? Всё работает, если отправка данных не блокируется. Это антибот, а не фейерверк.

Настройка отображения CAPTCHA на формах входа, регистрации и комментариев

Сразу подключайте фильтры login_form, register_form и comment_form_after_fields. Без этого защита не появится в нужных местах.

Для добавления поля в форму авторизации, вставьте следующий код в файл плагина или functions.php темы:


add_action(\'login_form\', \'custom_turnstile_login\');
function custom_turnstile_login() {
echo \'<div class=\"cf-turnstile\" data-sitekey=\"ВАШ_КЛЮЧ\"></div>\';
}

Точно так же с формой регистрации:


add_action(\'register_form\', \'custom_turnstile_register\');
function custom_turnstile_register() {
echo \'<div class=\"cf-turnstile\" data-sitekey=\"ВАШ_КЛЮЧ\"></div>\';
}

Для проверки ответа добавьте хук wp_authenticate_user:


add_filter(\'wp_authenticate_user\', \'verify_turnstile_on_login\', 10, 2);
function verify_turnstile_on_login($user, $password) {
// проверка ответа от сервера, return WP_Error при неудаче
return $user;
}

В комментариях ситуация тоньше. Используйте comment_form_after_fields и проверку через preprocess_comment:


add_action(\'comment_form_after_fields\', \'custom_turnstile_comment\');
function custom_turnstile_comment() {
echo \'<div class=\"cf-turnstile\" data-sitekey=\"ВАШ_КЛЮЧ\"></div>\';
}
add_filter(\'preprocess_comment\', \'verify_turnstile_on_comment\');
function verify_turnstile_on_comment($commentdata) {
// проверка ответа от сервера, wp_die() при провале
return $commentdata;
}

Никогда не доверяйте фронтенду. Всегда проверяйте сервером. Если проверка пропущена – злоумышленник обойдет всё за три секунды.

Внимание! Не размещайте ключи напрямую в шаблоне. Используйте переменные окружения или настройки плагина для хранения.

Если тема использует кастомные формы входа или регистрации (через шорткоды или AJAX), стандартные хуки не сработают. Тогда внедрение идет вручную в шаблоны и обработчики данных. Это хаос, но иначе – никак.

Для WooCommerce формы нужно перехватывать woocommerce_login_form и woocommerce_register_form. Там – отдельная история. Без явного вызова хука ничего не отобразится.

Важно помнить: проверку нужно делать до выполнения wp_signon или wp_create_user. Иначе толку ноль.

Задержка отображения скрипта может мешать отрисовке поля. Добавьте defer к подключению JS или подгружайте через wp_footer, но следите за порядком. Хаос в порядке подключения – ломает всё.

Читайте также:  WordPress представит обновление с акцентом на редактирование кода и кастомизацию

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

Проверка работы Turnstile CAPTCHA и устранение возможных ошибок

Не загружается защита? Проверьте, корректно ли добавлены ключи в панели управления. Один неверный символ – и всё рушится. Используйте текстовый редактор без автозамены. Особое внимание – к невидимым пробелам в начале и в конце строки.

Форма не отправляется? Загляните в исходный HTML. Должен присутствовать контейнер вида <div class=\"cf-turnstile\"...>. Его отсутствие говорит об ошибке интеграции. Возможно, тема WordPress переопределяет хук comment_form_after_fields или форма подключена напрямую через PHP без do_action.

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

Тестируйте с разных устройств. На iPhone может срабатывать блокировка из-за Intelligent Tracking Prevention. В таком случае используйте параметр data-theme=\"light\" вместо auto – баг в WebKit всё ещё не закрыт.

Плагин настроен, но в логах сервера ошибка 403? Проверьте, не блокирует ли сервер внешние подключения. Откройте доступ к https://challenges.cloudflare.com в настройках WAF или ModSecurity.

Для проверки успешной отправки создайте временную форму в functions.php:


add_shortcode(\'test_form\', function() {
return \'<form method=\"post\">
<div class=\"cf-turnstile\" data-sitekey=\"ВАШ_КЛЮЧ\"></div>
<input type=\"submit\" value=\"Проверка\">
</form>\';
});

При отправке проверьте ответ на стороне сервера с использованием wp_remote_post. Не используйте cURL напрямую – на многих хостингах он заблокирован. Пример кода проверки:


$response = wp_remote_post(\'https://challenges.cloudflare.com/turnstile/v0/siteverify\', [
\'body\' => [
\'secret\' => \'ВАШ_СЕКРЕТ\',
\'response\' => $_POST[\'cf-turnstile-response\']
]
]);

Внимание! На некоторых шаблонах отсутствует wp_footer(). Без него скрипт не инициализируется. Добавьте его перед закрывающим тегом </body>.

Помните: если защита отображается, но не проверяет отправку – значит, нет связи с API. Проверяйте подключение сервера к внешним адресам.

Не работает только в админке? Значит, конфликтует с custom admin scripts. Отключите все админские enqueue и подключайте защиту только на фронтенде через is_admin().

Оставьте комментарий

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