В этом руководстве мы рассмотрим процесс интеграции reCAPTCHA v2 (невидимый) с React и Node.js с помощью пакета npm react-google-recaptcha.

Шаг 1. Генерация ключей для google recaptcha

Чтобы использовать сервис Google reCAPTCHA, сначала нам нужно зарегистрировать наше приложение и получить пару ключей сайта и закрытого ключа.

Для этого делаем следующее:

  1. Посетите консоль администратора Google reCAPTCHA.
  2. Щелкните значок «+», чтобы зарегистрировать новый сайт / приложение.
  3. Выберите версию captcha как reCAPTCHA v2 и введите как невидимый.
  4. Скопируйте свой сайт и приватные ключи для дальнейшего использования.
  5. Добавьте домен вашего приложения в список разрешенных доменов. В целях разработки добавьте в список Localhost (с учетом регистра).

Шаг 2. Настройка клиентской части

Установите пакет react-google-recaptcha, используя npm или yarn.

npm install react-google-captcha
OR
yarn add react-google-captcha
  1. Импортируйте компонент <ReCaptcha/>
  2. Включите его в свой метод возврата.
  3. Вам также потребуется ref для этого компонента.
  4. Получите токен рекапчи с помощью функций ref и executeAsync() (перед отправкой данных на серверную часть)
  5. Наконец, сбросьте капчу. Это необходимо для подготовки 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