Google reCaptcha valider en utilisant jquery AJAX

Question

Je ne sais pas comment puis-je l'appliquer à ma page de connexion, une fois captcha réponse de succès sur ajax puis soumettre le formulaire. Voici mon formulaire HTML (je laisse l'action nulle parce que je suis encore en test)

<form action = "" method = "post"> 
    <input type = "text" id = "email" name = "email"> 
    <input type = "password" id = "pass" name = "password"> 
    <div class = "form-group col-lg-6"> 
     <div class="g-recaptcha" data-sitekey="MY_KEY"></div> 
    </div> 
    <input type = "button" id = "submit" value = "submit"> 
</form> 

Voici comment je comprends ajax sur captcha envoyer captcha mot .. si captcha success soumettre formulaire si failed je donnerai un alert.

$('#submit').click(function() { 
var captcha = "captcha"; 
    $.ajax({ 
    url: "captcha.php", 
    method: "post", 
    data:{captcha:captcha}, 
    success:function(data){ 
    if(data=='success'){ 
     $('form').submit(); 
     } 
    } 
    else{ 
     alert('captcha failed. try again'); 
    } 
}); 
}); 

mon captcha.php comment je reçois $_POST['captcha']

<?php 
if($_POST['captcha']){ 
     $url = 'https://www.google.com/recaptcha/api/siteverify'; 
     $privatekey = 'MY_SECRET_KEY'; 

     $response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']); 
     $data = json_decode($response); 

     if($data->sucess==true){ 
      echo "success"; 
     } 
     else{ 
      echo "failed"; 
     } 
    } 
?> 

s'il vous plaît aidez-moi à comprendre comment il fonctionne et comment peut-il être fait en utilisant AJAX vous remercions d'avance :)

MISE À JOUR

je viens de remarquer comment puis-je $_POST['g-recaptcha-response']; ??

Answer 1

Vous pouvez utiliser ce code:

Code HTML:

<form action="" method="POST" id="loginForm"> 
    <input type="text" id = "email" name="email"> 
    <input type="password" id="pass" name="password"> 
    <textarea type="text" name="message"></textarea> 
    <div class="g-recaptcha" data-sitekey="10LDDpf0ehtMZY6kdJnGhsYYY-6ksd-W"></div> 
    <input type="submit" name="submit" value="SUBMIT"> 
</form> 

JavaScript

$(document).ready(function() { 
    var loginForm = $("#loginForm"); 
    //We set our own custom submit function 
    loginForm.on("submit", function(e) { 
    //Prevent the default behavior of a form 
    e.preventDefault(); 
    //Get the values from the form 
    var email = $("#email").val(); 
    var pass = $("#pass").val(); 
    //Our AJAX POST 
    $.ajax({ 
     type: "POST", 
     url: "login.php", 
     data: { 
     email: email, 
     password: pass, 
     //This will tell the form if user is captcha varified. 
     g-recaptcha-response: grecaptcha.getResponse() 
     }, 
     success: function(response) { 
     console.log(response); 
     //console.log("Form successfully submited"); 
     } 
    }) 
    }); 
}); 

Code PHP:

<?php 
if(isset($_POST['submit']) && !empty($_POST['submit'])): 
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])): 
     //your site secret key 
     $secret = '10LDDpf0ehtMZY6kdJnGhsYYY'; 
     //get verify response data 
     $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']); 
     $responseData = json_decode($verifyResponse); 
     if($responseData->success): 
      //captacha validated successfully. 
      $email = !empty($_POST['email'])?$_POST['email']:''; 
      $password = !empty($_POST['password'])?$_POST['password']:''; 
      echo "captacha validated successfully."; 
     else: 
      echo "Robot verification failed, please try again."; 
     endif; 
    else: 
     echo 'invalid captcha'; 
    endif; 
else: 
    //Nothing 
endif; 
?> 

Answer 2

J'utilise la validation re-captcha en utilisant jQuery/ajax comme ci-dessous:

<script src="https://www.google.com/recaptcha/api.js" >; 
<form method="post" name="contactForm"> 
    <input type="text" name="fname"/> 
    <input type="text" name="lname"/> 
    <input type="text" name="Phone"/> 
    <div class="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="dark"></div> 
    <input value="submit" type="submit"/> 
</form> 

Validation/ajax:

//Initialize jQuery 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var onReturnCallback = function(response) { 
     var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify'; 
     $.ajax({ 'url' : url, 
        dataType: 'json', 
        data: { response: response}, 
        success: function(result) {      
        var res = result.success.toString(); 
          alert(res);      
        if (res == 'true') { 
          document.getElementById('g-recaptcha').innerHTML = ' Your Success Message'; 
            } 
           } 
      }); 
    }; 
    </script>