1

Does anyone know, is it possible to verify Recaptcha straight from the front-end. I'm building the app in react and to send mail I'm using emailjs so that I don't have to build any backend whatsoever, and so I have to add a Recaptcha to check if the messages are sent by humans and here is where my problem begins.

I tried for at least two days to get this working. I've tried doing it with the grecaptcha.execute but even that still thinks that I'm gonna send the token to the backend.

My code right now:

import React, { useState } from 'react'
import { Form, Field } from 'react-final-form'
import { formValidation } from './FormValidation'
import emailjs from 'emailjs-com'
import Recaptcha from 'react-recaptcha'

function recaptchaLoaded() {
    console.log("Recaptcha is loaded");
}

let isVerified = false;
function verifyCaptcha(response) {
    console.log(response);
    if (response)
        isVerified = true;
}


function expiredCaptcha() {
    isVerified = false;
}

const ContactForm = () => {
    const [userInfo, setUserInfo] = useState('');

        return (
            <MessageFormSection>
                <h2>Wypełnij formularz</h2>
                <small>Odpowiadamy naprawdę szybko!</small>
                <Form 
                    onSubmit={() => {
                        if (isVerified) {
                            emailjs.sendForm('service_xuu4z8k', 'template_54zt0z9', '#contact-form', 'user_C1OXTe9qBeqb5ZOmCejLc')
                                .then((result) => {
                                    setUserInfo('Twoja wiadomośc została wysłana poprawnie');
                                }, (error) => {
                                    setUserInfo('Podczas wysyłania twojej wiadomości pojawił się błąd - Wiadomość nie została wysłana.');
                                });
                        } else {
                            alert('Please verify');
                        }
                    }}
                    initialValues={{
                        fullName: '',
                        email: '',
                        title: '',
                        message: '',
                        policy: null,
                    }}
                    validate={(values) => formValidation.validateForm(values)}
                    render={({handleSubmit}) => (
                        <form onSubmit={handleSubmit} id="contact-form">
                            <Field name="fullName">
                                {({input, meta}) => (
                                    <div className="fullname-box">
                                        <label htmlFor="form-fullname-input">Imię i Nazwisko</label>
                                        <input {...input} id="form-fullname-input" placeholder="Jan Kowalski"/>
                                        {meta.error && meta.touched && <span>{meta.error}</span>}
                                    </div>
                                )}
                            </Field>
                            <Field name="email" type="email">
                                {({input, meta}) => (
                                    <div className="email-box">
                                        <label htmlFor="form-phone-input">Email</label>
                                        <input {...input} id="form-phone-input" placeholder="[email protected]"/>
                                        {meta.error && meta.touched && <span>{meta.error}</span>}
                                    </div>
                                )}
                            </Field>
                            <Field name="title">
                                {({input, meta}) => (
                                    <div className="title-box">
                                        <label htmlFor="form-title-input">Tytuł</label>
                                        <input {...input} id="form-title-input" placeholder="Wspólna praca nad nowym projektem!?"/>
                                        {meta.error && meta.touched && <span>{meta.error}</span>}
                                    </div>
                                )}
                            </Field>
                            <Field name="message">
                                {({input, meta}) => (
                                    <div className="message-box">
                                        <label htmlFor="form-message-input">Twoja wiadomość</label>
                                        <textarea rows="3" {...input} id="form-message-input" placeholder="Chciałbym z wami współpracować!"/>
                                        {meta.error && meta.touched && <span>{meta.error}</span>}
                                    </div>
                                )}
                            </Field>
                            <Field name="policy" type="checkbox">
                                {({input, meta}) => (
                                    <div className="checkbox-box">
                                        <input {...input} id="form-policy-checkbox"/>
                                        <label htmlFor="form-policy-checkbox">Wyrażam zgodę na przetwarzanie moich danych osobowych</label>
                                        {meta.error && meta.touched && <span>{meta.error}</span>}
                                    </div>
                                )}
                            </Field>
                            <Recaptcha
                                sitekey="6LfIqMsZAAAAAPl6BP3bLn5BAtC8RgqwRGAItZxp"
                                render="explicit"
                                onloadCallback={recaptchaLoaded}
                                verifyCallback={verifyCaptcha}
                                expiredCallback={expiredCaptcha}
                                />
                            <div className="buttons">
                                <button type="submit" id="submit-btn">Submit</button>
                            </div>
                            <span className="user-info">{userInfo}</span>
                        </form>
                    )}
                />
                
            </MessageFormSection>
        )
}  

export default ContactForm;

The thing that I'm getting in the verifyCaptcha is the token (I think)

And so my question is it possible to verify a Recaptcha without the backend, straight from react.


I didn't find any way to validate the Recaptcha without a backend. (I've tried making POST request from the frontend but then I was getting errors about CORS)

So my answer to this problem is ultimately making an AJAX call to a small PHP script which is gonna both verify the Recaptcha and send the mail.

The question still stands - because I would really want to use the only frontend in this project - but for now, this is all I've got.

1
  • 1
    If the frontend would validate the Recaptcha and send an "okay, this was fine" flag onwards, what would prevent an evil robot from only sending an "okay, this is fine" flag onwards?
    – AKX
    Commented Sep 16, 2020 at 12:13

0