En

Установка reCAPTCHA v3, на проекте CRYSTAL v1.0

25.02.2025


Данная инструкция подразумевает, что у вас уже подключен домен и ssl-сертификат.


1. Подключение reCAPTCHA v3.


Для подключения reCAPTCHA v3, необходимо раскомментировать код на проекте CRYSTAL v1.0, между строками - '// -- reCAPTCHA v3' и '// -- /reCAPTCHA v3', как на примерах ниже:

// -- reCAPTCHA v3
import { useRecaptchaV3 } from "../../hooks/useRecaptchaV3";
import { RECAPTCHA_V3_PUBLIC_KEY } from "../../constants/index.js";
// -- /reCAPTCHA v3

// -- reCAPTCHA v3 
const recaptchaV3 = useRecaptchaV3( 
RECAPTCHA_V3_PUBLIC_KEY, 
"Registration" 
); 
// -- /reCAPTCHA v3

Файлы в которых нужно раскомментировать код:

\frontend\src\features\accessModal\AccessModal.jsx

\backend\src\routes\user-routes.js


2. Создание файла .env с публичным ключем reCAPTCHA v3.


Введите в терминал команду, и замените примерный текст на ваш публичный ключ reCAPTCHA v3:

cd /var/www/crystal/frontend/env && echo VITE_RECAPTCHA_V3_PUBLIC_KEY="ВашПубличныйКлючReCAPTCHAv3" > .env

Cоберите проект, командой:

cd /var/www/crystal/frontend && npm run buildProdDomain

3. Создание файла .env с секретным ключем reCAPTCHA v3.


Введите в терминал команду, и замените примерный текст, на ваш секретный ключ reCAPTCHA v3:

cd /var/www/crystal/backend/env && echo RECAPTCHA_V3_SECRET_KEY="ВашСекретныйКлючReCAPTCHAv3" >> .env

Перезагрузите процесс PM2, командой:

pm2 restart 0

4. Проверка работы reCAPTCHA v3.


Вы можете проверить, работает ли reCAPTCHA v3, для этого перейдите в файл 'reCaptchaV3.js', в папке utils, по пути - 'backend\src\utils\reCaptchaV3\reCaptchaV3.js', и измените строку - 'else if (body.score < 0.5)', на 'else if (body.score < 1.5)' , обновите код на проекте, как в пункте 16, инструкции по развертыванию CRYSTAL v1.0 на VPC.


В данном случае, для того чтобы обновить код проекта на ВМ и перезагрузить процесс PM2, нужно ввести команду:

cd /var/www/crystal && git pull && pm2 restart 0

После обновления кода проекта на ВМ, откройте сайт с проектом, в браузере Chrome и нажмите 'f12', перейдите на вкладку - 'Сеть', сделайте пробную регистрацию не закрывая вкладку, нажмите во вкладке, появившийся пункт 'registration', затем выберите пункт - 'Ответ' в появившемся меню, там должна быть строка - 'Registration error, possibly a bot detected', это означает, что reCAPTCHA v3 работает, так как, максимально допустимый бал - 0,9 и вы не сможете зарегистрироваться.

Измените строку обратно на - 'else if (body.score < 0.5)', и обновите проект, после чего, заново зарегистрируйтесь, регистрация должна пройти успешно.

Проект тестируется в

BrowserStack

Поделиться

Копировать

BTC (Network BTC) - 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm

Ethereum (Network ERC20) - 0x05037ecbd8bcd15631d780c95c3799861182e6b8

Похожие посты

Этот сайт использует файлы cookies. Нажимая кнопку 'Принять' или продолжая пользоваться сайтом, вы соглашаетесь на использование файлов cookies.