Invisible ReCaptcha mit jQuery ajax

Question

Ich versuche, die neueste ReCaptcha (aka "unsichtbar" ReCaptcha) in einem Formular mit jQuery und eine "Ajax" -Anforderung zu implementieren.
ReCaptcha Dokumentation: https://developers.google.com/recaptcha/docs/invisible

Meine Form:

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

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

ReCaptcha erfordert einen "Daten-Rückruf" zu setzen, die ich bin nicht sicher, wie mit meiner bereits bestehenden Funktion ".submit (function (event)" zu binden.
Mein Trick "onSubmit()" hat nicht funktioniert, es ignoriert die "Ajax" und aktualisiert die Seite.

Wie sende ich den "g-recaptcha-response" -Wert innerhalb meiner "datas" -Variablen, um ihn an test.php zu senden?

Answer 1

Also hier ist, wie ich es gelöst nach einer weiteren in Invisible reCAPTCHA ist doc graben, und ein wenig jQuery Lernen offensichtlich seit ich war nicht sehr vertraut mit JS (cool stuff):

Mein Kopf-Tag mit dem Javascript (und ein bisschen CSS die hässliche Google Abzeichen zu entfernen):

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

Lassen Sie mich wissen, wenn Sie die ganze PHP als auch brauchen, da sie aus dem Rahmen dieser Frage ist. Sie müssen wahrscheinlich "url: location.href" innerhalb des JS oben ändern, da in meinem Fall das Skript, das das HTML-Formular und das JS rendert und mit den POST-Vars arbeitet, dasselbe ist (nicht großartig, Testzweck). Im Grunde verifiziere ich nur die POST Vars dann endlich wieder ein JSON wie:

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

In test.php müssen Sie Captcha auf Server-Seite überprüfen:

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