Comment ajouter plusieurs invisible recaptcha dans une seule page?

Eu le même problème. Après quelques déroutante, je l'ai eu à travailler.

Utilisé l'idée Alessandro fourni, et fait en sorte que le formulaire sera automatiquement soumettre à succès.

<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>

OriginalL'auteur Peter Bode

Plusieurs Invisible reCaptcha V2 sur une Seule Page Dynamiquement

Github Le Code:
https://github.com/prathameshsawant7/multiple-invisible-recaptcha

L'étape 1>

Ajouter ci-dessous les 2 bibliothèque Js sur la page

<!--  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>

Étape 2>

Ajouter en dessous de la div en formes respectives.

<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-->

Étape 3>

Créer init_recaptcha.js

• Étape 1 - Initialiser le reCaptcha Site Clé et Widget par exemple: widget_1 pour la Forme 1
• Étape 2 - Dans la fonction init ajouter du code pour créer soumettre le formulaire de rappel d'action.

• Étape 3 - Appel d'renderInvisibleReCaptcha fonction en passant reCaptcha ID et createCallbackFn Réponse.

  "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();
  });

Étape 4>
Des changements dans la Forme de Validation 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;
}
}
}

Étape 5>
Valider reCaptcha depuis le Côté Serveur -

<?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;
?>

Étape 6>
Réinitialiser le Widget après l'Appel de Serveur -

//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;
}
}
} );
}

OriginalL'auteur Prathamesh Sawant

Pour Google Recaptcha V3 Plusieurs Recpatchas sur une Page:

HTML:

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=grecaptcha_onload"></script>
<script>
function grecaptcha_onload() {
$('.g-recaptcha-response').each(function( k, v ) {
var submit = $(v).closest("form").find('[type="submit"]');
grecaptcha.render( submit[0], {
'sitekey' : SITE_KEY,
'callback' : function( token ) {
$(v).closest("form").find('.g-recaptcha-response').val( token );
$(v).closest("form").submit();
},
'size' : 'invisible',
});
});
}
</script>
<form>
<input type="hidden" value="" name="g-recaptcha-response" class="g-recaptcha-response" />
<button type="submit">Submit</button>
</form>
<form>
<input type="hidden" value="" name="g-recaptcha-response" class="g-recaptcha-response" />
<button type="submit">Submit</button>
</form>

PHP:

    function validate()
{
if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
//Build POST request:
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_response = $_POST[ 'g-recaptcha-response' ];
$recaptcha = file_get_contents( $recaptcha_url . '?secret=' . self::SECRET_KEY . '&response=' . $recaptcha_response );
$recaptcha = json_decode( $recaptcha );
if( $recaptcha->success == true ){
//Take action based on the score returned:
if( $recaptcha->score >= 0.1 ) {
return true;
} else {
$this->errors[] = 'Something went wrong with sumbitting the form.<br />Please try again!';
foreach( (array) $recaptcha as $key => $value ) {
$this->errors[] = 'Key: ' . $key . ' Value: ' . $value;
}
return false;
}
} else { //there is an error /
switch ( $recaptcha->{'error-codes'}[0] ) {
case 'missing-input-secret':
$this->errors[] = 'The secret parameter is missing';
break;
case 'invalid-input-secret':
$this->errors[] = 'The secret parameter is invalid or malformed';
break;
case 'missing-input-response':
$this->errors[] = 'The response parameter is missing';
break;
case 'invalid-input-response':
$this->errors[] = 'The response parameter is invalid or malformed';
break;
case 'bad-request':
$this->errors[] = 'The request is invalid or malformed';
break;
case 'timeout-or-duplicate':
$this->errors[] = 'The response is no longer valid: either is too old or has been used previously';
break;
default:
break;
}
return false;
}
}
} 

OriginalL'auteur Benjamin Mastrangelo