How to add reCAPTCHA or hCAPTCHA to any web application

Form spam can be a real headache. It has been reported that slightly more than half of all Internet traffic originated with automated programs, or bots. Many masquerade as people in order to post spam comments on blogs, harvest email addresses for spammers, rig online polls, and all sorts of annoying stuff.

To mitigate this problem and give websites hosting forms a way to distinguish between real people and bots, CAPTCHA was created at Carnegie Mellon University back in 2000. CAPTCHA stands for “Completely Automated Public Test to tell Computers and Humans Apart”. The most well known and widely used CAPTCHA services today are called reCAPTCHA and hCAPTCHA.

Both of these have a client-side and a server-side component. A bunch of tutorials exist to help developers to implement these services in a variety of languages and with a number of frameworks. Adding the client-side bits for both services is reasonably straightforward, but the server side of reCAPTCHA or hCAPTCHA is not always that simple.

This is why I created a free service called reCAPTCHAme. reCAPTCHAme works with both reCAPTCHA as well as hCAPTCHA. Either of these can be implemented on any website or webapp regardless of programming language, framework or development environment and without writing a single line of server-side code.

All that is needed to secure a form is to add the client-side code below, point the form at the reCAPTCHAme service and include the final form processing page in a hidden tag. reCAPTCHAme will verify the token and pass the form on to the processing page in the hidden tag if it passes the test. Failed form submissions are stored in the reCAPTCHAme app and can be downloaded there.

Here are the steps to follow to implement reCAPTCHAme with reCAPTCHA and with hCAPTCHA

reCAPTCHA

• Signup to reCAPTCHA and get a key for your site

• Include the reCAPTCHA js file on the form page

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

• Add a callback function for submitting the form like so

  function onSubmit(token) {

  document.getElementById("demo-form").submit();

  }

• Add this submit button html and make sure you add your site key to the data-sitekey attribute

  <button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>

https://developers.google.com/recaptcha/docs/v3

hCAPTCHA

• Signup with hCAPTCHA and get a key for your site

• Include the hCAPTCHA js file on the form page

  <script src="https://js.hcaptcha.com/1/api.js" async defer></script>

• Include this html tag (add your key into the data-sitekey attribute)

  <div class="h-captcha" data-sitekey="your_site_key"></div>

https://docs.hcaptcha.com/

reCAPTCHAme

Then head over to reCAPTCHAme and follow these three steps:

• Signup and get a reCAPTCHAme API key for your form

• Point your form at the reCAPTCHAme verification service

  <form action="https://reCAPTCHAme.com/?apikey=[YOUR reCaptchaMe API KEY]" method="POST">

• Include a hidden tag with the final form destination page

  <input type="hidden" name="recaptchame-destination" value="[YOUR FULL FORM PROCESSING URL]"/>

https://recaptchame.com/docs.html

Check out the reCAPTCHAme contact page to see an example of how to implement the hCAPTCHA service. For an example of the reCAPTCHA service, head over to our partner site Form2Channel.com.

When you are done, test your form submissions. If you are human - and I am guessing you are - they should arrive on your form processing page and in your system. You can also find them in your account in the reCAPTCHAme app.