Giter VIP home page Giter VIP logo

invisible-recaptcha-validator's Introduction

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();
    }
  });
}

invisible-recaptcha-validator's People

Contributors

andrewrmn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.