Simple Express Server for invisible reCaptcha server-side validation
Clone or download
#1 Compare This branch is 3 commits behind andrewrmn:master.
Latest commit 381d2d7 Feb 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Init commit Feb 23, 2018
README.md Update README.md Feb 23, 2018
package.json Init commit Feb 23, 2018
server.js updating environment variable Feb 23, 2018

README.md

Invisible Recaptcha Server-Side Validator

Simple Express Server for invisible reCaptcha server-side validation. Works nicely for static websites, in my case — a Jekyll website hosted on GitHub Pages.

Instructions

  1. Register your site/ get your reCaptcha keys here
  2. Create a new Heroku App
  3. In your new Heroku App, go to settings and create a new Config Var called RECAPTCHA_SECRET and enter your secret key in the value field
  4. Clone this repo
  5. Deploy your app via the Heroku CLI or hook up your GitHub repository via the Deploy tab in your Heroku App
  6. After you deploy your app, your app url should display 'reCaptcha verification'

Client-Side Instructions

  1. Paste this snippet in the head of your html template: <script src='https://www.google.com/recaptcha/api.js'></script>
  2. Choose your method for integration. I ultimately went with the 'Programmatically invoke the challenge' method to have control over when the reCaptcha validation happens (I needed it to happen after the form field validation).
  3. Whichever method you choose, set your callback-funtion to onSubmit.
  4. Here is what your onSubmit funtion should look like:
function onSubmit(token) {
  submitForm();
}
  1. Now we need to grab our token and send it to our Heroku app. Our app will read the token, send it to Google along with our secret key, get a response and send it back to us with a pass or fail.
function submitForm(){
  console.log('Initialize Server-Side Validation');
  
  // Note that we grab the value of '#g-recaptcha-response' and not just '#g-recaptcha'
  var captcha = document.querySelector('#g-recaptcha-response').value;

  fetch('YOUR HEROKU APP URL HERE', {
    method:'POST',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-type':'application/json'
    },
    body:JSON.stringify({captcha: captcha})
  })
  .then((res) => res.json())
  .then((data) => {
    console.log(data.success);
    if( data.success === true ){
      document.getElementById("my-form").submit();
    }
  });
}