Как установить капчу на сайт html

Установка reCaptcha на свой сайт

Когда в базе данных сайта скапливается множество неактивных пользовательских аккаунтов, а под статьями — ссылок на неизвестные веб-страницы, наступает пора проверить защиту всех форм на веб-сайте. Спам на веб-ресурсе является сигналом того, что его атаковали боты и нужно настроить их блокировку. Чтобы действия на сайте могли осуществлять только добросовестные пользователи, на него устанавливают «reCAPTCHA». Она помогает проанализировать поведение посетителей веб-ресурса и проверить их на человечность. Им предлагают пройти валидацию, поставив галочку в чекбоксе при отправке заполненной формы на сервер. Человек может выполнить эту задачу, машина нет. Если говорить простыми словами, «reCaptcha» — средство защиты любых форм, которые заполняют пользователи на веб-ресурсе, от спам-ботов. Приводим ниже инструкцию «reCaptcha — как установить на сайт».

Установка reCaptcha на свой сайт.

Изображение от svstudioart на Freepik.

Как подключить reCaptcha на сайте: инструкция

«reCaptcha» бывает разных типов. Прежде чем перейти к ее установке, нужно выбрать тип, который подойдет вашему сайту и его посетителям. «reCAPTCHA v3» следит за пользователями и оценивает степень их схожести с ботами по бальной системе. На основании этих оценок принимается решение о том, что делать с посетителем, например, запретить ему отправку форм. «reCAPTCHA v2» всегда предлагает пользователю установить флажок в специальном поле.

Кроме того, важно заранее определиться с тем, отправку каких форм будет защищать рекапча. Ее можно настроить таким образом, чтобы она появлялась при каждом действии пользователя на сайте или при его взаимодействии с конкретным полем.

После того как организационные моменты решены, можно переходить к установке программы на сайт.

Регистрация в сервисе reCaptcha

Перейдите на страницу сервиса «Google reCAPTCHA» и выберите пункт «Консоль администратора.

Регистрация в сервисе reCaptcha.

Рекапча является инструментом Google, поэтому для работы с ней потребуется авторизация в гугл-аккаунте. После входа в систему вы попадете на страницу регистрации вашего сайта в сервисе.

Регистрация в Google.

В поле «Ярлык» укажите название капчи. Если создадите несколько капч для разных сайтов, ярлык поможет их отличить друг от друга. Выберете тип программы и домен, на который ее нужно установить. Завершите регистрацию принятием условий использования сервиса и нажатием кнопки «Отправить». Вам будут направлены «Ключ сайта» и «Секретный ключ», которые в дальнейшем понадобятся для настройки форм.

Интеграция на стороне клиента

Подробную инструкцию для 2 и 3 версий можно прочитать на официальном сайте.

Выберете форму для настройки. Это может быть, например, форма для получения обратной связи от юзеров с полями «Имя», «Электронный адрес» и «Текст сообщения». Создайте для нее файл «index.php». В сети можно найти разные варианты, в качестве примера мы выбрали этот.

Интеграция на стороне клиента.

Документация Google рекомендует далее подключить скрипт, указав в нем «Ключ сайта».

Ключ сайта.

Это все, что нужно, чтобы сервис работал на стороне клиента.

Интеграция на стороне сервера

На следующем шаге создается код, который будет обрабатывать отправки и капчи. Он записывается в файл «send.php».

Интеграция на стороне сервера.

Токен из скрытого поля нужно записать в переменной $captcha, которая затем преобразуется в «Секретный ключ». Параметр «om_score» будет определять, кем является пользователь — ботом или человеком. Если значения в нем больше 0,5 — «живой юзер». Если менее — скрипт. Владелец сайта может просматривать статистику и принимать решение о том, пропускать ли заявку пользователя на отправку формы.

На следующем этапе создается js-обработчик формы. Его код прописывается в «index.php». Программа представляет собой fetch-запрос, который направляется на «send.php» и возвращает значение параметра «om_score», отвечающего за понимание того, кем является юзер. Если становится понятно, что сообщение пишет человек, алгоритм его принимает.

Js-обработчик формы.

Установка reCaptcha с помощью CMS

Добавление капчи на website через CMS происходит с помощью плагинов. Разберем процесс на примере популярной системы управления контентом WordPress. Наиболее известным плагином для установки рекапчи в WP является «Contact Form 7 Captcha».

Установка плагина. Войдите в панель управления ВордПресс. На вкладке плагины нажмите кнопку «Добавить новый». Через поисковую строку найдите «Contact Form 7 Captcha». Установите, а затем активируйте плагин.
Регистрация сайта в сервисе «Google reCAPTCHA».
Сохранение ключей.
Настройка плагина. В административной панели WordPress найдите раздел «Настройки» и выберете «Contact Form 7 Captcha». Заполните поля, в открывшейся форме. Строка «Invalid captcha error message» должна содержать разъяснения для пользователей, которые не смогли правильно решить рекапчу.
Сохранение настроек.
Добавление контактной формы на сайт. Откройте раздел «Contact Form 7» / «Контактные формы». Перейдите на вкладку «Шаблон формы» и перед тегом [submit] вставьте в поле шорткод [xxxxx-simple-recaptcha]. Настройте форму и сохраните изменения.

Заключение

Спам-боты могут нанести урон репутации и безопасности сайта, испортить аналитику трафика и обесценить труд SEO-специалистов. «reCAPTCHA» является действенным и простым способом защиты сайта от вредоносных программ. Чтобы не раздражать добросовестных пользователей вводом слов или выбором картинок, можно выбрать капчу, которая будет незаметно за ними следить и не станет проводить валидацию без вашего разрешения.

Устанавливаем капчу на свой сайт / Google reCAPTCHA

Каждый пользователь хоть раз встречался с “капчей”. Это надоедливое окно вечно затягивает время при взаимодействии с сайтом, а используется оно почти повсеместно. Давайте рассмотрим как её установить.

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

Появление термина CAPTCHA

Когда в конце 90-х появились новые форматы сайтов с возможностью вести переписку в режиме реального времени – наиболее предприимчивые программисты начали создавать чат-ботов. Хакерам это было выгодно как для получения денег, так и просто ради забавы.

Чат-боты производили в тысячи раз больше операций, чем обычный пользователь. Это приводило к отключению сайта или постоянной перегрузке сервера. Именно для решения этих проблем в 2000 году была создана CAPTCHA.

Создателем защитника стал частный университет Карнеги. CAPTCHA – это аббревиатура от Completely Automated Public Turing test to tell Computers and Humans Apart – полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей. Такое длинное определение вряд ли прижилось бы в повседневном обиходе, поэтому сокращение в “капча” стало идеальным для всех пользователей.

По сути тест Тьюринга генерируется программным кодом, и необходим для определения, кто является системным пользователем – человек или бот. Иными словами, капча выдает рандомные символы или изображения, которые легко определяются человеком, но бот их идентифицировать не может. Защита позволяет исключить из сайта всех нежелательных “гостей”.

Виды капчи

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

yaCAPTCHA

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

reCAPTCHA

Самой популярной капчей является reCAPTCHA от Google. Ежедневно ее проходят более 700 000 000 пользователей. Она может иметь как цифровой, так и текстовый формат, а выполняет при этом не только защитную функцию. Так, с помощью капчи и пользователей, которые ее проходят – Google ежедневно оцифровывает порядка 100 000 000 слов, распознает названия улиц, места, локации и пр. для Google.Maps.

Anti-Spam Image

Несмотря на свою неэстетичность и абсолютное несоответствие современному дизайну сайта, многие разработчики внедряют капчу Anti-Spam Image. Она имеет вид изображения со специальным кодом. Последний распознать можно с первого раза, что экономит время и нервы пользователя. Этот защитник имеет отличный функционал и остается конкурентоспособным по сей день.

CheckBot

Наиболее простой как для разработчиков, так и для пользователей вариант капча – CheckBot. Чтобы добавить его на сайт, достаточно сделать пару кликов, также легко произвести его настройку. А пользователям необходимо выбрать одну картинку с “человечком” из нескольких, опираясь на расписанное задание. Человек легко справится с задачей за пару секунд, а вот боту это будет не по силу.

Math Comment Spam Protection

Также простым во внедрении и использовании является Math Comment Spam Protection. Его несложно установить на сайт и настроить. Он представлен изображением с цифрами и математическими действиями, рядом с которыми есть окно для введения ответа. Для человека будет просто сложить 2+2, а вот большинство ботов даже не смогут считать цифры с изображения.

Устанавливаем капчу на свой сайт

Сегодня reCAPTCHA является не только самой популярной, но и наиболее удобной для внедрения. К такому выводу пришел ее создатель Google на основе проведенных исследований. Поэтому именно его стоит внедрять на свой сайт.

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

Для тех, кто использует блокнот для прописывания кода сайта и почтовых форм, предлагаем пошаговую инструкцию по внедрению reCAPTCHA на сайт:

Находим ссылку на проект и reCAPTCHA .
Переходим на сайт капчи, регистрируемся, получаем серийный ключ и привязываем к нему сайт.
Заходим в блокнот с прописанным HTML кодом и находим . Перед ним необходимо прописать:

Ищем необходимую форму и вписываем:

Вместо нулей прописывается ключ, полученный при регистрации в Google. На выходе должно получится:

Вот и все, reCAPTCHA прописана в форуме комментария сайта. Осталось ее затестить и настроить необходимым образом. Для этого попробуйте “поиграться” с кодом.
Для добавления капчи на страницу PHP, следует сделать дополнительный шаг, а именно перейти к работе над формой. В примере это /comm.php и добавить к нему скрипт:

а после в PHP прописать:

if (isset($_POST['g-recaptcha-response']) && $_POST['g-recaptcha-response']) < $secret = '0000000000000000000000'; $ip = $_SERVER['REMOTE_ADDR']; $response = $_POST['g-recaptcha-response']; $rsp = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$ip"); $arr = json_decode($rsp, TRUE); if ($arr['success']) < // . >>

Здесь также необходимо заменить нолики на ключ, полученный при регистрации в Google, но тот, который расположен под грифом “*secret”.

Возможно в будущем еще появятся более оптимальные виды капчи, но сегодня reCAPTCHA от Google остается наиболее популярной и востребованной среди разработчиков, а также менее назойливой для пользователей.

Больше интересных новостей

Изучение Laravel за час! Создание сайта на PHP + Laravel

5 полезных онлайн-сервисов для разработчиков

Второй язык программирования изучить легче, чем первый. Так ли это?

8 идей проектов на языке PHP для начинающих

Как подключить Google ReCAPTCHA на сайт

Заметки айтишника

Пример подключения Google reCaptcha на сайт, регистрация в API, вставка кода в форму, проверка правильности введенной капчи.

Регистрация сайта в сервисе reCaptcha

Итак, сначала нужно добавить сайт в ReCaptcha API перейдя по ссылке https://www.google.com/recaptcha/admin/create (нужна авторизация), в форме нужно указать название и домен сайта где будет использоваться капча.

После отправки формы появится страница с данными для интеграции.

Вывод на сайте

Чтобы вывести капчу в форме, нужно подключить api.js и добавить c классом g-recaptcha и атрибутом data-sitekey с открытым ключом.

Несколько reCaptcha на странице

В таком случае, в формах вставляются несколько DIVов с уникальным идентификатором, а далее к ним подключается reCaptcha JS-скриптом.

Форма #1   
 Форма #2

Проверка заполнения капчи

На стороне сервера проверку введенной капчи можно реализовать двумя способами:

Вариант на curl (через POST)

$error = true; $secret = 'СЕКРЕТНЫЙ_КЛЮЧ'; if (!empty($_POST['g-recaptcha-response'])) < $curl = curl_init('https://www.google.com/recaptcha/api/siteverify'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_POST, true); curl_setopt($curl, CURLOPT_POSTFIELDS, 'secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']); $out = curl_exec($curl); curl_close($curl); $out = json_decode($out); if ($out->success == true) < $error = false; >> if ($error)

Вариант на file_get_contents

$error = true; $secret = 'СЕКРЕТНЫЙ_КЛЮЧ'; if (!empty($_POST['g-recaptcha-response'])) < $out = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']); $out = json_decode($out); if ($out->success == true) < $error = false; >> if ($error)

← Кэширование данных в PHP на примере класса
Как отправить HTML-форму без перезагрузки страницы →

Как поставить капчу на форму сайта?

Очевидно, что на месте нулей должен располагаться серийный ключ, полученный после прохождения регистрации и привязки. В конечном итоге, в форме «комментария» должно получиться нечто подобное:

5- И всё должно работать.

Если же вы хотите добавить капчу на PHP-страницу, то вам необходимо пройти через ещё один пункт.

Переходим к работе над формой – в нашем примере это /comm.php, к которому нужно добавить скрипт:

if (isset($_POST['g-recaptcha-response']) && $_POST['g-recaptcha-response']) < $secret = '0000000000000000000000'; $ip = $_SERVER['REMOTE_ADDR']; $response = $_POST['g-recaptcha-response']; $rsp = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$ip"); $arr = json_decode($rsp, TRUE); if ($arr['success']) < . >>

В этом коде, как и в предыдущем, необходимо изменить нолики в значении $secret на код секретного ключа, только в данном случае вам нужно вписывать уже другой — тот, что отмечен грифом «*secret».