jaxbot/form.html

## form.html
<!doctype html>
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function registerAPI(form) {
	var params = {
		username: form.username.value,
		password: form.password.value,
		email: form.email.value,
		recaptcha: document.getElementById("g-recaptcha-response").value
	};

	var xhr = new XMLHttpRequest();
	xhr.open("POST", "/register");
	xhr.onload = function() {
		var json = JSON.parse(xhr.responseText);
		console.log(json);
		if (json.registeredSuccessfully) {
			showSuccess();
		} else {
			showError(json.reason);
		}
	}
	xhr.setRequestHeader("Content-type", "application/json");
	xhr.send(JSON.stringify(params));
}

function showSuccess() {
	document.getElementById("form").style.display = "none";
	document.getElementById("success").style.display = "block";
}

function showError(err) {
	document.getElementById("error").innerHTML = err;
}
</script>
</head>
<body>
<h1>Register for test site</h1>

<form action="register" method="post" onsubmit="registerAPI(this);return false;" id="form">
	<span id="error"></span><br>
	<input type="text" name="username" placeholder="Username"><br>
	<input type="text" name="email" placeholder="Email"><br>
	<input type="password" name="password" placeholder="Password"><br>
	<div class="g-recaptcha" data-sitekey=" SITEKEY GOES HERE "></div>
	<input type="submit" value="Register">
</form>

<div id="success" style="display:none">
	Successfully registered, yay.
</div>

</body>
</html>

## index.js
var express = require('express');
var bodyParser = require('body-parser');
var engines = require('consolidate');
var app = express();

var https = require('https');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json({ extended: false }));
app.engine('html', engines.hogan);

app.get('/', function(req, res) {
        res.render('form.html');
});

app.post('/register', function(req, res) {
        console.log(req.body);
        verifyRecaptcha(req.body["recaptcha"], function(success) {
                if (success) {
                        res.end("Success!");
                        // TODO: do registration using params in req.body
                } else {
                        res.end("Captcha failed, sorry.");
                        // TODO: take them back to the previous page
                        // and for the love of everyone, restore their inputs
                }
        });
});

app.listen(3000);
console.log("running on port 3000");

var SECRET = "";

// Helper function to make API call to recatpcha and check response
function verifyRecaptcha(key, callback) {
         https.get("https://www.google.com/recaptcha/api/siteverify?secret=" + SECRET + "&response=" + key, function(res) {
                var data = "";
                res.on('data', function (chunk) {
                        data += chunk.toString();
                });
                res.on('end', function() {
                        try {
                                var parsedData = JSON.parse(data);
                                console.log(parsedData);
                                callback(parsedData.success);
                        } catch (e) {
                                callback(false);
                        }
                });
        });
}

## package.json
{
  "name": "captcha",
  "version": "0.0.0",
  "private": true,
   "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "consolidate": "0.13.1",
    "hogan.js": "3.0.2",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",

    "serve-favicon": "~2.3.0"
  }
}

## server.js
function verifyRecaptcha(key, callback) {
     https.get("https://www.google.com/recaptcha/api/siteverify?secret=" + SECRET + "&response=g-recaptcha-response", function(res) {
        var data = "";
        res.on('data', function (chunk) {
                        data += chunk.toString();
        });
        res.on('end', function() {
            try {
                var parsedData = JSON.parse(data);
                console.log(parsedData);
                callback(parsedData.success);
            } catch (e) {
                callback(false);
            }
        });
    });
}
	<!doctype html>
	<html>
	<head>
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<script>
	function registerAPI(form) {
	var params = {
	username: form.username.value,
	password: form.password.value,
	email: form.email.value,
	recaptcha: document.getElementById("g-recaptcha-response").value
	};

	var xhr = new XMLHttpRequest();
	xhr.open("POST", "/register");
	xhr.onload = function() {
	var json = JSON.parse(xhr.responseText);
	console.log(json);
	if (json.registeredSuccessfully) {
	showSuccess();
	} else {
	showError(json.reason);
	}
	}
	xhr.setRequestHeader("Content-type", "application/json");
	xhr.send(JSON.stringify(params));
	}

	function showSuccess() {
	document.getElementById("form").style.display = "none";
	document.getElementById("success").style.display = "block";
	}

	function showError(err) {
	document.getElementById("error").innerHTML = err;
	}
	</script>
	</head>
	<body>
	<h1>Register for test site</h1>

	<form action="register" method="post" onsubmit="registerAPI(this);return false;" id="form">
	<span id="error"></span><br>
	<input type="text" name="username" placeholder="Username"><br>
	<input type="text" name="email" placeholder="Email"><br>
	<input type="password" name="password" placeholder="Password"><br>
	<div class="g-recaptcha" data-sitekey=" SITEKEY GOES HERE "></div>
	<input type="submit" value="Register">
	</form>

	<div id="success" style="display:none">
	Successfully registered, yay.
	</div>

	</body>
	</html>
	var express = require('express');
	var bodyParser = require('body-parser');
	var engines = require('consolidate');
	var app = express();

	var https = require('https');

	app.use(bodyParser.urlencoded({ extended: false }));
	app.use(bodyParser.json({ extended: false }));
	app.engine('html', engines.hogan);

	app.get('/', function(req, res) {
	res.render('form.html');
	});

	app.post('/register', function(req, res) {
	console.log(req.body);
	verifyRecaptcha(req.body["recaptcha"], function(success) {
	if (success) {
	res.end("Success!");
	// TODO: do registration using params in req.body
	} else {
	res.end("Captcha failed, sorry.");
	// TODO: take them back to the previous page
	// and for the love of everyone, restore their inputs
	}
	});
	});

	app.listen(3000);
	console.log("running on port 3000");

	var SECRET = "";

	// Helper function to make API call to recatpcha and check response
	function verifyRecaptcha(key, callback) {
	https.get("https://www.google.com/recaptcha/api/siteverify?secret=" + SECRET + "&response=" + key, function(res) {
	var data = "";
	res.on('data', function (chunk) {
	data += chunk.toString();
	});
	res.on('end', function() {
	try {
	var parsedData = JSON.parse(data);
	console.log(parsedData);
	callback(parsedData.success);
	} catch (e) {
	callback(false);
	}
	});
	});
	}
	{
	"name": "captcha",
	"version": "0.0.0",
	"private": true,
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"dependencies": {
	"body-parser": "~1.13.2",
	"cookie-parser": "~1.3.5",
	"debug": "~2.2.0",
	"consolidate": "0.13.1",
	"hogan.js": "3.0.2",
	"express": "~4.13.1",
	"jade": "~1.11.0",
	"morgan": "~1.6.1",

	"serve-favicon": "~2.3.0"
	}
	}