Google reCaptcha jqueryを使用して検証するAJAX

Question

これを私のログインページに適用するにはどうしたらいいですか？ajaxでのcaptchaの成功の応答とフォームの送信。 は、ここに私のhtmlフォーム（私はテストではまだだから、私はアクションヌルを残す）

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

は、ここで私はalertを与えるfailed場合キャプチャsuccessがフォームを送信する場合、私は..キャプチャワードを送信キャプチャにAJAXを理解する方法ですです。私は$_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"; 
     } 
    } 
?> 

を受け取る方法

$('#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'); 
    } 
}); 
}); 

私captcha.php私はそれが動作する方法を理解するのに役立ち、それはAJAX を使ってどのように行うことができますしてください事前にありがとうございます:)

UPDATEを

どうすればいいのですか？$_POST['g-recaptcha-response']; ??

Answer 1

あなたはこのコードを使用することができます：

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"); 
     } 
    }) 
    }); 
}); 

PHPコード：

私は以下のとおりjQueryの/ AJAXを使用して再キャプチャの検証を使用しています

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

：

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

検証/ 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>