New Google ReCaptcha Implementation And checking before submit

Question

I am new in PHP, jQuery and AJAX.

I am trying to implement new Google Recapcha.

It looks like -

After Click-

And After verified-

And the code of the index.php is-

<html>
<head>
    <title>Google recapcha demo - Codeforgeek</title>
</head>
<body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action="received.php" method="post">
        <input type="email" placeholder="Type your email" size="40"><br><br>
        <textarea name="comment" rows="8" cols="39"></textarea><br><br>
        <!-- ---------------------------------------Capcha Start------------------------------------- -->
            <script src='https://www.google.com/recaptcha/api.js'></script>
            <?php $siteKey="6LdLqv8SAAAAADT3YEjm6ONCwnPD95frMSZ92Ftv" ?>
            <div class="g-recaptcha" data-sitekey="<?php echo $siteKey; ?>"></div>
        <!-- ----------------------------------------Capcha End------------------------------------ -->
        <br><br>
        <input type="submit" name="submit" value="Post comment"><br><br>
    </form>
</body>
</html>

And the received part - received.php

<?php
//////////////////////////////////////////Check Capch Function Start
function CapchaCheck()
{
    $captcha;
    if(isset($_POST['g-recaptcha-response']))
    {
        $captcha=$_POST['g-recaptcha-response'];
    }
    if(!$captcha)
    {
        return false;
    }
    $secreatKey="6LdLqv8SAAAAAIWxKcn2zIKjWau2Mdz6yzE3Kkcm";
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secreatKey."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
    var_dump($response);
    if($response.success==false)
    {
        return false;
    }
    else
    {
        return true;
    }
}
//////////////////////////////////////////Check ReCaptcha Function End

if(CapchaCheck())
{
    echo '<h2>Thanks for posting comment.</h2>';
}
else
{
    echo '<h2>You are spammer ! Get the @$%K out</h2>';
}
?>

It works perfectly.

But I don't want to check if ReCapcha is correct after it is submitted. I want to prevent the users to submit if the ReCaptcha is wrong.

So, I think I need jQuery for this.

But I don't know how to implement it.

Can anyone help me please.

Thanks in advance for helping.

There's an answer here: http://stackoverflow.com/a/28044629/2022751 That question came after yours :) — FloatingRock, Apr 01 '15 at 14:25
you might want to remove the "secreatKey" from your example code, as this will be handy for hackers... — marmor, Aug 13 '15 at 12:42

Akin Zeman · Accepted Answer · 2019-10-27T23:01:14.987

function reCaptchaServerControl(){ 
var reCaptchaResponse = $("#g-recaptcha-response").val();
if (reCaptchaResponse) {
    $.ajax({
        type: 'POST',
        url: "submitContact.php", 
        dataType: 'html',
        async: true,
        data: {response : reCaptchaResponse} ,
        success: function(serverResponse) { 
            //alert(serverResponse);
            var serverResponse = $.parseJSON(serverResponse);
          },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert("Error");
            }
        });
    } else {
        //alert("error");
    }    
}

score -1 · Answer 2 · answered Apr 03 '15 at 04:18

-1

This page explains how to display and customize the reCAPTCHA widget on your webpage.

developers.google.com/recaptcha/docs/display

The callback function can be used to control the behavior of what happens after checking user input.

answered Apr 03 '15 at 04:18

mehany

3,747
2
17
28

No, I have already done this. I have already provided the code. I needed it with AJAX. NP. Thanks for your help – Abrar Jahin Apr 19 '15 at 12:18
am too have this issue @Abrar Jahin – Anahit Ghazaryan May 01 '15 at 13:35
This code is working (my provided code here). You can just change the "$sitekey" to your own and it will work just fine. If you want to check it before submit, you should use AJAX. It will solve your problem. Thanks – Abrar Jahin May 03 '15 at 16:20
I will add the answer later with AJAX when I can implement it. Thanks – Abrar Jahin Jul 05 '15 at 01:35

score -1 · Answer 3 · answered May 29 '15 at 14:48

-1

Use this to validate google recaptcha with simple javascript 100% working validate at client site.

This code at the html body:

<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
 <span id="captcha" style="margin-left:100px;color:red" />

This code put at head section on call get_action(this) method form button:

function get_action(form) {
var v = grecaptcha.getResponse();
if(v.length == 0)
{
    document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
    return false;
}
if(v.length != 0)
{
    document.getElementById('captcha').innerHTML="Captcha completed";
    return true; 
}
}

answered May 29 '15 at 14:48

Pravin Sharma

1,160
1
8
20

Validate CAPTCHA at client? You're joking, right? What stops spammer from ripping out your "validation" and always returning true? – Oleg V. Volkov Mar 29 '16 at 10:27
@OlegV.Volkov Oh, but it only gets worse. The response isn't validated at all; any non-empty response (`v.length != 0`) is accepted! – Mar 29 '16 at 15:24
this code is working for me I had used in my project ....and also it work for other I have comment that it use client site validation not response validation..... – Pravin Sharma Mar 29 '16 at 16:26
1

@PravinSharma I'm a bit late, but still wanted to reply. They are not saying that it won't work, just that it's not secure. It defeats the whole purpose of a captcha. We're not trying to stop real people, we're trying to stop the bots that can get past anything client side. So doing it client side you might as well not have a captcha. – s1h4d0w Apr 02 '17 at 20:38

New Google ReCaptcha Implementation And checking before submit

3 Answers3