Implementing google recaptcha on a form post

I’ve started working on a new project so I can learn about node, express, mongodb, etc etc. I’m enjoying the speed of development and the relative ease of mixing front and back end. I’m not convinced about it’s enterprise credentials but maybe I’ll see something that changes my mind in the future.

The project I’m working on is a crowd sourced repository for dash cam footage where people could look for footage of an accident that they were involved in. The idea came to me after I witnessed a bump where one of the cars drove off. I started with vidme but they have since stopped allowing anonymous uploads, so I’m now looking at streamable.

If you want to see how I’m getting on, the site is at: https://smashcam.co.uk. I wanted something a little more subtle like crashcam or collisioncam, but they were both taken unfortunately.

Register your site for recaptcha

First things first, we need to register our site for recaptcha. Go to https://www.google.com/recaptcha and add a new site. I chose the “I’m not a robot (reCAPTCHA V2)” for my form. and I added my list of domains under the domains section. I added localhost for testing purposes on my local machine, this should be removed when pushing live.

01 site details

After accepting the terms and registering you will be given a site key and a secret key:

02 recaptcha details

We will use these in our project.

Integrating recaptcha into html

Inside my html I added the google recaptcha code to my form. I’m using bootstrap so there’s some wrapping div tags that you may not be interested in:

03 html form code

<div class="form-group">
  <label for="captcha_padding" class="col-md-2 control-label"></label>
  <div class="input-group col-md-5" >
    <div class="g-recaptcha" data-sitekey="<your-site-key"></div>
  </div>
</div>

The important line here is <div class="g-recaptcha" data-sitekey="<your-site-key"></div>. This is what your server will use to make a request to google so the recaptcha can be verified.

I also added the recaptcha script in the <head> of the html document:

04 recaptcha script added in head tag

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

Integrating recaptcha into server

I have my incidents creation inside a controller for incidents. Under the app.post for the locations we can check the verification and then process the rest of our request:

app.post('/incidents', function(req, res) {
  secretKey = "<your-secret-key>";
  var verificationUrl = "https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&response=" + req.body['g-recaptcha-response'] + "&remoteip=" + req.connection.remoteAddress;

  request(verificationUrl,function(error,response,body) {
    body = JSON.parse(body);
    // Success will be true or false depending upon captcha validation.
    if(body.success !== undefined && !body.success) {
      // handle error
    } else {
      // complete upload
    }
 })

05 recaptcha back end script handling

Now when you load up your site, you should see the recaptcha part of the form and it will be verified when you post it to your service:

06 recaptcha on the form

Now you can go ahead and test it and then remove localhost from your domains.