How to add reCAPTCHA or hCAPTCHA to any web application


Forms spam can be a real headache. It has been reported that just over half of all internet traffic comes from automated programs or bots. Many masquerade as people to post spam comments on blogs, harvest email addresses for spammers, rig online surveys and all kinds of annoying stuff.

To alleviate this problem and give form hosting websites a way to distinguish between real people and bots, CAPTCHA was created at Carnegie Mellon University in 2000. CAPTCHA stands for “VScompletely Aautomated Ppublic Tis to say VScomputers and Hthe man Apart. ”The most well-known and widely used CAPTCHA services today are called reCAPTCHA and hCAPTCHA.

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

That’s why I created a free service called reCAPTCHAme. reCAPTCHAme works with both reCAPTCHA and hCAPTCHA. Either can be implemented on any website or web application, regardless of programming language, framework, or development environment, and without writing a single line of code on the server side.

All that is needed to secure a form is to add the client-side code below, point the form to the reCAPTCHAme service, and include the final processing page of the form in a hidden tag. reCAPTCHAme will verify the token and push the form 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

  • Sign up for reCAPTCHA and get a key for your site

  • Include the reCAPTCHA js file on the form page

  • Add a callback function to submit the form like this

    onSubmit function (token) {

    document.getElementById (“demo-form”). submit ();

    }

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

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

hCAPTCHA

  • Sign up with hCAPTCHA and get a key for your site

  • Include the hCAPTCHA js file on the form page

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

https://docs.hcaptcha.com/

RECAPTCHAme

Then go to reCAPTCHAme and follow these three steps:

  • Register and get a reCAPTCHAme API key for your form

  • Point your form to the reCAPTCHAme verification service

  • Include a hidden tag with the final form landing page

https://recaptchame.com/docs.html

See the reCAPTCHAme contact page for an example of the hCAPTCHA service implementation. For an example of the reCAPTCHA service, visit our partner site Form2Channel.com.

When you’re done, test your form submissions. If you’re human – and I guess you are – they should land on your form processing page and into your system. You can also find them in your account in the reCAPTCHAme app.


Comments are closed.