1

有谁知道，是否可以直接从前端验证 Recaptcha。我正在构建应用程序以响应并发送邮件我正在使用 emailjs，这样我就不必构建任何后端，所以我必须添加一个 Recaptcha 来检查消息是否是由人类发送的，这里是我的问题从哪里开始。

我尝试了至少两天来完成这项工作。我试过用 grecaptcha.execute 来做，但即便如此，我仍然认为我会将令牌发送到后端。

我现在的代码：

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="jankowalski@email.com"/>
                                        {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;

我在 verifyCaptcha 中得到的是令牌（我认为）

所以我的问题是可以在没有后端的情况下验证 Recaptcha，直接来自反应。

我没有找到任何方法来验证没有后端的 Recaptcha。（我尝试从前端发出 POST 请求，但后来我收到有关 CORS 的错误）

所以我对这个问题的回答最终是对一个小的 PHP 脚本进行 AJAX 调用，该脚本将验证 Recaptcha 并发送邮件。

问题仍然存在——因为我真的很想在这个项目中使用唯一的前端——但现在，这就是我所拥有的。

4

0 回答 0