В этом руководстве мы рассмотрим процесс интеграции reCAPTCHA v2 (невидимый) с React и Node.js с помощью пакета npm react-google-recaptcha.
Шаг 1. Генерация ключей для google recaptcha
Чтобы использовать сервис Google reCAPTCHA, сначала нам нужно зарегистрировать наше приложение и получить пару ключей сайта и закрытого ключа.
Для этого делаем следующее:
- Посетите консоль администратора Google reCAPTCHA.
- Щелкните значок «+», чтобы зарегистрировать новый сайт / приложение.
- Выберите версию captcha как reCAPTCHA v2 и введите как невидимый.
- Скопируйте свой сайт и приватные ключи для дальнейшего использования.
- Добавьте домен вашего приложения в список разрешенных доменов. В целях разработки добавьте в список Localhost (с учетом регистра).
Шаг 2. Настройка клиентской части
Установите пакет react-google-recaptcha, используя npm или yarn.
npm install react-google-captcha OR yarn add react-google-captcha
- Импортируйте компонент
<ReCaptcha/>
- Включите его в свой метод возврата.
- Вам также потребуется
ref
для этого компонента. - Получите токен рекапчи с помощью функций
ref
иexecuteAsync()
(перед отправкой данных на серверную часть) - Наконец, сбросьте капчу. Это необходимо для подготовки recaptcha для последующей проверки, если это необходимо (например: - Если имя пользователя или пароль были недействительными при входе в систему, captcha следует сбросить перед повторной попыткой)
Ниже приведен пример кода React для этого:
Для ввода кода Я не робот просто удалите указатель размера (строка 33) и замените строку 9 на recaptchaRef.current.getValue()
Примечание. Запрос recaptcha будет вызываться неявно, если Google обнаружит подозрительную активность пользователя. Вы не можете явно вызвать вызов или изменить его вероятность. Чтобы увеличить вероятность вызова задачи (возможно, в целях тестирования) попробуйте запустить приложение в режиме инкогнито вместе с подключением VPN.
Пакет также предоставляет дополнительные реквизиты, такие как тема, положение значка и т. Д. Ознакомьтесь с документацией пакета для this.
Шаг 3. Проверка токена на сервере
Извлеките токен из тела запроса и отправьте этот токен вместе с закрытым ключом, полученным на шаге 1, в API Google для получения оценок пользователей.
https://www.google.com/recaptcha/api/siteverify?secret=${YOUR_PRIVATE_KEY}&response=${token}
Вы получите объект JSON с ключом успеха. Этот ключ можно использовать, чтобы определить, исходил ли запрос от подлинного пользователя или от подозреваемого бота. Истинный успех означает настоящего пользователя.
data: { success: true, challenge_ts: ‘2021–10–18T04:33:00Z’, hostname: ‘localhost’ }
Ниже приведен пример фрагмента кода для серверной части:
Примечание. Перед отправкой кода в общедоступный репозиторий не забудьте удалить из кода свой закрытый ключ. Вы можете сохранить его в переменной среды и получить к нему доступ с помощью объекта process.env или конфигурационных переменных (при развертывании с помощью heroku). И добавьте свой файл .env в .gitignore.
Вот и все! Надеюсь, вы нашли это полезным. Если да, обязательно дайте мне знать в комментариях.
Больше контента на plainenglish.io