reCAPTCHA(reCAPTCHA v2 或 reCAPTCHA v3)是由Google提供的一种服务,用于验证用户是否为人类,通常用于防止自动化程序(机器人)的滥用。reCAPTCHA的工作原理是通过让用户完成一些简单的任务(如识别图像中的文字或勾选复选框)来验证其身份。
reCAPTCHA的设计初衷就是为了防止自动化程序的滥用,因此它的响应token(通常称为g-recaptcha-response
)只能在用户完成验证并提交表单时才能获取。直接在不提交的情况下获取响应token是不可能的,也是违反reCAPTCHA的使用条款的。
如果你需要在客户端进行一些预处理,然后再提交表单,可以考虑以下方法:
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA Example</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form id="myForm">
<input type="text" id="userInput" placeholder="Enter something">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var userInput = document.getElementById('userInput').value;
if (userInput.length < 5) {
alert('Input must be at least 5 characters long');
return;
}
this.submit();
});
</script>
</body>
</html>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var recaptchaResponse = grecaptcha.getResponse();
if (recaptchaResponse.length === 0) {
alert('Please complete the reCAPTCHA challenge.');
return;
}
// 发送异步请求到服务器进行验证
fetch('/verify-recaptcha', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ recaptchaResponse: recaptchaResponse })
})
.then(response => response.json())
.then(data => {
if (data.success) {
this.submit();
} else {
alert('reCAPTCHA verification failed.');
}
})
.catch(error => {
console.error('Error:', error);
});
});
通过上述方法,你可以在不违反reCAPTCHA的使用条款的情况下,实现前端验证和异步验证。
领取专属 10元无门槛券
手把手带您无忧上云