Wie kann man mehrere unsichtbare Recaptchas auf einer einzelnen Seite hinzufügen?

Question

Ich habe zwei unsichtbare Recaptcha Divs hinzugefügt, aber als ich den Code im inspect Element sah, wurde nur ein unsichtbares Recaptcha auf meiner Seite hinzugefügt. Mein Code ist:

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

Referenz Holen von Programmatically invoke recaptcha

Können Sie mir helfen, was ich falsch mache?

Answer 1

Sie müssen auf jede explizite machen tun Submit-Button

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

Answer 2

hatte das gleiche Problem. Nach einigem rätseln habe ich es zur Arbeit gebracht.

Verwendet die Idee Alessandro zur Verfügung gestellt, und machte es so das Formular würde automatisch auf Erfolg übergeben werden.

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

Answer 3

Unten eine zuverlässigere Lösung für Peter und Alessandro Antworten beim Verschachteln von Elementen.

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

Answer 4

Mehrere Invisible reCaptcha V2 auf einer einzigen Seite Dynamisch

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

Schritt 1>

hinzufügen unter 2 Js-Bibliothek auf Seite

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

Schritt 2>

unter divs in entsprechenden Formen hinzufügen.

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

Schritt 3>

erstellen init_recaptcha.js

• Schritt 1 - Initialisieren reCaptcha Site-Key und Widget zB: widget_1 für Form 1
• Schritt 2 - Init-Funktion fügen Sie Code hinzu, um die Callback-Aktion "Formular senden" zu erstellen.

• Schritt 3 - Rufen Sie die Funktion renderInvisibleReCaptcha auf, indem Sie reCaptcha ID und createCallbackFn Response übergeben.

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

Schritt 4> Änderungen in Form 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; 
     } 
    } 
} 

Schritt 5> Validate reCaptcha von Server Side -

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

Schritt 6> Zurücksetzen Widget nach Server-Aufruf -

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

Answer 5

Sie könnten unsichtbar recaptcha verwenden. Verwenden Sie auf Ihrer Schaltfläche ein Tag wie "formname = 'rcaptchaformname'", um anzugeben, welches Formular gesendet werden soll, und blenden Sie eine Eingabe für das Eingabeformular aus.

Dies ermöglicht es Ihnen, die HTML5 Formularvalidierung intakt zu halten, ein Recaptcha, aber mehrere Schaltflächenschnittstellen. Erfassen Sie einfach den Eingabewert "captcha" für den von recaptcha generierten Tokenschlüssel.

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