小编典典

验证码不在jquery端进行验证。

json

我正在使用php来验证google REcaptcha
..就后端验证而言,如果验证码未提交并且完成的用户存储在数据库中,但是当我将其与jquery连接时出现主要问题,则会给出错误提示。
..问题是,即使验证码在后端经过验证,每次也总是发出错误“您缺少的验证码”,请帮帮我,如果有错,请原谅我.. !!

这里gose .php 文件

                   <?php

        require_once 'DB_Functions.php';
        $db = new DB_Functions();

        // json response array
        $response = array("error" => false);
        if (!empty($_POST['fname']) && !empty($_POST['lname']) && !empty($_POST['email']) && !empty($_POST['password']) && !empty($_POST['mobile'])){
                /*
                if required include seperate validation
                */
                // receiving the post params
                $fname = trim($_POST['fname']);
                $lname = trim($_POST['lname']);
                $email = trim($_POST['email']);
                $password = $_POST['password'];
                $mobile = trim($_POST['mobile']);

                /*
                validation process
                starts from here
                */
                // validate your email address
                if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
                        //validate your password
                        if(strlen($password) >= 6){
                                //validate your mobile
                                if(strlen($mobile) == 12){
                                        //validate captcha
                                        //your site secret key
                                        $secret = 'XXXX_secret-key_XXXX';

                                        if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
                                                //get verified response data

                                                $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['recaptchaResponse'];
                                                $verifyResponse = file_get_contents($param);
                                                $responseData = json_decode($verifyResponse);

                                                if($responseData->success){
                                                        //Check for valid email address
                                                        if ($db->isUserExisted($email)) {
                                                                // user already existed
                                                                $response["error"] = true;
                                                                $response["error_msg"] = "User already existed with " . $email;
                                                                echo json_encode($response);
                                                        }elseif($db->isMobileNumberExisted($mobile)) {
                                                                        //user already existed
                                                                        $response["error"] = true;
                                                                        $response["error_msg"] = "user already existed with" . $mobile;
                                                                        echo json_encode($response);
                                                        }else{  
                                                                // create a new user
                                                                $user = $db->storeUser($fname, $lname, $email, $password, $mobile);
                                                                if ($user) {
                                                                        // user stored successfully
                                                                        $response["error"] = false;
                                                                        $response["uid"] = $user["id"];
                                                                        $response["user"]["fname"] = $user["fname"];
                                                                        $response["user"]["lname"] = $user["lname"];
                                                                        $response["user"]["email"] = $user["email"];
                                                                        $response["user"]["created_at"] = $user["created_at"];
                                                                        $response["user"]["updated_at"] = $user["updated_at"];
                                                                        echo json_encode($response);
                                                                } else {
                                                                        // user failed to store
                                                                        $response["error"] = true;
                                                                        $response["error_msg"] = "Unknown error occurred in registration!";
                                                                        echo json_encode($response);
                                                                }
                                                        }
                                                }else{
                                                        //failed to submit captcha
                                                        $response["error"] = true;
                                                        $response["error_msg"] = "Sorry this application is not for bots";
                                                        echo json_encode($response);
                                                }
                                        }else{
                                                //failed to submit captcha
                                                $response["error"] = true;
                                                $response["error_msg"] = "your missing captcha";
                                                echo json_encode($response);
                                        }
                                }else{
                                        //invalid mobile number
                                        $response["error"] = true;
                                        $response["error_msg"] = "Mobile number is invalid!";
                                        echo json_encode($response);
                                }
                        }else{
                                //min of 6-charecters
                                $response["error"] = true;
                                $response["error_msg"] = "password must be of atleast 6-characters!";
                                echo json_encode($response);
                        }
                }else{
                        // invalid email address
                        $response["error"] = true;
                        $response["error_msg"] = "invalid email address";
                        echo json_encode($response);
                }
        }else{
                //missing the required fields
                $response["error"] = true;
                $response["error_msg"] = "Please fill all the required parameters!";
                echo json_encode($response);
        }

?>

这是引导中的gose .html 文件

   <!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MiiSKy | Register</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src = "register.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src='https://www.google.com/recaptcha/api.js'></script>


</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>
            <div>

                <!--<h3 class="logo-name">MiiSky</h3>-->
                <img src="img/landing/mii-logo.png">
            </div>
            <!--<h3>Register to MiiSky</h3>-->
            <p>Create account to see it in action.</p>
            <form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">

                <div class="form-group">
                    <input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required="">
                </div>
                <div class="form-group">
                    <input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required="">
                </div>
                <div class="form-group">
                    <input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required="">
                </div>
                <div class="form-group">
                    <input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required="">
                </div>
                <div class="form-group">
                    <input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required="">
                </div>
                <div  class="form-group" id="recaptcha_widget">
                                                    <div class="required">
                                                      <div class="g-recaptcha" data-sitekey="XXXXX_site-key_XXXXXX"></div>
                                                   <!-- End Thumbnail-->
                                                  </div>
                </div>
                <button type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b">Register</button>

                <p class="text-muted text-center"><small>Already have an account?</small></p>
                <a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>
            </form>

这里是主要的 .js 文件

          $(document).ready(function(){
    //execute's the function on click
    $("#submit").click(function(e){

        var recaptchaResponse = grecaptcha.getResponse();

        var status = $('form')[0].checkValidity();
        if(status){
            /*jquery to call the url requested 
            and parse the data in json*/
            $.ajax({
                url: "process.php",
                type: "POST",
                data: {
                    fname: $("#fname").val(),
                    lname: $("#lname").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    mobile: $("#mobile").val(),
                    recaptchaResponse: recaptchaResponse
                },
                async: false,
                dataType: "JSON",
                /*Give out the alert box
                to display the results*/ 
                success: function (json){
                    if(json.error){
                        alert(json.error_msg);
                        grecaptcha.reset();
                        e.preventDefault();
                    }else{
                        alert("Registeration successful!",json.user.email);
                        $('#register').submit();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        }

    });
});

阅读 267

收藏
2020-07-27

共1个答案

小编典典

首先,请确保您已包含必要的JavaScript资源以正确呈现reCAPTCHA小部件,如下所示:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

这是参考:

现在是用户的响应。用户验证码质询的响应可以三种方式获取。可以是

  • g-recaptcha-response- 提交表单中的POST参数
  • grecaptcha.getResponse(widget_id) -在用户完成验证码输入后将提供响应。
  • 传递给render方法的config对象中指定的回调函数的字符串参数。

这是参考:

出于您的目的,请使用 grecaptcha.getResponse() 获取用户的响应。

作为旁注,请使用 grecaptcha.reset() 要求最终用户再次使用reCAPTCHA进行验证。从手册中:

如果您的网站使用AJAX请求执行服务器端验证,则应该只验证一次用户的reCAPTCHA响应令牌( g-recaptcha-response
)。如果使用特定令牌进行了验证尝试,则无法再次使用它。您将需要调用 grecaptcha.reset()
来要求最终用户再次使用reCAPTCHA进行验证。

这是您的 HTML 代码:

<form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">

    <div class="form-group">
        <input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required="">
    </div>
    <div class="form-group">
        <input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required="">
    </div>
    <div class="form-group">
        <input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required="">
    </div>
    <div class="form-group">
        <input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required="">
    </div>
    <div class="form-group">
        <input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required="">
    </div>
    <div  class="form-group" id="recaptcha_widget">
        <div class="required">
            <div class="g-recaptcha" data-sitekey="XXXXXX_SITE-KEY_XXXXXXX"></div>
            <!-- End Thumbnail-->
        </div>
    </div>
    <button type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b">Register</button>

</form>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>

您的 jQuery 应该是这样的:

$(document).ready(function(){
    //execute's the function on click
    $("#submit").click(function(e){

        var recaptchaResponse = grecaptcha.getResponse();

        var status = $('form')[0].checkValidity();
        if(status){
            /*jquery to call the url requested 
            and parse the data in json*/
            $.ajax({
                url: "process.php",
                type: "POST",
                data: {
                    fname: $("#fname").val(),
                    lname: $("#lname").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    mobile: $("#mobile").val(),
                    recaptchaResponse: recaptchaResponse
                },
                async: false,
                dataType: "JSON",
                /*Give out the alert box
                to display the results*/ 
                success: function (json){
                    if(json.error){
                        alert(json.error_msg);
                        grecaptcha.reset();
                        e.preventDefault();
                    }else{
                        alert("Registeration successful!",json.user.email);
                        $('#register').submit();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        }

    });
});

最后,您的 PHP 应该是这样的:

<?php

    // your code

    //your site secret key
    $secret = 'XXXXXXX_Secret-key_XXXXXXX';

    if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
        //get verified response data
        $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['recaptchaResponse'];
        $verifyResponse = file_get_contents($param);
        $responseData = json_decode($verifyResponse);

        if($responseData->success){
            // success
        }else{
            // failure
        }

    }

    // your code

?>
2020-07-27