Google reCaptcha 使用 jquery AJAX 验证

Question

我不知道如何将它应用到我的登录页面，一旦验证码在 ajax 上成功响应，然后提交表单。 这是我的 html 表单（我将 action 设为 null，因为我仍在测试中）

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

Answer 2

我正在使用 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>