Installing reCAPTCHA v3 on the CRYSTAL v1.0 project
February 28
upd: July 25
Contents:
These instructions assume that you already have connected domain and ssl certificate.
1. Enabling reCAPTCHA v3.
reCAPTCHA v3 will be triggered when a user registers, to enable it you need to uncomment the code on the
CRYSTAL v1.0 project, between the lines - '-- reCAPTCHA v3' and
'-- /reCAPTCHA v3', as in the examples below:
// -- reCAPTCHA v3
import { useRecaptchaV3 } from "../../shared/hooks";
import {
RECAPTCHA_V3_PUBLIC_KEY
} from "../../shared/constants";
// -- /reCAPTCHA v3
{/* -- reCAPTCHA v3 */}
<div className={styles.recaptcha_protected_message}>
<p>
This site is protected by reCAPTCHA and the Google
<Link
to={"https://policies.google.com/privacy"}
target="_blank"
rel="noopener"
>
{" "}
Privacy Policy
</Link>{" "}
and
<Link
to={"https://policies.google.com/terms"}
target="_blank"
rel="noopener"
>
{" "}
Terms of Service
</Link>{" "}
apply.
</p>
</div>
{/* -- /reCAPTCHA v3 */}
* Files where you need to uncomment the code:
\frontend\src\features\accessModal\AccessModal.jsx
\backend\src\modules\auth\auth.routes.js
2. Creating a .env file with the reCAPTCHA v3 public key.
Enter the command in the terminal, and replace the sample text with your reCAPTCHA v3 public key:
cd /var/www/crystal/frontend/env && echo VITE_RECAPTCHA_V3_PUBLIC_KEY="YourPublicKeyReCAPTCHAv3" > .env
Build the project with the command:
cd /var/www/crystal/frontend && npm run build:prod:domain
3. Creating a .env file with the reCAPTCHA v3 secret key.
Enter the command in the terminal, and replace the sample text with your reCAPTCHA v3 secret key:
cd /var/www/crystal/backend/env && echo RECAPTCHA_V3_SECRET_KEY="YourSecretKeyReCAPTCHAv3" >> .env
Restart the PM2 process with the command:
pm2 restart 0
4. Checking reCAPTCHA v3.
You can check if reCAPTCHA v3 works by going to the 'recaptcha-v3.js' file, in the path -
'\backend\src\shared\utils\recaptcha-v3\recaptcha-v3.js', and change the line - 'else if (body.score < 0.5)',
to 'else if (body.score < 1.5)'.
After updating the code, open the site
with the project in the Chrome browser and press 'f12', then click on the tab - 'Network', do a test registration, then without
closing the tab, click on the 'register' item that appears in the tab, then select the tab - 'Answer' in the
menu that appears, the answer should contain the line - 'Registration error, possibly a bot detected', this means that
reCAPTCHA v3 works because the maximum score is 0.9 and you won't be able to register.
Change the line back to - 'else if (body.score < 0.5)', and refresh the project, then re-register, the registration should be successful.
Share
BTC (Network BTC) - 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm
Ethereum (Network ERC20) - 0x05037ecbd8bcd15631d780c95c3799861182e6b8
Comment on