Гугл капча как настроить

Как установить Google Recaptcha на любой сайт — теория, практика и примеры кода

Просматривая недавно биржу фриланса Freelancehunt, я нашел интересное задание по интеграции Google Recaptcha на сайт. Фишка была в том, что клиентский проект хоть и использовал движок WordPress, формы в нем были реализованы и подключены к Битрикс через обычный PHP код. То есть стандартные WP-модули мне не подходили. Поэтому пришлось разбираться как добавить Google Recaptcha для формы на любом сайте, в том числе для CMS без базы данных или вообще без какой-либо админки. Но для начала небольшое лирическое отступление…

Кратко про Google Recaptcha и ее версии

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

На данный момент все еще актуальны обе ее версии:

• Recaptcha v2 – видимая форма на сайте, где надо поставить флажок “я не робот”.
• Recaptcha v3 – невидимый скрипт, который автоматически отсеивает роботов.

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

С другой стороны – третья версия Google Recaptcha вообще не отвлекает пользователя от его дел, а проверка происходит в фоновом режиме автоматически без его участия. Но что будет, если по тем или иным причинам Гугл посчитает вас ботом? – я лично не знаю.

При тесте формы после интеграции через VPN и при быстром заполнении полей, пару раз каптча меня не пропускала. Кроме того, на результаты может влиять в том числе и статистика посещаемости (активность) пользователей – чем их будет больше, тем лучше и точнее окажется срабатывание проверки.

Google Recaptcha + WordPress

Отдельного внимание заслуживает интеграция Google каптчи с Вордпресс. По этой теме достаточно много решений, но тут важно понимать зачем именно вам нужна каптча и где она будет применяться.

Например, если хотите защитить форму комментариев от спама, то тут лучше варианта чем Akismet не отыскать. Разгадывание любой каптчи в таком случае будет только раздражать пользователей. Чаще ее делают именно для почтовых форм. В WP самый популярный плагин для ее создания это Contact Form 7. В нем есть встроенная интеграция Google Recaptcha, хотя для подключения Recaptcha v2 нужно немножко пошаманить (через плагин Contact Form 7 – reCaptcha v2).

В целом для этой системы есть и другие плагины WordPress капчи, но многие со временем перестают поддерживаться + проигрывают конкуренцию крупным решениям. Тут есть смысл подключать разве что какие-то специализированные решения, например, каптча с математическими уравнениями или графическая. Во всех остальных случаях лучше справится решение от Гугла.

Добавление Google Recaptcha v3 на сайт

Итак, вернемся к нашей основной задаче. Первым делом переходим на сайте Google Recaptcha в Admin Console (синяя кнопка в правом верхнем углу). На открывшейся странице в этом же месте будет иконка “+” для добавления нового проекта (под каждый домен нужны свои ключи):

В форме вводите название для ресурса, выбираете третью версию каптчи, указываете домен своей площадки и соглашаетесь с правилами. Затем переходите на следующий шаг и получаете ключи для внедрения антиспам-проверки.

Напротив каждого ключа есть инструкция по его интеграции. Весь процесс состоит из двух этапов:

1. Настройка на стороне клиента – то есть в HTML коде вашего вебсайта.
2. Интеграция на стороне сервера – обработка запроса от пользователя, его верификация и получения ответа сервера.

1. Интеграция для вебсайта

Краткую инструкцию по этой части можно найти по ссылкам из предыдущего скриншота. Она включает в себя несколько простых шагов. Я опишу свой личный опыт.

1.1 Первым делом добавляем в HEAD область кода строку, в которой предварительно вместо reCAPTCHA_site_key поставьте выданный вам ключ сайта.

1.2. Затем в форму FORM на странице где-то перед кнопкой submit добавляете скрытое поле:

После этого она приблизительно будет иметь следующий вид:

Источник

Установка и настройка Google reCAPTCHA 3

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

Хотя он отлично подходит для остановки ботов, он часто раздражает законных пользователей, прося их нажимать на несколько транспортных средств в квадрате или на дорожных знаках.

Рабочий пример проверки, представленный в этой статье http://useful-notes.ru/files/recaptcha3/

reCAPTCHA v3 направлена на то, чтобы предоставить те же возможности фильтрации спама, но при этом держаться подальше от пользователя. Это делается путем отслеживания действий пользователя и присвоения им баллов. Затем вы можете выполнить соответствующие действия в зависимости от этого показателя, например, заблокировать отправку, требовать проверки вручную или разрешить ее выполнение.

Регистрация

Первый шаг — перейти на страницу reCAPTCHA и войти в систему с учетной записью Google.

После входа перейдите в поле «Зарегистрировать новый сайт». Введите подходящий ярлык (имя веб-сайта), выберите «reCAPTCHA v3», добавьте все необходимые домены веб-сайта и нажмите «Зарегистрироваться»:

После регистрации вам будут предоставлены как «Ключ сайта», так и «Секретный ключ».

Они будут необходимы для настройки формы на доменах, представленных на предыдущем шаге.

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

Для этого примера я использую очень простую контактную форму. Она содержит 3 поля (Имя, Адрес электронной почты, Сообщение) и кнопку «Отправить сообщение».

Я использую фреймворк Bulma CSS для быстрого и удобного оформления формы. Код PHP и JS, очевидно, можно разделить на внешние файлы, но я держу все это в одном файле, чтобы пример был коротким и простым.

Создайте файл с именем «index.php» и добавьте следующее:

Замените «YOUR_RECAPTCHA_SITE_KEY» на ключ, предоставленный вам в административной панели Google reCAPTCHA.

Функция grecaptcha.ready запустится, когда служба полностью загрузится и создаст токен для текущего пользователя.

«Действие» должно относиться к текущей странице или выполняемой операции. В этом случае я использую «contact», так как он применяется к форме обратной связи.

Я настроил функцию для захвата скрытого ввода формы и передачи токена до значения ввода.

Код ниже используется для создания самой формы контакта:

Это все, что нужно, чтобы сервис работал на стороне клиента. Теперь он анализирует пользователя, затем создает токен и назначает его скрытому полю recaptcha_response в форме.

Вы можете узнать больше о конфигурации на стороне клиента здесь.

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

Теперь пришло время написать немного кода для проверки пользователя.

Замените «YOUR_RECAPTCHA_SECRET_KEY» на Секретный ключ, предоставленный на панели инструментов и добавьте следующий код прямо над формой:

Этот код создает запрос POST и отправляет его в Google. В зависимости от полученного балла вы можете выполнять действия на странице. Согласно документации «1.0, скорее всего, это человек, 0.0, скорее всего бот».

Для простоты в приведенном выше примере я принимаю все заявки от любого пользователя с оценкой 0,5 или выше.

И вот пример возвращаемого объекта:

Исходный код скрипта проверки на ботов Google reCAPTCHA v3

Код скрипта со всеми проверками можно скачать по ссылке. Вам необходимо лишь заменить YOUR_RECAPTCHA_SITE_KEY и YOUR_RECAPTCHA_SECRET_KEY на свои данные.

Вы можете узнать больше о конфигурации на стороне сервера здесь.

Настройка Google reCAPTCHA 3 завершена

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

Популярное

В этой статье рассмотрим установку и настройку новой версии reCaptcha API от Google в которой обновлен.

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

В этой статье мы рассмотрим настройку и установку новой версии адаптивного слайдера изображений Owl Carousel.

Invisible reCAPTCHA защищает ваш сайт от спама и других видов автоматических злоупотреблений, например.

Адаптивный слайдер изображений Owl Carousel Slider. Имеет достаточно большое количество настроек, прост в.

Источник

Google ReCAPTCHA Invisible или долой дорожные знаки и витрины магазинов

Привет! Хоть большинству читателей Хабра не нужно объяснять, что такое CAPTCHA, зачем она придумана и для чего используется, позволю себе небольшой исторический экскурс.

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

У кого были проблемы со зрением, нередко могли её прослушать:

Для решения задачи «в промышленных масштабах» использовали индусов или китайцев 🙂

В 2007 году умные люди из университета Карнеги — Меллон придумали ReCAPTCHA, чтобы также продолжать бороться с людьмиботами, но и полезное дело делать — помогать оцифровывать книги. Под девизом «ReCAPTCHA — Stop Spam, Read Books» проект пошёл в массы.

В 2009 году после покупки проекта все дружно стали помогать Гуглу распознавать номера домов

В 2015 году после очередного обновления пользоваться ReCAPTCHA («No CAPTCHA ReCAPTCHA») стало ещё проще. Теперь достаточно поставить галочку напротив «Я не робот» / «I’m not a robot»:

Если ваша «человечность» вызывала сомнения, вам оставалось всего лишь правильно выбрать несколько картинок. Например, все витрины, дорожные знаки, поезда и много чего ещё.
Технологии не стоят на месте. Роботы довольно успешно взламывают теперь и ReCAPTCHA.

А теперь по делу. Google тестирует следующую версию ReCAPTCHA — ReCAPTCHA Invisible:

Суть её в том, что теперь не будет необходимости куда-либо нажимать/вводить/выбирать, чтобы подтвердить, что вы человек. Для пользователей всё будет прозрачно, если у «капчи» не будет сомнений в его «человечности».

Проект находится в стадии beta, но получить код «невидимой» рекапчи можно уже сейчас на этой странице. Документация для разработчиков с примерами внедрения доступна здесь.

Источник

Что такое Google reCAPTCHA? Как получить API ключи и установить капчу?

Взаимодействие с пользователем является важнейшей составляющей в процессе ведения своего сайта. Формы комментирования, формы обратной связи, регистрация и авторизация на сайте, процесс оформления заказа – все это относится к наиболее важным моментам взаимодействия с пользователями.

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

Вот почему важно принять необходимые меры для борьбы с этим. Наиболее эффективный способ сделать это – использовать лучшее средство против ботов – CAPTCHA и reCAPTCHA.

Краткий обзор CAPTCHA и reCAPTCHA

CAPTCHA – это аббревиатура от «Полностью автоматизированного публичного теста Тьюринга для различения компьютеров от людей» («Completely Automated Public Turing Test To Tell Computers and Humans Apart»). С помощью этого компьютерного теста можно эффективно определять, кто использует текущую систему – компьютер или человек, то есть выявлять так называемых «ботов».

Простейшие Капчи (CAPTCHA) выглядели так:

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

reCAPTCHA – это усовершенствованная форма CAPTCHA. Компания Google приобрела технологию CAPTCHA в 2009 году и впоследствии сменила ее название на reCAPTCHA. Первые CAPTCHA требовали от пользователя ввода символов, специально искаженных, полупрозрачных и с наложением шума (помех). Если пользователь правильно вводил в форму указанные символы, тогда его действия на сайте были авторизованы. Технология reCAPTCHA значительно упростила пользователям процесс прохождения теста. В основном, этот процесс заключается в том, чтобы пользователь отметил простой флажок, подтверждающий, что он «Не робот» («I’m not a robot»).

Бывает, что этого не достаточно для распознавания человека, тогда пользователю предлагается отобрать определенные объекты на изображении. Например, «Выберите все изображения, где есть пешеходные переходы». Или пожарные гидранты, или дорожные знаки и тому подобное.

Вот пример того, как может выглядеть тест reCAPTCHA:

reCAPTCHA – это бесплатная и общедоступная услуга антиспама от компании Google. Простота и эффективность API Captcha облегчает владельцам сайтов процесс борьбы со спамом в контактных формах, страницах авторизации (или регистрации) и формах комментирования. Также она помогает бороться с мошенничеством и злоупотреблениями на вашем сайте. С другой стороны, реальные пользователи смогут легко авторизоваться на сайте, делать покупки, просматривать, комментировать ваш контент, а фейковые пользователи будут заблокированы.

Какие есть варианты reCAPTCHA? Их стоимость

На сегодняшний день Google предлагает 3 версии капч, которые рассчитаны под разные потребности и бюджет:

• reCAPTCHA Enterprise. Появилась в 2020 году. Эта версия позволяет обеспечивать защиту от мошенничества на всем сайте, не ограничиваясь лишь отдельными страницами. С помощью API ее можно интегрировать в мобильное приложение. Стоимость: устанавливается отдельно, в соответствии с объемом проверок (запросов). Ориентировочная стоимость – 1$ за 1000 запросов.
• reCAPTCHA v3. Эта версия была представлена ​​в 2018 году. Она интегрирует простую проверку запросов пользователя, не требуя от него никаких действий, анализируя его поведение в фоновом режиме. Стоимость: бесплатно до 1 миллиона запросов (проверок) в месяц (примечание: ограничения могут меняться).
• reCAPTCHA v2. Это улучшенная версия простых капч, появившаяся в 2012 году, и которая на сегодняшний день остается самой популярной версией капчи. reCAPTCHA v2 проверяет, не является ли пользователь «роботом», с необходимостью выбора отметки «Я не робот» («I’m not a robot»). Примеры этой CAPTCH’и рассмотрены выше. Стоимость: бесплатно до 1 миллиона запросов (проверок) в месяц (примечание: ограничения могут меняться).

Как получить ключи для использования reCAPTCHA API?

Чтобы добавить Google reCAPTCHA на свой сайт, вам понадобятся два ключа API. Для получения этих ключей зайдите на сайт Google reCAPTCHA. Нажмите кнопку Консоль администратора (Admin Console) в верхнем меню главной страницы. Учтите, что для доступа вам понадобится аккаунт Google (если у вас есть почта GMail, значит у вас уже есть такой аккаунт). После авторизации вы увидите страницу «Зарегистрировать новый сайт» (Register a new site).

На этой странице вам нужно ввести информацию о вашем сайте. Сначала введите имя сайта или любое другое название в разделе «Ярлык». Это название используется для простой идентификации своего сайта.

Затем выберите нужный тип reCAPTCHA: версию 2 (v2), или версию 3 (v3). При выборе второй версии вы увидите три доступных варианта:

• Флажок «Я не робот» – выполнять проверку запросов с помощью флажка «Я не робот»
• Невидимый значок reCAPTCHA – выполнять проверку запросов в фоновом режиме
• reCAPTCHA для Android – выполнять проверку запросов в приложении для Android

Для третьей версии проверка запросов выполняется с учетом оценок, в фоновом режиме.

В разделе Домены укажите основной домен вашего сайта (без https , www или порта). Google зарегистрирует указанный домен и все его поддомены. Например, если вы укажете адрес example.com , также будут зарегистрированы и subdomain.example.com . Вы также можете добавить несколько доменов или поддоменов, нажав на значок плюс (+).

В разделе Владельцы будет указано текущий электронный адрес, вы также можете добавить другие электронные адреса.

Затем вам нужно принять Условия использования reCAPTCHA, чтобы добавить сервис на свой сайт.

Также выберите флажок «Отправлять владельцам оповещения», чтобы позволить Google присылать вам электронные письма, если будут выявлены какая-либо неправильная конфигурация или подозрительная активность.

После заполнения формы вы можете нажать кнопку Отправить, чтобы зарегистрировать свой сайт (или сайты).

После сохранения формы Google reCAPTCHA покажет вам сообщение об успехе, а также 2 нужных вам ключа: ключ, который нужно добавить в HTML код вашего сайта, а также секретный ключ, который необходим для обмена данными между сайтом и сервисом reCAPTCHA.

Теперь вы можете использовать эти API ключи на своем сайте.

Как добавить Google reCAPTCHA на свой сайт?

Теперь, когда у вас есть ключи API сервиса капчи, пора реализовать этот инструмент на своем сайте.

Самый простой способ добавления капчи от Google – это отображение виджета reCAPTCHA в автоматическом режиме (для reCAPTCHA v2). Для этого вам нужно добавить соответствующий скрипт JavaScript api.js на страницу (желательно в секции HEAD ) и добавить в нужную форму (комментирования, регистрации и т.д.) дополнительный блок DIV с классом g-recaptcha и атрибутом data-sitekey (значением этого атрибута будет ключ вашего сайта, который вы получили при регистрации выше).

Пример простой реализации reCAPTCHA на своем сайте:

Сохраните свою HTML форму (со своими данными) и на вашем сайте будет успешно реализовано Google reCAPTCHA. Примите наши поздравления!

После того, как капча начнет работать, вы также сможете отслеживать статистические данные этого сервиса в инструменте Аналитики Google reCAPTCH’и.

Подведение итогов

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

Одним из лучших способов автоматической борьбы с этими атаками спаммеров является использование сервиса reCAPTCHA от Google, который идентифицирует ботов и блокирует их, а реальным пользователям позволяет совершать авторизованные действия на сайте.

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

На этом наша инструкция о том, что такое reCAPTCHA, как получить API ключи для нее, и как ее реализовать на своем сайте подходит к концу. Надеемся, что эта инструкция помогла в разъяснении того, что такое Google reCAPTCHA, и упростила вам процесс самостоятельного добавления reCAPTCHA в любую форму на вашем сайте. Если вы столкнулись с какой-то проблемой по данному вопросу, пожалуйста, не стесняйтесь использовать форму комментирования ниже.

Если вы хотите узнать о внедрении Google reCAPTCHA на сайте WordPress, по ссылке вы найдете детальную инструкцию.

Источник