我已经在网页上添加了Google隐形recaptcha到Ajax（Javascript / PHP）表单（请参阅下面客户端的html js） . 一切正常，但谷歌隐形Recaptcha经常在网页加载和表单提交时启动图像挑战 .
这非常令人讨厌，因为包含此提交表单的页面是该网站的主页（实际上它是一个关联的请愿签名网站） .
这导致用户甚至在从网站获得主要信息并决定签署请愿书之前就能看到图像挑战的问题 . 这是一种糟糕的用户体验 .
有没有办法防止这种行为 . 以这样的方式配置Google Recaptcha在用户点击提交按钮之前没有挑战性？
非常感谢您的宝贵帮助：o）！
洛朗
Javascript代码：
window.onScriptLoad = function () {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'size': 'invisible',
'badge': 'inline',
callback: window.onUserVerified
};
var inheritFromDataAttr = true;
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
console.log('recaptchaId=', recaptchaId);
window.grecaptcha.execute(recaptchaId);
};
window.onUserVerified = function (token) {
console.log('token=', token);
};
function onSubmitBtnClick () {
var token = window.grecaptcha.getResponse(recaptchaId);
console.log('token=', token);
if (!token) {
window.grecaptcha.execute(recaptchaId);
return;
}
$.ajax({
url: 'process.php',
type: 'post',
dataType: 'json',
data : {
'lastname' : $("#lastnameField").val(),
'firstname' : $("#firstnameField").val(),
'city' : $("#cityField").val(),
'postalCode' : $("#postalcodeField").val(),
'g-recaptcha-response' : token
},
success:function(data) {
// informs user that form has been submitted
// and processed
},
error: function(xhr, textStatus, error){
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
});
HTML代码：
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script type="text/javascript" src="js/petition.js"></script>
...
</head>
<body>
<form id="petitionForm" onsubmit="return false;">
<input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
<input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
<input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
<input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
....
<input type="submit" name="login" class="g-2" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx" id="signButton" data-callback='' value="Signer" onclick="onSubmitBtnClick();">
<div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>
</form>
...
</body>
</html>
1 回答
对于我在onScriptLoad函数中，您必须删除
我想这会执行recaptcha onload