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

Устанавливаем капчу на свой сайт / 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 остается наиболее популярной и востребованной среди разработчиков, а также менее назойливой для пользователей.

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

ТОП-5 Лучших Фреймворков CSS

Как начать карьеру Android-разработчика?

Изучаем программирование правильно – 2 основных подхода

Что такое квантовый компьютер, и как он работает?

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

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

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».

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

Капчей (captcha) называется автоматизированный тест для различения человека и робота, который используется в качестве защиты от спама на сайтах и в приложениях. За время своего развития этот инструмент претерпевал немало изменений. Если раньше капча представляла собой проверку в виде изображения с искаженными символами, которые требовалось ввести перед отправкой данных на сервер, то сейчас для ее прохождения пользователям даже не нужно предпринимать никаких дополнительных действий. Добавление капчи на веб-сайт поможет вам защититься от ботов. В статье мы расскажем об известных сервисах, позволяющих это сделать, и объясним, как установить капчу на сайт, используя самый популярный из них.

Как добавить reCaptcha на сайт: инструкция

Подключить капчу от Google можно вручную, если сайт самописный, или посредством расширений в системе управления контентом (CMS), если проект построен на ней. Мы разберем оба варианта и подскажем, как ставить разные версии рекапчи (v2 и v3).

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

Чтобы установить капчу на website, нужно вносить изменения в код — очевидно. Но перед этим нам потребуется получить ключи от Google. Для этого обязательно иметь аккаунт в его экосистеме. Если вы пользуетесь YouTube, Gmail, Google Drive или другим гугл-сервисом, скорее всего, он у вас уже есть. Если нет, завести его нетрудно.

Пройдите по этой ссылке и авторизуйтесь. Далее откроется панель администратора, где нужно будет зарегистрировать ваш сайт и выбрать предпочтительный вид рекапчи. О различиях между v2 и v3 мы расскажем ниже.

В поле «Ярлык» можно вставить любое понятное вам обозначение, оно нужно лишь для опознания веб-сайта в списке. Непосредственно адрес проекта указывается в блоке «Домены» (без www, http/https и пути к странице). Все поддомены будут зарегистрированы автоматически. Также здесь нужно указать email-адрес владельца и проставить галочки в чекбоксах с соглашениями. Мы рекомендуем не отказываться от функции отправки оповещений о проблемах.

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

Руководство по reCaptcha v2

При выборе второй версии рекапчи появится небольшой список. Первый пункт подразумевает внедрение уже знаменитого флажка «Я не робот» в какие-либо формы на сайте (регистрация, обратная связь, комментарии и пр.). При «Невидимом значке» проверка начинается только после нажатия определенной кнопки на странице или если трафик выглядит подозрительно. Третий пункт выбирают, если нужно установить капчу на Android-приложение. Нам подходят лишь первые два варианта.

Итак, чтобы добавить reCaptcha, понадобится интегрировать ее на клиентской и на серверной стороне. Для начала откройте файл с вашим HTML-кодом. Перед закрывающим тегом вставьте строчку:

Если что, требование не обязательное, поскольку скрипт можно подключить в любом месте. Теперь найдите блок с формой, где планируется делать проверку (установить виджет с флажком), и внедрите туда фрагмент такого вида:

Вместо «ВАШ_КЛЮЧ» подставьте значение из первого поля на странице с выданными ключами. Клиентская часть готова.

Чтобы провести интеграцию с сервером, нужно прописать код проверки там, где у вас проверяются данные, присланные с фронта. На PHP это может выглядеть следующим образом (вариант на 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)

Вместо «СЕКРЕТНЫЙ_КЛЮЧ» подставьте значение из второго поля на странице с ключами. После этого капча должна заработать.

Руководство по reCaptcha v3

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

Чтобы поставить такую рекапчу, для начала добавьте в вашу форму скрытое поле «token». Результат может выглядеть примерно так:

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

С помощью CMS

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

«No Captcha ReCaptcha» для WordPress. Позволяет установить проверку в любые формы, а также стилизовать сам виджет reCaptcha под дизайн сайта.
«reCAPTCHA» для Joomla!. Можно выбрать светлый или темный стиль капчи.
«Google reCAPTCHA» для 1С-Битрикс. В настройках можно указать допустимую оценку, добавить сообщение в случае ошибки.

Заключение

Установка капчи на сайт существенно сокращает количество спам-атак. Этот инструмент давно стал необходимостью, так что, надеемся, вы сумеете защитить свой сайт при помощи рекомендаций из нашей статьи. Можете установить один простой плагин или вписать код самостоятельно — главное, чтобы сервис работал.

Как найти битые ссылки на сайте бесплатно

Битые ссылки (broken links) — это ссылки на сайте, которые не работают: например, ведут на несуществующие страницы с кодом ошибки 404 (Page Not Found). Большое количество битых ссылок ухудшает позиции сайта в поисковых системах, а также негативно сказывается на удобстве для пользователей. В нашей статье мы расскажем, как проверить сайт на битые ссылки с помощью бесплатных онлайн-инструментов.

CMS или конструктор: что лучше выбрать

Сегодня, чтобы создать полноценный работающий сайт, вовсе не обязательно владеть языками программирования и другими специальными знаниями. Для этого давно существуют программные продукты, которые делают всю техническую работу за вас. Конструкторы сайтов и системы управления контентом (CMS) являются простыми и удобными инструментами, позволяющими запустить собственный веб-проект. Их часто сравнивают, но на самом деле оба этих решения эффективны — в разных обстоятельствах. Мы расскажем, чем CMS отличаются от конструкторов сайтов, и перечислим особенности каждого метода.

Как получить SSL-сертификат Let’s Encrypt

SSL-сертификат — это цифровой сертификат, удостоверяющий подлинность веб-сайта и позволяющий использовать зашифрованное соединение. Без защищенного соединения сайту будет проблематично продвинуться в поисковых системах и завоевать доверие клиентов. Для небольших веб-проектов, лендингов и блогов отлично подойдет бесплатный SSL-сертификат Let’s Encrypt. В нашей статье мы подробно расскажем, как получить его на виртуальном хостинге и VPS/VDS сервере.

Нажмите дважды, чтобы увеличить

Как подключить 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-форму без перезагрузки страницы →