谷歌reCaptcha驗證使用jQuery AJAX

我不知道如何將這個應用到我的登錄頁面，一旦驗證成功響應Ajax然後提交表單。這是我的HTML表單（我離開的動作無效，因爲我仍然在測試）谷歌reCaptcha驗證使用jQuery AJAX

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

這就是我所理解的驗證碼發送的驗證碼字..阿賈克斯如果驗證碼success提交表單，如果failed我舉一個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'); 
    } 
}); 
});

我captcha.php我如何收到$_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"; 
     } 
    } 
?>

請幫助我瞭解如何將它的工作以及它如何使用AJAX 進行預先感謝您:)

UPDATE

我只是注意到我怎麼能$_POST['g-recaptcha-response']; ??

來源

2017-07-31 Gelli Espiritu

看到這個類似的問題對SO。 https://stackoverflow.com/questions/31342949/recaptcha-how-to-autosubmit-the-form-when-the-captcha-was-send/31372916#31372916 – colecmc

您可以使用此代碼：

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代碼：

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

來源

2017-07-31 06:27:32

-1

我使用使用jQuery/AJAX按下面再驗證碼驗證：

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

來源

2017-07-31 06:32:54

如果用戶關閉JS會怎麼樣？ – fenec

谷歌reCaptcha驗證使用jQuery AJAX

回答

相關問題