Niewidzialna ReCaptcha z jQuery ajax

Question

Próbuję zaimplementować najnowszą ReCaptcha (inaczej "niewidzialna" ReCaptcha) w formularzu przy użyciu jQuery i prośby "ajaxowej". Dokumentacja
Odśwież: https://developers.google.com/recaptcha/docs/invisible

Moja forma:

<form id="myForm" > 
    <input type="email" name="email" /><br /> 
    <input type="password" name="password" /><br/> 
    <!--<input type="submit" value="log in" />--> 
    <button class="g-recaptcha" data-sitekey="6LdK..." data-callback="onSubmit">log in</button> 
</form> 
<div id="status"></div> 

Moje javascript (jQuery):

<script> 

    function onSubmit(token){ 
     document.getElementById("myForm").submit(); 
    } 

    $(document).ready(function(){ 

     $("#myForm").submit(function(event){ 
      event.preventDefault(); 
      var datas = $("#myForm").serialize(); 
      $.ajax({ 
       type: "POST", 
       url: "test.php", 
       data: datas, 
       dataType: "json", 
        beforeSend: function(){ 
         $("#status").html("logging in..."); 
        }, 
        success: function(response){ 
         $("#status").html(response.text); 
         if(response.type=="success"){ 
          window.location.replace("/myaccount"); 
         } 
        }, 
        error: function(){ 
         $("#status").html("Failed."); 
        } 
      }); 
     }); 

    }); 
</script> 

Odśwież wymaga, aby ustawić "data-zwrotnego", która nie jestem pewien, jak powiązać z moją już istniejącą funkcją ".submit (funkcja (zdarzenie)"
Moja sztuczka "onSubmit()" nie działa, ignoruje "ajax" i odświeża stronę.
Jak wysłać wartość "g-recaptcha-response" w mojej zmiennej "datas" do POST it to test.php?

Answer 1

więc o to w jaki sposób rozwiązać go po wykopaniu dalej w dok Invisible Odśwież, a uczenie się trochę jQuery oczywiście od i nie był zaznajomiony z JS (fajne rzeczy):

Moja głowa tag z Javascript (i trochę css do usunięcia brzydkiego Google odznaki):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=fr" async defer></script> 

<style> 
    .grecaptcha-badge{ 
     display:none; 
    } 
</style> 

<script> 
    var onloadCallback = function(){ 
     grecaptcha.render("emplacementRecaptcha",{ 
      "sitekey": "YOUR_RECAPTCHA_SITEKEY_HERE", 
      "badge": "inline", 
      "type": "image", 
      "size": "invisible", 
      "callback": onSubmit 
     }); 
    }; 
    var onSubmit = function(token){ 
     var userEmail = $("#userEmail").val(); 
     var userPassword = $("#userPassword").val(); 
     var userTfaOtp = $("#userTfaOtp").val(); 
     $.ajax({ 
      type: "POST", 
      url: location.href, 
      data:{ 
        userEmail: userEmail, 
        userPassword: userPassword, 
        userTfaOtp: userTfaOtp, 
        userJetonRecaptcha: token 
       }, 
      dataType: "json", 
       beforeSend: function(){ 
        $("#statutConnexion").html("Traitement de votre requête d'authentification en cours..."); 
       }, 
       success: function(response){ 
        $("#statutConnexion").html(response.Message); 
        if(response.Victoire){ 
         $("#formulaireConnexion").slideUp(); 
         window.location.replace("/compte"); 
        } 
        else{ 
         grecaptcha.reset(); 
        } 
       }, 
       error: function(){ 
        $("#statutConnexion").html("La communication avec le système d'authentification n'a pas pu être établie. Veuillez réessayer."); 
        grecaptcha.reset(); 
       } 
     }); 
    }; 
    function validate(event){ 
     event.preventDefault(); 
     $("#statutConnexion").html("Validation de votre épreuve CAPTCHA en cours..."); 
     grecaptcha.execute(); 
    } 
    function onload(){ 
     var element = document.getElementById("boutonConnexion"); 
     element.onclick = validate; 
    } 
</script> 

HTML:

<div id="formulaireConnexion"> 
    <input type="email" name="userEmail" id="userEmail" placeholder="Courriel" title="Courriel" required="required" /><br /> 
    <input type="password" name="userPassword" id="userPassword" placeholder="Mot de passe" title="Mot de passe" required="required" /><br/> 
    <input type="text" name="userTfaOtp" id="userTfaOtp" placeholder="Double authentification (optionnelle)" autocomplete="off" pattern="[0-9]{6}" title="Six caractères numériques" maxlength="6" /><br /> 
    <div id="emplacementRecaptcha"></div> 
    <button id="boutonConnexion">Connexion</button> 
</div> 
<div id="statutConnexion"></div> 
<script>onload();</script> 

Daj mi znać, jeśli potrzebujesz cały PHP jako dobrze, ponieważ jest poza zakresem tej kwestii. Prawdopodobnie będziesz musiał zmienić "url: location.href" w powyższym JS, ponieważ w moim przypadku skrypt renderujący formularz HTML i JS i obsługujący vary POST jest taki sam (niezbyt wielki, cel testowania). Zasadniczo po prostu zweryfikuję POST vars, a następnie zwróć jsonowi:

$jsonVictoire = true; // boolean 
$jsonMessage = 'anything you want to tell your visitor'; // string 

$return = 
    json_encode(
     array(
      'Victoire'=>$jsonVictoire, 
      'Message'=>$jsonMessage 
     ) 
    ); 
die($return); 

Answer 2

<script defer>    
function onSubmit(token) {      
    var f = $("#myForm"); 

    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: f.serialize(), 
     dataType: "json", 
     beforeSend: function(){ 
      $("#status").html("logging in..."); 
     }, 
     success: function(response){ 
      $("#status").html(response.text); 
      if(response.type=="success"){ 
       window.location.replace("/myaccount"); 
      } else { 
       $("#status").html("Captcha failed."); 
      } 
     }, 
     error: function(){ 
      $("#status").html("Failed."); 
     }  
    }); 
} 
</script> 

W test.php trzeba zweryfikować captcha po stronie serwera:

<?php 
if(isset($_POST['g-recaptcha-response'])) { 
    $result = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=[YOUR_SECRET_KEY]&response=$_POST["g-recaptcha-response"]&remoteip=$_SERVER["REMOTE_ADDR"]'), TRUE); 

    if($result['success'] == 1) { 
     // Captcha ok 
    } else { 
     // Captcha failed 
    } 
} 
?>