Stop the bots with Google reCAPTCHA

(Image credit: Future)

Keeping bots out always is a numbers game – sadly, the availability of easy-to-use machine learning libraries made cracking many classic captcha types simple. Google stands at the forefront of the botting storm – after all, something only exists if it can be found (prominently) in Big G's indices.

Due to this, Google engineers devote significant amounts of effort into designing anti-bot systems and solutions. They are made available to third parties via a product called reCAPTCHA, which we will go over together during the following steps. For more tools unrelated to bots, see our web design tools post.

tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ 
npm init --y
Wrote to /home/tamhan/nodespace/nodeverify/package.json:
  . . .
tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ 
npm install body-parser express request --save
. . .
+ body-parser@1.18.3
+ request@2.88.0
+ express@4.16.4

<html>
	<head>
		<title>reCAPTCHA demo: Simple page
		</title>
		<script src="https://www.google.com/reCAPTCHA/api.js" async defer></script>
	</head>
	<body>
		<form action="?" method="POST">
			<div class="g-reCAPTCHA" data-sitekey="your_site_key"></div>
			<br/>
			<input type="submit" value="Submit">
		</form>
	</body>
</html>

var Express = require("express");
var BodyParser = require("body-parser");
var Request = require("request");

var myApp = Express();

myApp.use(BodyParser.json());
myApp.use(BodyParser.urlencoded({ extended: true }));

myApp.post("/tamstest", function(request, response) {
	var recaptcha_url = "https://www.google.com/recaptcha/api/siteverify?";
	recaptcha_url += "secret=6LewMZgUAAAAAIRSB2gv5akKx2cWyFUlKzRmd7ws&";
	recaptcha_url += "response=" + request.body["g-recaptcha-response"] + "&";
	recaptcha_url += "remoteip=" + request.connection.remoteAddress;

	Request(recaptcha_url, function(error, 
	resp, body) {
		body = JSON.parse(body);
		if(body.success !== undefined && !body.
		success) {
			return response.send({ "message": 
			"Captcha validation failed" });
		}
		response.header("Content-Type", 
		"application/json").send(body);
	});
});

var server = myApp.listen(3000, function() {
	console.log("Listening on " + server.
	address().port);
});

<body>
		<form action="http://localhost:3000/tamstest" method="POST">
			<div class="g-recaptcha" data-sitekey="6LewMZgUAAAAAEPSwPVP6HLulnjxa_scWtwhyHge"></div>
			<br/>

tamhan@tamhan-thinkpad:~/nodespace/nodeverify$
node index.js
Listening on 3000
tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ 
python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

<form action="http://localhost:3000/tamstest" method="POST">
	<div class="g-reCAPTCHA" data-sitekey="6LewMZgUAAAAAEPSwPVP6HLulnjxa_scWtwhyHge"></div>
	<br/>
	<input type="submit" value="Submit" disabled>
</form>

<html>
	<head> . . .
		<script>
			function onDCFired(value){
				console.log(value);
			}
		</script>
	</head>
	<body>
		<form action="http://localhost:3000/
		tamstest" method="POST">
			<div class="g-recaptcha" data-sitekey="6LewMZgUAAAAAEPSwPVP6HLulnjxa_scWtwhyHge" data-callback=
			"onDCFired"></div>

var myCallback = function(val) { console.
log(val); };
grecaptcha.render(
	document.getElementsById(‘my-id'), 
	{
		callback: myCallback, 
		sitekey: mySiteKey
	});

	<script>
			function onDCFired(value){
				document.getElementById
				("Button").disabled = false;
			}
	</script>

		<input type="submit" id="Button" 
		value="Submit" disabled>

		function onDCExpired(value){
			document.getElementById("Button").
			disabled = true;
		}

	<div class="g-recaptcha" data-sitekey="6LewMZgUAAAAAEPSwPVP6HLulnjxa_scWtwhyHge" 
	data-callback="onDCFired" data-expired-callback="onDCExpired"></div>

<script src="https://www.google.com/recaptcha/api.js?render=recaptcha_site_key"></script>
	<script>
	grecaptcha.ready(function() {
		grecaptcha.execute(‘recaptcha_site_key',
		{action: ‘homepage'}).
		then(function(token) {
			...
		});
	});
	</script>

<script>
	grecaptcha.ready(function() {
		grecaptcha.execute(‘reCAPTCHA_site_key', 
		{action: ‘homepage'});
	});
</script>

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.

Stop the bots with Google reCAPTCHA

02. Store site and server keys

03. Understand site verification

04. Set up Express.JS

05. Prepare to serve

06. Understand and test

07. Load some elements

08. Prepare to verify...

09. ...and enquire at Google's servers

10. Set it loose

11. Adjust the form

12. Bring it up!

13. Perform a dry run

14. Disable the submit button

15. Handle CAPTCHA events

16. Excursion: dynamic CAPTCHA rendering

17. Enable button if needed...

18. ...and clean up after us

19. Use additional attributes

20. Work transparently…

21. ...and provide additional information

Related articles