有谁知道,是否可以直接从前端验证 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 并发送邮件。
问题仍然存在——因为我真的很想在这个项目中使用唯一的前端——但现在,这就是我所拥有的。