Google reCaptcha使用jquery AJAX进行验证

Question

我不知道如何将其应用于我的登录页面，一旦在ajax上成功获得验证码然后提交表单。这是我的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>

这是我如何理解发送验证码单词的验证码上的ajax ..如果验证码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提前完成：)

更新

我只是注意到我该怎么办$_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代码：

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