Captcha is not validating in jquery side..!

前端未结

关注

 1  742

I am using php to validate the google REcaptcha..As far as the back-end validation gose is working out fine it giving error if captcha not submitted and if done user is stor

相关标签:

1条回答

不知归路

2020-12-22 09:25

First of all make sure that you've included the necessary JavaScript resource to render reCAPTCHA widget properly, like this:

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

Here's the reference:

Displaying the widget

Now comes to your user's response. The response from the user's captcha challenge can be fetched in three ways. It can be as,

g-recaptcha-response - a POST parameter in the submitted form
grecaptcha.getResponse(widget_id) - will provide the response after the user completes the captcha.
A string argument to the callback function specified in the config object passed to the render method.

Here's the reference:

Verifying the user's response

For you purpose use grecaptcha.getResponse() to get the user's response.

And as a sidenote use grecaptcha.reset() to ask the end user to verify with reCAPTCHA again. From the manual:

If your website performs server side validation using an AJAX request, you should only verify the user’s reCAPTCHA response token (g-recaptcha-response) once. If a verify attempt has been made with a particular token, it cannot be used again. You will need to call grecaptcha.reset() to ask the end user to verify with reCAPTCHA again.

Here's your HTML code:

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

Your jQuery should be like this:

$(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);
                }
            });
        }

    });
});

And finally your PHP should be like this:

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

?>

0 讨论(0)