我添加了兩個不可見的recaptcha divs，但是當我在inspect元素中看到代碼時，在我的單個頁面中只添加了一個不可見的recaptcha。 我的代碼是：如何在單個頁面中添加多個不可見的recaptcha？
<div id="captcha1" class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
<div id="captcha2" class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
></div>
獲得從 Programmatically invoke recaptcha
參考你能幫我什麼我做錯了什麼？
，您必須對每一個明確的呈現提交按鈕
<form>
<button id="captcha1" class="g-recaptcha invisible-recaptcha">submit form 1</button>
</form>
<form>
<button id="captcha2" class="g-recaptcha invisible-recaptcha">submit form 2</button>
</form>
<script>
function verifyCaptcha(token){
console.log('success!');
};
var onloadCallback = function() {
$(".invisible-recaptcha").each(function() {
grecaptcha.render($(this).attr('id'), {
'sitekey' : $key,
'callback' : verifyCaptcha
});
});
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
有同樣的問題。有些困惑之後，我開始工作。
使用了Alessandro提供的想法，並且使它成爲自動提交成功的形式。
<script type="text/javascript">
var onloadCallback = function() {
$(".g-recaptcha").each(function() {
var el = $(this);
grecaptcha.render($(el).attr("id"), {
"sitekey" : SITE_KEY,
"callback" : function(token) {
$(el).parent().find(".g-recaptcha-response").val(token);
$(el).parent().submit();
}
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
下面是一個更可靠的解決方案，Peter和Alessandro在嵌套元素時作出了回答。
<script>
$(".g-recaptcha").each(function() {
var object = $(this);
grecaptcha.render(object.attr("id"), {
"sitekey" : "6LdwRC0UAAAAAK0hjA8O4y1tViGPk9ypXEH_LU22",
"callback" : function(token) {
object.parents('form').find(".g-recaptcha-response").val(token);
object.parents('form').submit();
}
});
});
</script>
<form>
<input type="text" name="example"/>
<button id="captcha1" class="g-recaptcha">submit form 1</button>
</form>
<form>
<input type="text" name="example"/>
<button id="captcha2" class="g-recaptcha">submit form 2</button>
</form>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
您是否需要在函數onloadCallback（）{...}中包裝第一個腳本以匹配reCAPTCHA api.js URL中的onload = onloadCallback？我最終必須這樣做。除此之外，這個工作很好。謝謝！ – Bemisawa
多隱形的reCAPTCHA V2上的單頁動態
Github的代碼： https://github.com/prathameshsawant7/multiple-invisible-recaptcha
步驟1>
添加以下頁2 JS庫
<!-- reCaptcha Library -->
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<!-- Customized Init for invisible reCaptcha -->
<script src="js/init_recaptcha.js" async defer></script>
步驟2>
添加以下div的在各自的形式。
<div id="recaptcha-form-1" style="display:none;"></div> <!--for Form 1-->
<div id="recaptcha-form-2" style="display:none;"></div> <!--for Form 2-->
<div id="recaptcha-form-3" style="display:none;"></div> <!--for Form 3-->
步驟3>
創建init_recaptcha.js
第3步 - 通過傳遞reCaptcha ID和createCallbackFn Response來調用renderInvisibleReCaptcha函數。
"use strict";
var PS = PS || {};
var widget_1;var widget_2;var widget_3;
var recaptcha_site_key = 'RECAPTCHA_SITE_KEY';
if(typeof PS.RECAPTCHA === 'undefined') {
(function (a, $) {
var retryTime = 300;
var x = {
init: function(){
if(typeof grecaptcha != 'undefined'){
//For Form 1 Initialization
if($('#form1 #recaptcha-form-1').length > 0){
var callbackFn = {
action : function(){
saveData('1'); //Here Callback Function
}
}
/*--- 'recaptcha-form-1' - reCaptcha div ID | 'form1' - Form ID ---*/
widget_1 = x.renderInvisibleReCaptcha('recaptcha-form-1',x.createCallbackFn(widget_1,'form1',callbackFn));
}
//For Form 2 Initialization
if($('#form2 #recaptcha-form-2').length > 0){
var callbackFn = {
action : function(){
saveData('2'); //Here Callback Function
}
}
/*--- 'recaptcha-form-2' - reCaptcha div ID | 'form2' - Form ID ---*/
widget_2 = x.renderInvisibleReCaptcha('recaptcha-form-2',x.createCallbackFn(widget_2,'form2',callbackFn));
}
//For Form 3 Initialization
if($('#form3 #recaptcha-form-3').length > 0){
var callbackFn = {
action : function(){
saveData('3'); //Here Callback Function
}
}
/*--- 'recaptcha-form-3' - reCaptcha div ID | 'form3' - Form ID ---*/
widget_3 = x.renderInvisibleReCaptcha('recaptcha-form-3',x.createCallbackFn(widget_3,'form3',callbackFn));
}
}else{
setTimeout(function(){ x.init();} , retryTime);
}
},
renderInvisibleReCaptcha: function(recaptchaID,callbackFunction){
return grecaptcha.render(recaptchaID, {
'sitekey' : recaptcha_site_key,
"theme" : "light",
'size' : 'invisible',
'badge' : 'inline',
'callback' : callbackFunction
});
},
createCallbackFn: function (widget,formID,callbackFn) {
return function(token) {
$('#'+formID+' .g-recaptcha-response').val(token);
if($.trim(token) == ''){
grecaptcha.reset(widget);
}else{
callbackFn.action();
}
}
}
}
a.RECAPTCHA = x;
})(PS, $);
}
$(window).load(function(){
PS.RECAPTCHA.init();
});
步驟4> 變化表單驗證JS -
/* Execute respective Widget on form submit after form Validations */
function formSubmit(form){
var text = $.trim($('#text'+form).val());
if(text != ''){
switch(form){
case '1' : grecaptcha.execute(widget_1); break;
case '2' : grecaptcha.execute(widget_2); break;
case '3' : grecaptcha.execute(widget_3); break;
}
}
}
步驟5> 驗證驗證碼從服務器端 -
<?php
define('RECAPTCHA_SECRET_KEY','KEY');
/**
* @Desc: To Validate invisible recaptcha from server-side
* @Param: g-recaptcha-response value
* @Return: True/False
**/
if(!function_exists('check_recaptcha')){
function check_recaptcha($recaptcha_response){
$test = array ('secret' => RECAPTCHA_SECRET_KEY,'remoteip' => $_SERVER["REMOTE_ADDR"],'response' => $recaptcha_response);
foreach ($test as $key => $value) {
$req .= $key . '=' . urlencode(stripslashes($value)) . '&';
}
$req=substr($req, 0, strlen($req)-1);
$path = 'https://www.google.com/recaptcha/api/siteverify?';
$response = file_get_contents($path . $req);
$responseData = json_decode($response);
if($responseData->success){
return true;
}else{
return false;
}
}
}
// Validate reCaptcha
if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == "POST" && !empty($_POST)) {
$checkCapcha = false;
$recaptcha = $_POST['g-recaptcha-response'];
$checkCapcha = check_recaptcha($recaptcha);
if($checkCapcha){
echo $_POST['textmsg']; exit;
/** Perform Actions Here (Add,Update,Delete etc)
**/
}
else{
echo 「reCaptcha Error」;
}
}
echo "failed";exit;
?>
工序6> 服務器調用後復位組件 -
// saveData will be automatically get called on grecaptacha.execute
function saveData(form){
$.ajax({
type: 'POST',
url: $("#form"+form).attr('action'),
data: $("#form"+form).serialize(),
success: function(response) {
switch(form){
case '1' : grecaptcha.reset(widget_1); break;
case '2' : grecaptcha.reset(widget_2); break;
case '3' : grecaptcha.reset(widget_3); break;
}
}
});
}
你可以使用隱形驗證碼。在你的按鈕上使用像「formname ='rcaptchaformname'」這樣的標籤來指定要提交的表單並隱藏提交表單輸入。
這使您可以保持html5表單驗證完整，一個recaptcha，但多個按鈕界面。只需捕獲由recaptcha生成的令牌密鑰的「驗證碼」輸入值即可。
<script src="https://www.google.com/recaptcha/api.js" async defer ></script>
<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
$('button').on('click', function() { formname = '#'+$(this).attr('formname');
if ($(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
else { $(formname).find('input[type="submit"]').click() }
});
var onSubmit = function(token) {
$(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
$(formname).find('input[type="submit"]').click()
};
</script>
這不是正常工作的樣本，因爲隱形回放沒有OnLoad和Render可用參數; – Shmalex
@Shmalex確定它的確如此。 –