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

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

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

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

// -- reCAPTCHA v3
        import { useRecaptchaV3 } from "../../hooks/useRecaptchaV3";
        // -- /reCAPTCHA v3

// -- reCAPTCHA v3
        const recaptchaV3PublicKey = import.meta.env.VITE_RECAPTCHA_V3_PUBLIC_KEY;
        const recaptchaV3 = useRecaptchaV3(
        recaptchaV3PublicKey,
        "Registration"
        );
        // -- /reCAPTCHA v3

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

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

\backend\src\routes\userRoutes.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 && pnpm buildProdDomain

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

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

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

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

pm2 restart 0

5. Проверка работы 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)’, и обновите проект, после чего, заново зарегистрируйтесь, регистрация должна пройти успешно.