Invisible ReCaptcha with jQuery ajax

Question

jQueryと "ajax"リクエストを使用してフォーム内に最新のReCaptcha（ReCaptchaとも呼ばれます）を実装しようとしています。
reCAPTCHAのドキュメント：https://developers.google.com/recaptcha/docs/invisible

マイ形式：

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

私の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のは、 "データ・コールバック" に設定する必要があり、私はどのように確認していません
私の "onSubmit（）"トリックは機能しませんでした。 "ajax"を無視してページを更新します。

"datas"変数内の "g-recaptcha-response"値をtest.phpにPOSTするにはどうすればいいですか？ test.phpをに

Answer 1

だからここに私は目に見えないreCAPTCHAののdocにさらに掘り、そして以来、明らかにjQueryのビットを学んだ後、それを解決する方法であります

私の頭のJavaScriptを使用してタグ（および醜いGoogleのバッジを除去するためのCSSのビット）：私は、JS（クール）に精通していないでした

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

それはこの質問の範囲外なのであなたにも全体のPHPを必要とするなら、私に教えてください。私のケースでは、HTMLフォームとJSをレンダリングするスクリプトとPOST varsを扱うスクリプトが同じであるため（上​​のテスト目的ではないので）、おそらく上記のJS内の "url：location.href"を変更する必要があります。あなたが解決策を見つけた、私は正確に同じ問題を抱えている13h15 @

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

サーバー側でキャプチャを確認する必要があります。

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