ReCaptcha invisible avec jQuery ajax

Question

J'essaye d'implémenter le plus nouveau ReCaptcha (aka "ReCaptcha" invisible) dans un formulaire en utilisant jQuery et une requête "ajax".
documentation ReCaptcha: https://developers.google.com/recaptcha/docs/invisible

Ma forme:

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

Mon 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 nécessite de définir une "données rappel", que je ne suis pas sûr pour lier avec ma fonction ".submit (function (event)" déjà existante
Mon truc "onSubmit()" ne fonctionnait pas, il ignorait le "ajax" et actualisait la page

Comment envoyer la valeur "g-recaptcha-response" dans ma variable "datas" pour l'envoyer à test.php?

Answer 1

Voici donc comment je l'ai résolu après avoir creusé plus loin dans la doc Invisible reCAPTCHA, et apprendre un peu de jQuery évidemment depuis Je n'étais pas très familier avec JS (de trucs cool):

Mon tag tête avec le javascript (et un peu de css pour enlever le badge Google laid):

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

Laissez-moi savoir si vous avez besoin tout le PHP ainsi car il est hors de la portée de cette question. Vous devrez probablement changer "url: location.href", dans le JS ci-dessus puisque dans mon cas le script rendant le formulaire HTML et le JS et traitant des vars POST est le même (pas génial, but de test). Fondamentalement, je viens de vérifier les vars POST puis finalement retourner un json comme:

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

En test.php vous devez vérifier captcha côté serveur:

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