Verifying Captcha

Question

Q1 - I have been reading through the docs for reCaptcha, and looking at many different forum cases but I am not experienced with API calls at all - I am trying to add a captcha to my custom contact form but I am stuck on the verification step trying to figure out how/where to send the info for verification, and how/where to receive it so I know weather or not the user is verified.

(Side Question: Why is it necessary to validate the token generated by the captcha? Isn't it good enough that you can tell weather or not the puzzle/answer was solved?)

Before the closing head tag:

<script src='https://www.google.com/recaptcha/api.js'></script>

End of my form:

<div class="g-recaptcha" data-sitekey="my-site-key"></div>

I can see the string/token generated by a correct answer when I call:

grecaptcha.getResponse();

Now (as I understand it) I have to verify this string/token which is where I get stuck:

URL: https://www.google.com/recaptcha/api/siteverify
METHOD: POST

DOCS: https://developers.google.com/recaptcha/docs/verify

I am relatively decent with jQuery and vanilla JS but when it comes to API calls I have almost no experience, which is why at this point in the docs I am unsure of how to 1 - form an/the API call (for verification), 2 - where to make the API call from template files-wise, 3 - how to get the response back, or rather how the response comes back.

As I mentioned I am using a Bigcommerce store, and the Google reCaptcha documentation mentioned in several different areas that this step is done on the server-side (or should be). I know that I am fairly restricted in the template files that I can modify - I can view and modify the HTML/CSS/JS files but I have no access to any PHP.

Any help or push in the right direction would be greatly appreciated - at this point I am going in circles finding and trying to read/follow the same docs (Google and other) and forum cases. Thank you.

Answer 1

Trying to answer your questions one by one.

Client side Captcha's are discussed here, please check and note that considering the power of Java Script, client side captchas are not safe.

1. How reCAPTCHA works: Once someone include below script, google will verify user.

       https://www.google.com/recaptcha/api.js
   

   Writing below attributes in the Form will send data to google first and response will be added in final post of the current Form with attribute named g-recaptcha-response :

       <div class="g-recaptcha" data-sitekey="your_site_key"></div>
   

2. How to validate reCAPTCHA One has to validate this g-recaptcha-response with google. [ NOTE: this is requried becaues client can send any random value for attribute g-recaptcha-response without going through Captcha ]

       $verifyResponse = 
       file_get_contents('https://www.google.com/recaptcha/api/siteverify?
       secret='.$YOUR_SECRET.'&response='.$_POST['g-recaptcha-response'])
       /*allow_url_fopen must be ON if you want to use file_get_contents.
        check it using phpinfo();*/
   
   
       file_put_contents( "logfile",  $verifyResponse, FILE_APPEND );
       $responseData = json_decode($verifyResponse);
   
       $register_result = 'Robot verification failed, please try again.';
       if( $responseData->success )
       {
             $register_result = 'You are not a bot';
       }
       else $register_result = 'You are a bot.';
   

3. Captcha with HTML/JS/CSS reCaptcha will not work for you if you don't have PHP access.

4. Puzzles as Captcha Captcha Puzzles are also possible and such captcha's are also available but they are handled on server side.

Answer 2

The reCaptcha verification si to make sure that the answer you received does come from reCaptha server, that the user is not a robot, that it hasn't matured, and that it hasn't been used more than once.

All this is really important to the server running the app, more that the cliente showing the form in order to accept or reject the form to be processed.

This is why the validation has to be done on the server. The client is an unsecure environment that can be tricked so the server cannot trust it.

Besides, to do the validation you need a secret api key. As it is secret it can't be embeded into the client code.

If you don't have access to the php or cannot add and aditional php to do the validation, I don't think you can implement reCaptcha.

EDIT I

The bottom line is that client code (js, jQuery running in a browser) cannot be trusted to do any kind of validation from the server point of view.

For example suppose you implement an input element for the user to enter the result of the sum of two random integers between 0 and 9. Very simple.

In the javascript code in some place there is an:

if(a + b === c){ 
    sendFormToServer();
}else{
    reject();
}

Anyone using the browser's developer tools could bypass the "if" and directly call sendFormToServer(). And the server has no way of knowing it.