[英]How to reset Google recaptcha with react-google-recaptcha
[英]Google ReCaptcha: react-google-recaptcha not verifying correctly
我有以下用於聯系表單的 React 組件:
import React from 'react'
import ReCAPTCHA from "react-google-recaptcha";
import {Container, Row, Col, Form, Button } from 'react-bootstrap'
import '../styles/contact.css'
class Contact extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
email: '',
company: '',
content: '',
showSuccess: false,
submitting: false,
verified: false,
reply: ''
};
this.handleSuccess = this.handleSuccess.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange = (value) => {
console.log("Captcha value:", value);
this.setState({
verified: true
})
};
handleInputChange = event => {
const target = event.target
const value = target.value
const name = target.name
this.setState({
[name]: value,
})
}
handleSuccess = () => {
this.setState({
name: '',
email: '',
company: '',
content: '',
showSuccess: true,
submitting: false,
})
}
handleSubmit = event => {
const url = 'https://xxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/email/send';
this.setState({
submitting: true
})
const payload = {
name: this.state.name,
email: this.state.email,
company: this.state.company,
content: this.state.content
}
if (this.state.verified) {
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
})
.then(this.handleSuccess)
.catch(error => alert(error))
event.preventDefault()
}
else {this.setState({reply: "Please verify the ReCaptcha."})}
}
render() {
return (
<section id="contact" name="#contact">
<Container>
<Row className="align-items-center">
<Col lg={{span: 5, order: 1}} xs={{ span: 12, order: 2}} className="form-background">
<Form id="contact-form-bottom" onSubmit={this.handleSubmit}>
<h4 className="h4">Don't be shy, say hi!</h4>
<Form.Group controlId="formBasicEmail">
<Form.Label>Full Name</Form.Label>
<Form.Control
as="input"
type="text"
placeholder="Enter your first name & surname"
name="name"
value={this.state.name}
onChange={this.handleInputChange}
required
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
as="input"
type="email"
placeholder="Enter your email address"
name="email"
value={this.state.email}
onChange={this.handleInputChange}
required
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Company Name</Form.Label>
<Form.Control
as="input"
type="text"
placeholder="Enter the name of your company"
name="company"
value={this.state.company}
onChange={this.handleInputChange}
required
/>
</Form.Group>
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Details</Form.Label>
<Form.Control
as="textarea"
type="text"
rows="3"
placeholder="How can we help you?"
name="content"
value={this.state.content}
onChange={this.handleInputChange}
required
/>
</Form.Group>
<ReCAPTCHA
className="g-recaptcha"
sitekey="XXXXXXXXXXXXXXXXXXX"
onChange={this.onChange}
theme="dark"
/>
{ this.state.verified ? <p id="error" className="error">{this.state.reply}</p> : null }
{ this.state.showSuccess ? <p id="success" className="success">Thank you, we will be in touch asap.</p> : null }
<Button id="submit" variant="primary" type="submit">
Submit
</Button>
</Form>
</Col>
</Row>
</Container>
</section>
)
}
}
export default Contact
我正在使用react-google-recaptcha
( https://www.npmjs.com/package/react-google-recaptcha )進行 Recaptcha 驗證,並在提交按鈕的頂部插入了組件:
<ReCAPTCHA
className="g-recaptcha"
sitekey="XXXXXXXXXXXXXXXXXXXXX"
onChange={this.onChange}
theme="dark"
/>
onChange function 應該設置state.verfied == true
onChange = (value) => {
console.log("Captcha value:", value);
this.setState({
verified: true
})
};
因此,如果 reCaptcha 完成並且表單在沒有重新加載頁面的情況下提交,則handledSubmit()
的這一部分會觸發:
if (this.state.verified) {
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
})
.then(this.handleSuccess)
.catch(error => alert(error))
event.preventDefault()
}
否則它應該呈現this.state.reply: "Please verify the ReCaptcha."
提交按鈕上方。
提交按鈕無需完成 reCaptcha 即可工作並提交表單。 它將頁面重新加載到http://localhost:8000/?name=Test&email=test&company=test&content=test&g-recaptcha-response=
我知道我使用 state 的解決方法可能不是使用此模塊的正確方法,但是react-google-recaptcha
文檔沒有提示如何將驗證與 reCaptcha API 正確集成。
很高興對此提供任何支持。 謝謝!
我需要更改 onChange function 來存儲 reCaptchaResponse,如下所示:
onChange = (result) => {
this.setState({
verified: true,
reCaptchaResponse: result,
})
};
其次,我更新了 handleSubmit 中的條件以更早地檢查驗證,並將 reCaptchaResponse 集成到有效負載中,如下所示:
handleSubmit = event => {
if (this.state.verified) {
const url = 'https://xxxxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/email/send';
this.setState({
submitting: true
})
const payload = {
name: this.state.name,
email: this.state.email,
company: this.state.company,
content: this.state.content,
result: this.state.reCaptchaResponse
}
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
})
.then(this.handleSuccess)
.catch(error => alert(error))
event.preventDefault()
} else {
this.setState({
reply: "Please verify the ReCaptcha"
})
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.