В този урок ще разгледаме процеса на интегриране на 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. Вземете recaptcha токена, като използвате функцията ref и executeAsync() (Преди да изпратите данните си в бекенда)
  5. Накрая нулирайте captcha. Това е необходимо за подготвяне на recaptcha за последваща проверка, ако е необходимо (напр.:- Ако потребителското име или паролата са невалидни при влизане, captcha трябва да се нулира преди повторен опит)

По-долу е примерен React код за това:

За Аз не съм роботcaptcha квадратче, просто премахнете подпората за размера (ред 33) и заменете ред 9 с recaptchaRef.current.getValue()

Забележка: Предизвикателството recaptcha ще бъде извикано имплицитно, ако Google открие някаква подозрителна потребителска активност. Не можете изрично да извикате предизвикателството или да промените вероятността за него. За да увеличите вероятността предизвикателството да бъде извикано (може би за тестови цели), опитайте да стартирате приложението в режим „инкогнито“ заедно с VPN връзка.

Пакетът също така предоставя незадължителни реквизити като тема, позиция на значката и т.н. Вижте документите на пакета за това.

Стъпка 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