Google reCaptcha使用jquery AJAX进行验证 [英] Google reCaptcha validate using jquery AJAX

问题描述

我不知道如何将其应用于我的登录页面，一旦在ajax上成功获得验证码然后提交表单.这是我的html表单(由于我仍在测试中，我将action保留为空)

I don't know how can i apply this to my login page, once captcha success response on ajax then submit form. Here's my html form(i leave action null because i'm still in testing)

<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的方式.如果验证码成功，则提交表单，如果失败，我会给出警报./p>

Here's how i understand ajax on captcha sending captcha word.. if captcha success submit form if failed i will give an 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完成谢谢您提前:)

please help me to understand how will it work and how can it be done using AJAX THANK YOU IN ADVANCE :)

更新

我只是注意到我该如何 $ _ POST ['g-recaptcha-response']; ??

i just notice how can i $_POST['g-recaptcha-response']; ??

推荐答案

您可以使用以下代码:

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

这篇关于Google reCaptcha使用jquery AJAX进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！