My Experience Implementing reCAPTCHA

I have a contact form that has been dormant, but recently gained more prominence, and with that prominence came... you guessed it, SPAM.

Here are the steps I went through to create a reCAPTCHA to prevent the SPAM.

I already have a reCAPTCHA account set up with Google.

I went to https://www.google.com/recaptcha/admin/create to create the reCAPTCHA, chose v3, ad entered my domain.

On the next page, I copied my keys and stored them safely.

On to Implementation

To be frank, I find google docs ambiguous, indistinct, and generally just shoddy, but here they are anyway:

• Client Side
• Server Side

Thankfully, there are enough drops in my knowledge bucket to figure out the details.

Client Side

The client side was easy enough. Just add a script reference to https://www.google.com/recaptcha/api.js and the following script:

function onSubmit(token) {
	document.getElementById("contact-form").submit();
}

And some attributes to the button:

<button 
	type="submit"
	class="g-recaptcha"
	data-sitekey="recaptcha-key" 
	data-callback='onSubmit'
	data-action='submit'>
	Submit
</button>

Server Side

Server side was also fairly straight forward. Just send the response along to Google with your secret key, and return true or false based on the score provided.

async function isHuman(captchaResponse) {
    const secretKey = process.env.RECAPTCHA_SECRET_KEY;

    try {
        const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                secret: secretKey,
                response: captchaResponse
            })
        });

        const data = await res.json();

        if (!data.success) {
            return false;
        }
        
        return data.score >= 0.7; // Accept only high-confidence requests
        
    } catch (error) {
        console.error('Error validating captcha:', error);
        return false;
    }
}

Then just check the humanness in the form post.

    if (!isHuman(req.body['g-recaptcha-response']))
        return res.redirect('/?error=Captcha validation failed');

So there ya go. My experience implementing reCAPTCHA. Easy-breezy.