如何签入用户已在 Google recaptcha 中选中复选框的 js？
Posted
技术标签:
【中文标题】如何签入用户已在 Google recaptcha 中选中复选框的 js？【英文标题】：How to check in js that user has checked the checkbox in Google recaptcha? 【发布时间】：2015-04-24 20:17:12 【问题描述】：我在结尾之前添加了以下内容
<script src='https://www.google.com/recaptcha/api.js'></script>
我在表格结束前添加了这个
<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>
我可以看到类似于https://developers.google.com/recaptcha/的recaptcha
但是，当用户在未选中复选框的情况下按下数据时，将提交数据。我需要添加任何其他代码来检查用户是否按下了复选框？希望在 js 中？
【问题讨论】：
你读过这个页面了吗：developers.google.com/recaptcha/docs/verify yeep.. 似乎无法弄清楚如何让它工作 你应该在你的后端服务器上请求。浏览器单独执行此操作不是很安全。 没关系。如何从前端请求可能使用 jquery？ 【参考方案1】：当复选框被选中时，Google 有一个回调选项。
将此添加到您的表单元素中：
data-callback="XXX"
例子：
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>
还有一个禁用属性到您的提交按钮。
例子：
<button id="submitBtn" disabled>Submit</button>
然后创建一个回调函数并编写您需要的任何代码。
例子：
function recaptchaCallback()
$('#submitBtn').removeAttr('disabled');
;
【讨论】：
@mohanenb：这只是为了防止发送，并不是像往常一样不检查服务器端。 如何解决超时问题？如果有人检查了 reCaptcha，然后几分钟内没有提交表单，那么 reCaptcha 将过期，但用户仍然可以提交表单..！ @AkshayKapoor data-expired-callback 只是将函数 recaptchaCallback() 放在 document.ready 之外，以便验证码控件可以访问它。否则，您将收到一个 console.log 错误，例如“ReCAPTCHA 找不到用户提供的功能：”。 此方案仅在验证码解析时调用函数，而没有提供验证验证码是否解析的函数。跨度> 【参考方案2】：您也可以调用 grecaptcha 对象进行检查。 grecaptcha.getResponse();不勾选时为空，勾选时有验证码。
grecaptcha.getResponse().length === 0 未选中时
function isCaptchaChecked()
return grecaptcha && grecaptcha.getResponse().length !== 0;
if (isCaptchaChecked())
// ...
【讨论】：
但是，如何获取 grecaptcha.getResponse()？ 一加载谷歌的recaptcha，它就会加载。包的一部分 我试过但没有用，控制台调试说>>“未捕获的 ReferenceError: grecaptcha is not defined” 脚本应该先加载recaptcha，尝试异步或使用setTimeoutvar isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0);【参考方案3】：
要检查 google recaptcha 是否被检查，您可以通过以下代码进行检查：
<script>
if(grecaptcha && grecaptcha.getResponse().length > 0)
//the recaptcha is checked
// Do what you want here
alert('Well, recaptcha is checked !');
else
//The recaptcha is not cheched
//You can display an error message here
alert('Oops, you have to check the recaptcha !');
</script>
【讨论】：
【参考方案4】：要检查 google recaptcha v2 是否被检查，您可以通过以下代码进行检查：
var checkCaptch = false;
var verifyCallback = function(response)
if (response == "")
checkCaptch = false;
else
checkCaptch = true;
;
$(document).ready(function()
$("#btnSubmit").click(function()
if (checkCaptch && grecaptcha.getResponse()!="")
//Write your success code here
);
)
【讨论】：
【参考方案5】：让浏览器为您完成这项工作！ （基于 slinky2000 的回答）
注意：这只是为了防止发送“意外”未经检查的验证码。 您仍然需要在服务器端验证验证码，因为机器人不在乎......
在div.g-recaptcha 正下方添加一个带有required=true 属性的不可见输入标签。
<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none;
position:absolute;
bottom:0;'>
将div 和position=relative; 括起来，以将上面的bottom:0; 指向recaptcha 的底部。
现在浏览器很好地要求填写此字段 - 指向 recapcha。
现在我们需要回调：
<div class="g-recaptcha" data-callback="recaptchaCallback" ...
和
function recaptchaCallback()
$('#recaptcha_check_empty').val(1);
【讨论】：
【参考方案6】：<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo 6LfSJmocAAAAAFFMpMKB1CtYNJYDyDswO7GpxRXS ;?>">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA</title>
</head>
<body>
<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo GOOGLE_KEY ;?>"></div>
</div>
</body>
</html>
【讨论】：
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案7】：如果由于某种原因您像我一样手动调整表单，并且 required 不起作用。
首先导入验证码
import ReCAPTCHA from 'react-google-recaptcha'
在你的组件中应用它
<ReCAPTCHA style=margin: '5px', transform: 'scale(0.8)' ref=recaptchaRef sitekey=recaptchaKey onChange=updateRecaptcha/>
您可以使用useRef 或只使用您导入的ReCAPTCHA，我使用的是useRef。
const recaptchaRef = useRef<any>()
现在，我如何检查recaptchaRef 是否被选中？
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0)
//your condition
基本上，你是说'如果recaptcha是真的，那么就这样做'
这是可以帮助您的完整表单代码（我正在使用 typeScipt）
const Formid = // yout formid
const FormSpark = `https://submit-form.com/$Formid`
type FormState =
name: string,
mail: string,
message: string
const initialState =
name: '',
mail: '',
message: '',
const [wrongmail, setWrongmail] = useState(false)
const [wrongname, setWronname] = useState(false)
const [wrongtext, setWrongtext] = useState(false)
const [alert, setAlert] = useState(false)
const recaptchaRef = useRef<any>()
const recaptchaKey = //your recaptcha public key const [recaptchaToken, setRecaptchaToken] = useState<string>()
const [formstate, setFormState] = useState<FormState>(initialState)
const submit = async(event: FormEvent) =>
event.preventDefault()
await postSubmission()
const updateRecaptcha = (token: string | null)=>
setRecaptchaToken(token as string)
const name, mail, message = formstate
const postSubmission = async() =>
const payload =
...formstate,
"g-recaptcha-response": recaptchaToken
try
if (name && mail && message)
if (mail.includes('@') && mail.includes('.') && mail.length > 5)
if (name.includes(' ') && name.length> 5)
if (message.length > 20)
if (recaptchaRef.current)
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0)
console.log('hola')
setAlert(true)
const result = await axios.post(FormSpark, payload)
setFormState(initialState)
recaptchaRef.current.reset()
if (result)
setTimeout(() =>
setAlert(false)
,2000)
if (!name && !(name.length> 5) && !(name.includes(' ')))
setWronname(true)
setTimeout(() =>
setWronname(false)
,3000)
if (!mail && !mail.includes('@') && !mail.includes('.') && !(mail.length > 5))
setWrongmail(true)
setTimeout(()=>
setWrongmail(false)
,3000)
if (!message && !(message.length > 20))
setWrongtext(true)
setTimeout(() =>
setWrongtext(false)
,3000)
catch(error)
console.log(error);
const updateForm = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
const id, value = event.target
const formKey = id as keyof FormState
const updatedFormState = ...formstate
updatedFormState[formKey] = value
setFormState(updatedFormState)
【讨论】：
以上是关于如何签入用户已在 Google recaptcha 中选中复选框的 js？的主要内容，如果未能解决你的问题，请参考以下文章