Comment append plusieurs recaptcha invisible dans une seule page?

Ci-dessous, une solution plus fiable à Peter et Alessandro répond lors de l’imbrication d’éléments.

  
  submit form 1 
 
  submit form 2 
  

Vous devez faire un rendu explicite sur chaque bouton de soumission

 
 submit form 1 
 
 submit form 2 
   

Avait le même problème. Après un peu de perplexité, je l’ai mis au travail.

A utilisé l’idée fournie par Alessandro et l’a faite pour que le formulaire soit automatiquement soumis en cas de succès.

Plusieurs invisibles reCaptcha V2 sur une seule page de manière dynamic

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

Étape 1>

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

Étape 2>

Ajouter ci-dessous div dans les formes respectives.

Étape 3>

Créer init_recaptcha.js

• Étape 1 – Initialiser la clé de site et le widget reCaptcha, par exemple: widget_1 pour le formulaire 1
• Étape 2 – Dans la fonction init, ajoutez du code pour créer une action de rappel de soumission de formulaire.

• Étape 3 – Appelez la fonction renderInvisibleReCaptcha en transmettant l’ID reCaptcha et la réponse createCallbackFn.

   "use ssortingct"; 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($.sortingm(token) == ''){ grecaptcha.reset(widget); }else{ callbackFn.action(); } } } } a.RECAPTCHA = x; })( PS, $ ); } $(window).load(function(){ PS.RECAPTCHA.init(); }); 

Étape 4> Modifications de la validation de formulaire JS –

 /* Execute respective Widget on form submit after form Validations */ function formSubmit(form){ var text = $.sortingm($('#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 à partir du côté serveur –

  RECAPTCHA_SECRET_KEY,'remoteip' => $_SERVER["REMOTE_ADDR"],'response' => $recaptcha_response); foreach ($test as $key => $value) { $req .= $key . '=' . urlencode(ssortingpslashes($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 du 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; } } } ); } 

Vous pouvez utiliser invisible recaptcha. Sur votre bouton, utilisez une balise telle que “formname = ‘rcaptchaformname” “pour spécifier le formulaire à soumettre et masquer une entrée de formulaire de soumission.

Cela vous permet de conserver la validation du formulaire html5 intacte, une seule interface recaptcha, mais plusieurs interfaces de bouton. Capturez simplement la valeur d’entrée “captcha” pour la clé de jeton générée par recaptcha.