我是新来的反应者,尝试使用react-google-recaptcha-v3库。
我将它与Formik表单一起使用,并通过axios发布数据。当我在标头中发布硬编码的Recaptcha令牌时,它可以工作。但是,当我尝试将令牌与react-google-recaptcha-v3库一起使用时,它不起作用。我认为我使用的是错误的东西。
return (
<GoogleReCaptchaProvider reCaptchaKey='MY-KEY'>
<GoogleReCaptcha onVerify={token => this.setState({ recaptchaToken: token })} />
<Grid>
<Row>
<Col xs={6} xsOffset={3} id='auth-form-container'>
<Formik
initialValues={{ email: "" }}
validationSchema={forgotPasswordSchema}
onSubmit={(values, { setErrors, setSubmitting }) => {
const headers = {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
recaptcha: this.state.recaptchaToken
}
};
const body = {
UsernameOrEmail: values.email,
ReturnUrl: "/"
};
const url = "http://localhost:5000/api/Users/ResetPassword";
axios
.post(url, body, headers)
.then(result => {
// Do somthing
setSubmitting(false);
this.handleSuccess(result);
})
.catch(error => {
// Do somthing
setSubmitting(false);
//TODO: Add logging
console.log("Fejl");
if (error.response.status === 400) {
console.log("Bad Request ...");
this.setState({ errorMessage: "Bad Request" });
} else {
console.log("Something went wrong ...");
this.setState({ errorMessage: "Something went wrong" });
}
});
}}>
{({ isSubmitting }) => (
<Form>
{errorMessage ? <Error errorMessage={errorMessage} /> : null}
<Row>
<Col xs={12}>
<label htmlFor='email'>E-mail:</label>
<Field type='email' name='email' />
<ErrorMessage name='email'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
</Col>
</Row>
<Row>
<Col xs={12}>
<button type='submit' disabled={isSubmitting}>
Reset password
</button>
</Col>
</Row>
<Row>
<Col xs={12}>
<ul>
<li>
<Link to='/'>Back to login</Link>
</li>
</ul>
</Col>
</Row>
</Form>
)}
</Formik>
</Col>
</Row>
</Grid>
</GoogleReCaptchaProvider>
);