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

Как интегрировать “No CAPTCHA reCAPTCHA” на Ваш Сайт.

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

Необходимое зло (спасибо спамерам)

Как ни странно, несмотря на то, что традиционные «исказители текстов» CAPTCHA неудобны нам для чтения, современные технологии искусственного интеллекта имеют меньше проблем с этим. Google даже использует подобную технологию для прочтения номеров домов и дорожных знаков для подтверждения их местонахождения на Google Street View!

Роботы Google могут безошибочно их прочесть

Это логично, потому что именно разработчики Google придумали лучшее решение для CAPTCHA до сих пор, к концу 2014 года. Для No CAPTCHA reCAPTCHA требуется не более, чем постукивание пальцем, щелчок мышью или нажатие пробела на клавиатуре в соответствующем поле.

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

Вы можете увидеть это в действии уже по всему Интернету, например на странице @materialup .

Получить No CAPTCHA reCAPTCHA

Приступим уже к главному и установим No CAPTCHA.

Шаг 1

Во-первых, нам нужен API key, так что заходим сюда https://www.google.com/recaptcha/admin . Чтобы получить доступ к этой странице, вы должны быть зарегистрированы в Google. Вам будет предложено зарегистрировать свой сайт, так что дайте ему подходящее имя, затем список доменов (например tutsplus.com), где будет использоваться именно эта reCAPTCHA. Поддомены (например webdesign.tutsplus.com и code.tutsplus.com) автоматичекси учитываются.

Шаг 2

После этого вам дадут ключ сайта и секретный ключ партнера:

Шаг 3

Под ключами вы увидите несколько фрагментов для включения reCAPTCHA на вашем сайте. Сначала вы увидите JavaScript:

Вы можете также определить какой из 40 поддерживаемых языков вы будете использовать, добавив параметр к строке. Мы добавим es , это даст нам reCAPTCHA на испанском:

Поместите этот скрипт внизу вашей страницы (или под формой, где появится reCAPTCHA, в зависимости от того, как вы распределите загрузку данных).

Шаг 4

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

Заметка: атрибут data-sitekey будет держать значение вашего ключа, а не этот пример.

Есть другие атрибуты, которые вы можете добавить в настройки внешнего вида и функциональности вашей reCAPTCHA на данный момент. Например, добавление data-theme=»dark» этому div даст вам темную версию, которая больше подойдет вашему интерфейсу пользователя (UI):

Для более подробной информации о настройке reCAPTCHA перейдите сюда developers.google.com .

Посмотрим Все Вместе

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

Шаг 1

Положим наш тег скрипта и текстовый заполнитель в простую форму:

Здесь мы использовали базовую структуру страницы с формой, содержащей поле для имени , поле для email и кнопку для отправки. Мы не придаем какой-либо стиль, поскольку он особо и не нужен для этого урока.

Вы должны иметь что-то похожее на это

Чтобы показать, что тест reCAPTCHA был принят, нам потребуется выполнить некоторые серверные проверки. В данном случае мы будем делать это с PHP, так что сохраните этот файл в новом проекте index.php .

Шаг 2

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

Каждая пара ключ/значение присутствует в нашем массиве $_POST , где они выводятся с небольшим количеством форматирования. Когда вы отправите форму, то увидите следующее:

Вы увидите возвращенное значение для имени и email , но также значение для g-recaptcha-response . Если вам не удалось завершить тест CAPTCHA, то это значение будет пустым, но если вы поставили галочку рядом с “I’m not a robot”, то вы увидите длинную строку с символами.

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

Шаг 3

К счастью для нас, команда разработчиков Google сделала тяжелую работу за нас, так что перейдем к проекту ReCAPTCHA на Github и возьмем копию материала recaptchalib.php . Поместите его в корневом каталоге вашего проекта и затем ссылайтесь на него в верхней части файла index.php :

Шаг 4

В этом материале содержится коллекция функций, которая посылает g-recaptcha-response (вместе с нашим секретным ключом) в Google через HTTP запрос. Затем они собирают ответ, проверяя, был ли CAPTCHA успешным. Для его использования нужно сначала создать пару переменных перед закрытием PHP тега:

ReCaptcha() проверяет присутствие вашего секретного ключа. Если его нет, то он убивает процесс и советует нам пойти и взять ключ. Мы пропускаем наши детали через следующий код:

Шаг 5

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

Наконец, добавьте закрывающий PHP тег после формы:

Это отображает форму, если она была успешно отправлена, в этом случае отображается короткое благодарственное сообщение.

Заключение

Это было черновой и готовой PHP реализацией No CAPTCHA reCAPTCHA. Она открыта для улучшения, но, надеюсь, даст вам понимание основ. Признателен команде разработчиков Google за предоставление материала и благодарен Matt Aussaguel за указание на него.

HackWare.ru

Этичный хакинг и тестирование на проникновение, информационная безопасность

Как добавить на сайт reCAPTCHA v3 для защиты от парсинга и спама

В этой заметке я покажу примеры кода для интеграции reCAPTCHA v3 на сайт для защиты от просмотра страницы ботами (парсинг), для защиты от автоматических действий на сайте и блокировки спама.

Документация по интеграции reCAPTCHA v3 на сайт довольно скудная и запутанная. Я пошагово покажу пример добавления reCAPTCHA v3 на сайт и объясню используемый код (PHP и JavaScript) чтобы при необходимости вы могли внести нужные вам изменения.

Причём поскольку я тоже (как и большинство других веб-мастеров) интегрирую reCAPTCHA v3 в уже готовый проект с обширным исходным кодом, то я для себя выбрал подход минимального вмешательства в уже существующий код веб-сайта. К примеру, при добавлении reCAPTCHA v3 для проверки сделанных запросов из форм, исходный код форм вообще не будет меняться — будет вставлен небольшой фрагмент JavaScript кода, добавляющий прослушивание событий и внесение необходимых изменений «на лету».

Google reCAPTCHA v3 отличается от предыдущей версии (которая по-прежнему доступна для использования) reCAPTCHA v2 тем, что от пользователя не требуется абсолютно никаких действий. То есть проверка проходит автоматически и незаметно. Благодаря такому подходу кроме привычно интеграции в формы (для отправки комментариев, обратной связи, доступа к сервису) reCAPTCHA v3 можно использовать и для защиты просмотра страниц от ботов.

Имеется ввиду следующий ситуация: пользователь запрашивает страницу, но перед показом выполняется проверка — не является ли этот пользователь ботом. Если пользователь не является человеком, то запрещаем ему показ страницы. Такой вариант, в принципе, можно реализовать и с reCAPTCHA v2, но можно быть уверенным, что увидев капчу для просмотра страницы (даже если нужно всего лишь один раз кликнуть мышкой), очень многие пользователи просто закроют вкладку браузера. Google reCAPTCHA v3 лишена этого недостатка, поскольку пользователю ничего не показывается и от него не требуются никаких действий.

Какие последствия блокировки доступа ботам к сайту

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

Во-первых, описанная техника заблокирует не только плохих ботов, но и хороших — таких как поисковых обходчиков от Google и Yandex. Это приведёт к тому, что если не будут предприняты дополнительные меры (например, разрешение доступа к сайту с IP принадлежащим Google и Yandex в обход капчи), то в конце концов сайт выпадет из индекса поисковых систем.

Во-вторых, некоторыми партнёрскими программами запрещено показывать рекламу на страницах, для которых закрыт доступ ботов (таких ботов как Mediapartners-Google и AdsBot-Google* для Google AdSense и YandexDirect для Рекламной Сети Яндекса). Если на защищаемом сайте показывается реклама, то нужно обеспечить доступ к страницам в обход капчи — поскольку эти роботы сами по себе не способны пройти тест «на человека».

При этом проверка качества ботов для доступа в обход капчи ни в коем случае не должна основываться только на User Agent клиента, поскольку его можно легко подменить.

По причине такого важного влияния блокировки доступа ботам, в этой статье рассмотрено два варианта блокировки:

• блокировка к просмотру сайта
• и более мягкий вариант — блокировка отправки форм

Вы сможете выбрать наиболее подходящий для вас. Либо сочетать оба приёма: полную блокировку доступа настроить, например, для страниц авторизации, и обычную блокировку — на страницах обратной связи, формах комментирования и т.д.

Где получить ключи Google reCAPTCHA v3

Использование reCAPTCHA v3 является бесплатным. Вам достаточно указать домен и выбрать reCAPTCHA v3 или v2. В этой инструкции я буду рассматривать третью версию.

Кстати, там так интересно написано:

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

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

Впоследствии просматривать статистику, а также получить доступ к настройкам вы сможете со страницы https://www.google.com/recaptcha/admin.

Принципы работы reCAPTCHA v3

Первоначальный этап оценки пользователя (бот или человек) осуществляется исключительно средствами JavaScript. То есть боты без поддержки JavaScript отсеиваются уже на этом этапе. Кстати, видимо, в статистику запросов эти боты также не попадают.

Во время своей работы reCAPTCHA v3 собирает данные о взаимодействии с сайтом и формирует длинную строку — токен.

Этот токен нужно передать на сервер, обслуживающий сайт, и уже сервер с применением секретного ключа должен сделать запрос к сервису reCAPTCHA v3. Ответ будет иметь вероятностный характер — будет прислано число в диапазоне от 0 (бот) до 1 (человек). Вам самим нужно решить, какой порог является проходным для данного сайта.

Исходя из этой информации сервер должен принять решение — обрабатывать ли полученный от пользователя запрос (например, показать ли ему страницу, принять ли присланные из формы данные и т.д.).

Пример на PHP для включения reCAPTCHA v3

Мой вариант реализации состоит из двух фрагментов PHP кода. Первый лучше расположить в начале файла. Второй фрагмент нужно расположить так, чтобы выводимый им HTML находился ближе к концу исходного кода вашего сайта. Причём вам необязательно делать это с помощью PHP — вы можете вставить этот фрагмент другим образом — только в этом случае обратите внимание, что там экранированы одинарные кавычки — не забудьте отменить экранирование (убрать обратные слэши).

Прежде чем показать код (в который я также вставил много комментариев), начну с объяснения принципа работы. В самом начале делается проверка — есть ли у пользователя токен. Если нет, то вместо показа пользователю страницы сайта, выводится HTML/JavaScript код, который только получает токен и сразу же возвращает пользователя на индексную страницу (все GET запросы сохраняются, но к ним добавляется ещё одна переменная — token).

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

Первый фрагмент кода отвечает и за проверку ботов при доступе к сайту, и за проверку ботов при отправке форм.

Обратите внимание на переменные:

Первая включает проверку при доступе к страницам (по умолчанию отключено), вторая — проверку при отправке формы. Установите значения на нужную вам конфигурацию (они работают независимо друг от друга).

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

Это чистый JavaScript без использования jQuery. Обратите внимание, как я обращаюсь к форме:

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

Не забудьте установить свои собственные ключи:

• в первом фрагменте нужно установить приватный ключ и два раза ключ сайта (в выводимом HTML/JavaScript коде)
• во втором фрагменте дважды нужно установить только ключ сайта — он также окажется в предназначенном для пользователя HTML/JavaScript

Официальная документация Google reCAPTCHA v3

Официальную информацию и инструкции вы найдёте на страницах:

• https://developers.google.com/recaptcha/docs/v3
• https://developers.google.com/recaptcha/docs/verify

Как это часто бывает с официальной документацией — на её основе невозможно ничего понять и невозможно что-либо настроить до рабочего состояния…

Самую важную информацию о реализации reCAPTCHA я позаимствовал из этой статьи:

При этом та инструкция содержит критическую логическую ошибку — для принятия решения используется присланное поле success. Но дело в том, что данное поле только говорит о том, являлся ли присланный токен верным токеном для данного сайта — о том, бот это или не бот, данное поле никак не сообщает. Настоящее значение, на которое нужно ориентироваться, это score. О нём чуть позже. То есть если в своей проверке использовать success, то даже явные боты, которые, может быть, набрали 0 очков, но которые сумели просто получить токен, будут успешно проходить проверку.

Тем не менее официальная документация имеет несколько познавательных фактов о reCAPTCHA — рассмотрим их.

Во-первых, там написано, что результат проверки с сервиса reCAPTCHA возвращается в виде объекта JSON. После конвертации в массив он имеет примерно такой вид:

Значение полей следующее:

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

Ограничения токена

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

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

Размещение на вашем сайте

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

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

Интерпретация очков

reCAPTCHA v3 возвращает очки (1.0 очень вероятно хорошее взаимодействие, 0.0 весьма вероятно бот). Основываясь на этих очках, вы можете предпринять различные действия в контексте вашего сайта. Каждый сайт отличается от других, но ниже несколько примеров, как сайты используют очки. Как примеры ниже, для лучшей защиты своего сайта выполняйте действия «за сценой» вместо блокировки трафика.

Случай использования	Рекомендация
homepage	Наблюдайте за полной картиной в вашей панели администратора: сколько из пришедших это пользователи, а сколько разного рода парсеры
login	При низком показатели очков, требуйте 2-факторную аутентификацию или верификацию по почте для предотвращения атака связанных с учётными данными
social	Отправляйте комментарии от пользователей с подозрением на ботов на модерацию, ограничьте для них количество безответных запросов в друзья
e-commerce	Давайте приоритет реальным покупателям и выявляйте запросы, которые могут оказаться ненастоящими

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

Заключение

Этот код я писал под конкретные особенности моего сайта. Вполне возможно, что это же самое можно было сделать более изящно. Но, главные его достоинства:

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

На самом деле, есть место для улучшений: например, в приведённой реализации каждый поступивший от пользователя запрос проверяется. Можно, например, после первой проверки сохранять на сервере на некоторое время одобренный IP адрес и допускать к сайту без проверок. Либо можно генерировать уникальный маркер и сохранять в кукиз пользователя и в базе данных на сервере, сделав этот маркер действительным, например, на 10 минут.

При установке полной проверки доступа можно добавить функцию для проверки IP по WHOIS и допуска к сайту без капчи IP принадлежащих Google и Яндекс — чтобы поисковые роботы могли продолжать сканировать сайт.

How to build a Bootstrap email form with ReCaptcha and PHP in 30 minutes

In this tutorial, I will show you how to easily and quickly add a captcha to your Bootstrap form to prevent spam. We will be using Google’s ReCaptcha, the most popular Captcha solution today.

As a base, I will be using an HTML contact form with the PHP backend from one my previous tutorials. You can use it with any other Bootstrap form that you have.

Our form will be using HTML5 syntax sprinkled with some Bootstrap scaffolding and a JavaScript validator.

We will submit it via AJAX (the page will not reload), and then process the form values with PHP.

And finally, we will send an email with PHP and return a response to the original page that will be shown in a status message above the form.

As I mentioned before, I will mostly focus on working with ReCaptcha today and not on the Bootstrap form itself too much. So, in case you have missed it, have at least a quick look at my Bootstrap form tutorial.

Demo & Links

Ok, let’s do it!

1. Register your site

To be able to use ReCaptcha, you will need to register your website on ReCaptcha’s website first.

After successful registration, you will get a pair of keys to use with your ReCaptcha. Leave the page open or copy the keys to a text file, we will need them soon.

2. HTML

We will use the contact form’s template from the previous tutorial + we will add a reCAPTCHA element and a hidden input next to it to help us with the JavaScript validation.

Let’s explain the HTML code a bit:

• we have an HTML contact form ready written with the Bootstrap markup
• the main 3rd party scripts & stylesheets that will be used are: jQuery, Bootstrap 4, CSS, and JavaScript

To add a ReCaptcha to your form, you just need:

• to include <div data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div> on a place you need it in your form (replace the site key with your own key from the first step)
• Include the ReCaptcha JS to initialize ReCaptcha on the page — <script src='https://www.google.com/recaptcha/api.js'></script>
• I also use data-callback and data-expired-callback attributes on the g-recaptcha div — these are optional and I will use them to make ReCaptcha cooperate with the validator

Here’s the full code of the form

3. PHP

In the PHP, we will be using Google’s client library that will take care of the verification.

You can use Composer to install it in your project, download it from GitHub or simply use the version I included in the Download package.

The major part of the code is also from my previous tutorial, so I will try to recap it just briefly.

Let’s name the file contact.php and see what we’ll do in it:

• in the beginning, we need to require the ReCaptcha PHP library — require('recaptcha-master/src/autoload.php');
• and do some configuration stuff, for example entering your Secret Key — $recaptchaSecret = 'YOUR_SECRET_KEY';
• We also set the additional variables as the emails to send the email to, subject and the success/error messages
• then, you’ll need to initialize the class with your Secret Key — $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret) ;
• send a call to validate the ReCaptcha — $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
• throw an exception if the validation fails — if (!$response->isSuccess())
• the script then composes the email message, sends it, and returns a JSON response. (The form is submitted by AJAX in default.)

4. JavaScript

Our JavaScript file contact.js will take care of:

• validating the inputs with Bootstrap validator
• handling the JS callbacks from ReCaptcha(we will fill in the hidden input[data-recaptcha] based on the ReCaptcha’s response. If successful, we fill this input in = the validator will consider the form being valid.)
• AJAX sending the form
• and lastly, displaying the success or error message and also emptying the form.

Here’s the code:

5. Result

You should have a working contact Bootstrap contact form with ReCaptcha and PHP background now.

Thanks for the 50 clap �� if you enjoyed this article! Also, check out my other Bootstrap tutorials or my Bootstrap templates.

About The Author

Ondrej Svestka is a Bootstrap and front-end enthusiast and founder of Boostrapious.

Добавляем reCAPTCHA от Google на сайт

Нет капчи на сайте, приходит спам, установил капчу, вообще ничего не приходит. Что же делать?

Поставте reCAPTCHA от Google, пусть Google поможет вам в борьбе со спамом. reCAPTCHA проста и понятна для человека (требуется лишь постукивание пальцем, щелчок мышью или нажатие пробела на клавиатуре в нужном поле) и практически непонятна для робота.

К примеру у нас есть простая страница с формой:

Как работает reCAPTCHA?

Пользователь жмет на кнопку «Я не робот», если анализ Google уверен, что вы человек, то все хорошо, иначе появится вторая проверка, например ввод слова или выбор нескольких картинок одной тематики из массива изображений, пример:

Так же на этот вопрос есть отличный ответ в виде видео от Google:

Удобно? Тогда приступим к интеграции на сайт.

Добавляем reCAPTCHA на сайт

Добавляем reCAPTCHA API key

Для начала необходимо добавить reCAPTCHA API key, для этого перейдите по ссылке: https://www.google.com/recaptcha/admin, и заполните поля: метка (1), домены (где будет использоваться reCAPTCHA) (2) и жмем на кнопку «Register» (3).

После чего получим данные для добавления reCAPTCHA на сайт:

Добавляем reCAPTCHA в форму

На страницу добавляем js скрипт из поля 3, скрипт можно добавить перед закрывающемся тегом </head> или </body> , далее в форму и добавляем блок с капчей из поля 4 (поля из второго скриншота):

Где data-sitekey — значение из поля 1 (второй скриншот).

Верификация reCAPTCHA

После того как добавили блок reCAPTCHA в форму нам будет приходить постом 3 значения: name , email и g-recaptcha-response . Перед обработкой полученных данных необходимо валидировать name и email , а также отправить значение g-recaptcha-response Google для проверки.

Пропустим валидацию name и email и перейдем к g-recaptcha-response . Разработчики Google ReCAPTCHA уже сделали всю работу за нас по верификации капчи, поэтому переходим к проекту ReCAPTCHA на Github и скопируем файл recaptchalib.php: https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php.

Затем положим его в удобное место (я положу в корень) и подключаем перед верификацией капчи:

Класс ReCaptchaResponse отправит содержимое g-recaptcha-response и секретный ключ в Google, затем получит ответ и проверит, был ли он успешен:

Теперь соберем все вместе:

Дополнительно

Сменить цвет reCAPTCHA можно с помощью атрибута data-theme, который может принимать значение dark и light (по умолчанию):

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

задать русский язык

Если у вас есть вопросы или предложения по улучшению кода описанного в статье пишите в комментариях.
Я всегда открыт к конструктивному диалогу