Я добавил Google невидимую recaptcha в форму Ajax (Javascript / PHP) на веб-странице (см. Html + js на стороне клиента ниже).Все работает отлично, за исключением того, что слишком часто Google невидимый Recaptcha запускает тестирование изображения при загрузке веб-страницы и при отправке формы.
Это очень раздражает, потому что страница, включающая эту форму представления, является домашней страницей веб-сайта (фактически это веб-сайт для подписания петиции для ассоциации).
Это приводит к проблеме, заключающейся в том, что пользователь может увидеть проблему с изображением еще до того, как получит основную информацию с веб-сайта и решит подписать или не подписать петицию.Это плохой пользовательский опыт.
Есть ли способ предотвратить такое поведение.Настроить Google Recaptcha таким образом, чтобы до нажатия пользователем кнопки «Отправить» ничего не возникало?
Большое спасибо за вашу драгоценную помощь: o)!
Laurent
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>