Google ReCaptcha Front-End Solution

Question

I want to use Google ReCaptcha but i also dont't want to touch server side or back-end code.

I am using ASP.Net MVC but i also don't want to use any package from nuget or any library. Solution must be front-end only. All javascript/jquery solutions are accepted.

I also note that my forms are collecting data and sending it as an e-mail to specified mailbox. I am also not using any 3rd party library for this process. It is manually coded only by ASP.Net MVC.

Answer 1

Thanks to Ivo Coumans for detailed explanation. I got it working but obvously it is not safe. Rinto Antony gave me an idea here is what i do.

I am calling the Google ReCaptcha API to head section of my website and adding the div that creates the captcha:

<div class="g-recaptcha" data-sitekey="api_key" data-callback="enableBtn"></div>

Since data-callback is triggering enableBtn function, it is possible to take action if it is returning true. So i have added a disabled submit button to my form.

<input type="submit" value="Gönder" id="button1" disabled>

Then i have added a simple javascript to enable it:

<script type="text/javascript">
    function enableBtn() {
    document.getElementById("button1").disabled = false;
}
</script>

I am aware that this can be easily bypassed and not a real solution but it is working. I am open to any ideas that can make this better.

Answer 2

Unless you are using a CMS , you will have to put some code in the backend since you will making a POST request with the reCAPTCHA.

I highly recommend wordpress as it will be a matter of just downloading a plugin and then just copying the keys and pasting them.