reCaptcha 隐形、欧芹和 ajax 形式
reCaptcha Invisible, parsley and ajax form
我正在尝试从使用 Google reCaptcha v2 迁移到不可见的 reCaptcha。
我使用 Parsley.js 进行表单验证并使用 Malsup Ajax 表单插件提交表单。
我当前的代码如下所示：
HTML:
<form action="send1.php" method="post" class="contact_form">
<label for="name_1">Name</label>
<input type="text" name="name_1" id="name_1" value="" required />
<div class="g-recaptcha" data-sitekey="XXX"></div>
<input type="submit" class="button" value="">
</form>
JS:
$('.contact_form').parsley();
$('.contact_form').submit(function(){
if($('.contact_form').parsley().validate()){
$('.contact_form').ajaxSubmit();
}
return false;
});
这成功地将 g-recaptcha-response 传递给 send1.php，其中 reCaptcha 已验证。
如何将 Invisible reCaptcha 与此脚本集成？
我试过用这个：
<div id='recaptcha' class="g-recaptcha"
data-sitekey="XXX"
data-callback="onSubmit"
data-size="invisible"></div>
</div>
但我不确定如何使用数据回调。
如果我添加
grecaptcha.execute();
在 ajaxSubmit() 之前，字段 g-recaptcha-response 被添加到 Ajax 调用中，但它的值为空...
有什么帮助吗？
希望这对您有所帮助，我没有处理欧芹，但 reCaptcha 与其集成的方式应该是相同的。如果您有任何问题，请告诉我！
我使用这样的方法来呈现我的验证码。
这允许您在同一页面上有多个验证码，以及验证。
对于表单验证，我已将您的欧芹验证添加到以下函数中。请注意，如果验证 returns 为假，我们将重置验证码……这很重要。如果没有发生这种情况，则无法重新提交表单。
function renderRecaptcha() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var button = form.querySelector('[data-sitekey]');
if (null === button) {
continue;
}
(function (frm) {
var sitekey = button.getAttribute("data-sitekey");
var buttonId = grecaptcha.render(button, {
"sitekey": sitekey,
"size": "invisible",
"badge": "inline",
"callback": function (recaptchaToken) {
if ($(frm).parsley().validate()) {
$(frm).ajaxSubmit();
// HTMLFormElement.prototype.submit.call(frm);
} else {
grecaptcha.reset(buttonId);
}
}
});
frm.onsubmit = function (evt) {
evt.preventDefault();
grecaptcha.execute(buttonId);
};
})(form);
}
}
您的按钮将是具有站点密钥而不是 div 的按钮。这大大简化了事情。
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>
我将与您分享我是如何让 ParsleyJS 和 Invisible reCaptcha 为我工作的。下面是我使用的代码。这只是 POC 代码，不是生产代码；而且我没有做 AJAX post。请原谅任何丑陋，因为我不得不去掉很多绒毛：
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
</head>
<body>
<form action="#" data-parsley-validate class="js-validate">
<div>
<label for="input-first-name">First Name*</label>
<input
type="text"
id="input-first-name"
name="first-name"
data-parsley-trigger="blur"
data-parsley-error-message="First Name is required"
required>
</div>
<div>
<label for="input-last-name">Last Name*</label>
<input
type="text"
name="last-name"
id="input-last-name"
data-parsley-trigger="blur"
data-parsley-error-message="Last Name is required"
required>
</div>
<div>
<button type="submit" id="theSubmitBtn">Submit</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script>
function onScriptLoad() {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: 'Your_Site_Key',
size: 'invisible',
callback: function (token) {
$('.js-validate').submit();
console.log('test: ',token);
}
};
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);
$('#theSubmitBtn').click(function(e){
e.preventDefault();
if(grecaptcha.getResponse() != ''){
grecaptcha.reset();
}
grecaptcha.execute();
});
}
</script>
<div id='recaptcha' class="g-recaptcha"></div>
</form>
</body>
</html>
因此，如果您想通过 AJAX 提交，您可以添加一个 ParsleyJS 事件侦听器并以这种方式进行 Ajax 调用。
$('.js-validate').parsley().on('form:submit', function() {
//AJAX post here
return false;
});
我的解决方案主要基于此 post（归功于他）：
Invisible google Recaptcha and ajax form
希望对你有帮助，因为我也找了一段时间的解决方案。
（我从复制了我的答案）
对于 ParsleyJS 你需要做一些变通：
1.Add 隐藏输入框，带data-parsley-required="true"，value = ""，像这样：
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
2.Add 错误容器（就在您的 g-recaptcha div 下方或下方）：
<span id='errorContainer'></span>
3.Add 这个简单的函数在你的 js 代码中的某处：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add 具有自定义函数值的属性 data-callback:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
我正在尝试从使用 Google reCaptcha v2 迁移到不可见的 reCaptcha。 我使用 Parsley.js 进行表单验证并使用 Malsup Ajax 表单插件提交表单。 我当前的代码如下所示：
HTML:
<form action="send1.php" method="post" class="contact_form">
<label for="name_1">Name</label>
<input type="text" name="name_1" id="name_1" value="" required />
<div class="g-recaptcha" data-sitekey="XXX"></div>
<input type="submit" class="button" value="">
</form>
JS:
$('.contact_form').parsley();
$('.contact_form').submit(function(){
if($('.contact_form').parsley().validate()){
$('.contact_form').ajaxSubmit();
}
return false;
});
这成功地将 g-recaptcha-response 传递给 send1.php，其中 reCaptcha 已验证。
如何将 Invisible reCaptcha 与此脚本集成？
我试过用这个：
<div id='recaptcha' class="g-recaptcha"
data-sitekey="XXX"
data-callback="onSubmit"
data-size="invisible"></div>
</div>
但我不确定如何使用数据回调。 如果我添加
grecaptcha.execute();
在 ajaxSubmit() 之前，字段 g-recaptcha-response 被添加到 Ajax 调用中，但它的值为空...
有什么帮助吗？
希望这对您有所帮助，我没有处理欧芹，但 reCaptcha 与其集成的方式应该是相同的。如果您有任何问题，请告诉我！
我使用这样的方法来呈现我的验证码。 这允许您在同一页面上有多个验证码，以及验证。
对于表单验证，我已将您的欧芹验证添加到以下函数中。请注意，如果验证 returns 为假，我们将重置验证码……这很重要。如果没有发生这种情况，则无法重新提交表单。
function renderRecaptcha() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var button = form.querySelector('[data-sitekey]');
if (null === button) {
continue;
}
(function (frm) {
var sitekey = button.getAttribute("data-sitekey");
var buttonId = grecaptcha.render(button, {
"sitekey": sitekey,
"size": "invisible",
"badge": "inline",
"callback": function (recaptchaToken) {
if ($(frm).parsley().validate()) {
$(frm).ajaxSubmit();
// HTMLFormElement.prototype.submit.call(frm);
} else {
grecaptcha.reset(buttonId);
}
}
});
frm.onsubmit = function (evt) {
evt.preventDefault();
grecaptcha.execute(buttonId);
};
})(form);
}
}
您的按钮将是具有站点密钥而不是 div 的按钮。这大大简化了事情。
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>
我将与您分享我是如何让 ParsleyJS 和 Invisible reCaptcha 为我工作的。下面是我使用的代码。这只是 POC 代码，不是生产代码；而且我没有做 AJAX post。请原谅任何丑陋，因为我不得不去掉很多绒毛：
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
</head>
<body>
<form action="#" data-parsley-validate class="js-validate">
<div>
<label for="input-first-name">First Name*</label>
<input
type="text"
id="input-first-name"
name="first-name"
data-parsley-trigger="blur"
data-parsley-error-message="First Name is required"
required>
</div>
<div>
<label for="input-last-name">Last Name*</label>
<input
type="text"
name="last-name"
id="input-last-name"
data-parsley-trigger="blur"
data-parsley-error-message="Last Name is required"
required>
</div>
<div>
<button type="submit" id="theSubmitBtn">Submit</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script>
function onScriptLoad() {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: 'Your_Site_Key',
size: 'invisible',
callback: function (token) {
$('.js-validate').submit();
console.log('test: ',token);
}
};
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);
$('#theSubmitBtn').click(function(e){
e.preventDefault();
if(grecaptcha.getResponse() != ''){
grecaptcha.reset();
}
grecaptcha.execute();
});
}
</script>
<div id='recaptcha' class="g-recaptcha"></div>
</form>
</body>
</html>
因此，如果您想通过 AJAX 提交，您可以添加一个 ParsleyJS 事件侦听器并以这种方式进行 Ajax 调用。
$('.js-validate').parsley().on('form:submit', function() {
//AJAX post here
return false;
});
我的解决方案主要基于此 post（归功于他）： Invisible google Recaptcha and ajax form
希望对你有帮助，因为我也找了一段时间的解决方案。
（我从
对于 ParsleyJS 你需要做一些变通：
1.Add 隐藏输入框，带data-parsley-required="true"，value = ""，像这样：
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
2.Add 错误容器（就在您的 g-recaptcha div 下方或下方）：
<span id='errorContainer'></span>
3.Add 这个简单的函数在你的 js 代码中的某处：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add 具有自定义函数值的属性 data-callback:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>