Введение в reCAPTCHA и библиотеку React Google reCAPTCHA
CAPTCHA (полностью автоматизированный общедоступный тест Тьюринга для различения компьютеров и людей) - это тип теста, используемый для определения того, является ли пользователь человеком или ботом. Если вы имеете дело с ботом, CAPTCHA может быть полезна в следующих ситуациях:
- Ограничить регистрацию на услуги
- Предотвратить покупку большого количества билетов
- Предотвратить ложные комментарии
Самая распространенная форма CAPTCHA - это reCAPTCHA, сервис от Google. Я уверен, что вы сталкивались с этим раньше, когда просматривали Интернет.
В этой статье мы рассмотрим reCAPTCHA и узнаем, как реализовать ее в приложении React.
Что такое reCAPTCHA
ReCAPTCHA использует расширенный механизм анализа рисков и адаптивные задачи, чтобы предотвратить злонамеренные действия вредоносного ПО на вашем веб-сайте. Между тем, законные пользователи смогут входить в систему, совершать покупки, просматривать страницы или создавать учетные записи, а поддельные пользователи будут заблокированы.
Оригинальный вызов reCAPTCHA v1 был выпущен в 2007 году. Он выглядел примерно так.
Эта версия reCAPTCHA была закрыта в 2018 году.
reCAPTCHA v2 против reCAPTCHA v3
В настоящее время доступны две версии reCAPTCHA: версия 2 и версия 3.
Последней версией reCAPTCHA является версия 3, выпущенная в 2018 году. ReCAPTCHA v3 возвращает оценку для каждого запроса в зависимости от вероятности взаимодействия с ботом. В зависимости от полученной оценки вы можете настроить действия.
Хотя v3 является последней версией, более распространенной формой reCAPTCHA является версия 2. Она была выпущена еще в 2014 году.
reCAPTCHA v2 имеет два варианта: флажок или невидимый.
Флажок - отображается флажок, как показано ниже.
Иногда вам нужно будет сделать дополнительный шаг, чтобы проверить, являетесь ли вы человеком, а не роботом. Это будет непростая задача, связанная с выбором правильных изображений.
Невидимый: отображается значок и в фоновом режиме запускается reCAPTCHA. Если он обнаружит бота, появится указанная выше задача.
Реализация в приложении React
Теперь, когда мы понимаем, что такое reCAPTCHA, мы создадим простой пример в приложении React. В этом примере мы будем использовать шаблонное приложение из create-react-app.
Получите ключ Google
Первое, что нам понадобится, это ключ reCAPTCHA от Google. Посетите их верхнюю страницу здесь и перейдите в консоль администратора.
Вы попадете на следующую страницу. Добавьте метку для вашего ключа reCAPTCHA. Затем выберите версию, которую хотите использовать. В нашем примере мы будем использовать флажок версии 2. Нам также нужно будет добавить любые доменные имена, в которых мы будем использовать эту reCAPTCHA. Регистрация ограничена доменами, которые вы вводите здесь, а также любыми поддоменами. В нашем примере мы просто будем использовать localhost для тестирования в нашей локальной среде.
После создания вы получите два ключа. Один - это ключ сайта, а другой - секретный ключ. Ключ сайта понадобится на стороне клиента для идентификации вашей регистрации. Секретный ключ будет использоваться для проверки ответа пользователя на стороне сервера. Это секретный ключ, и его нельзя передавать на стороне клиента.
Установите response-google-recaptcha
После получения ключей мы установим response-google-recaptcha в наш проект. Это надежная библиотека, которую еженедельно скачивают более 270 000 раз. Эта библиотека предоставляет нам компонент React для использования в Google reCAPTCHA v2.
После установки import ReCAPTCHA from ‘react-google-recaptcha’.
Для рендеринга компонента вам понадобятся следующие реквизиты:
- sitekey - ключ клиента API от Google
- onChange - функция обратного вызова, когда пользователь вводит капчу
import ReCAPTCHA from ‘react-google-recaptcha’
const App = () => {
function onChange(value) {
console.log('Captcha value:', value);
}
return (
<div className="App">
<ReCAPTCHA
sitekey="YOUR-SITE-KEY"
onChange={onChange}
/>
</div>
);
};Если мы отобразим приведенный выше код на экран, мы должны увидеть следующий флажок reCAPTCHA, отображаемый в нашем приложении.
Компонент ReCAPTCHA также принимает следующие необязательные свойства, среди прочего:
- тема - (светлая или темная), чтобы изменить тему виджета.
- размер - (компактный, нормальный или невидимый) для изменения размера или типа CAPTCHA.
- onErrored - функция обратного вызова, если произошла ошибка запроса
- badge - (bottomright, bottomleft или inline), чтобы изменить положение значка reCAPTCHA.
Ознакомьтесь с документацией, чтобы узнать больше о дополнительных опциях.
Следующие шаги
После выполнения задачи CAPTCHA вы получите токен ответа. Этот токен будет действителен в течение двух минут.
С помощью этого токена вам нужно будет отправить запрос на сервер Google для проверки ключа. Ознакомьтесь с документацией здесь, чтобы узнать больше о том, как это сделать.
Заключение
Спасибо за прочтение! Надеюсь, вы смогли узнать о CAPTCHA и reCAPTCHA из этой статьи. Реализовать его в приложении React легко, и это может дать вашему приложению еще один уровень защиты от ботов.
Чтобы узнать, как настроить Google OAuth в приложении React, ознакомьтесь со статьей ниже.
