This plugin enables Google's reCAPTCHA v2 to protect forms against automated abuse on ConnextCMS.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
connextcms
keystone
README.md
merge-plugin
pluginSettings.json

README.md

reCAPTCHA Plugin for ConnextCMS

This plugin implements the server-side processing necessary to execute a Google reCAPTCHA validation. Developers using this plugin should be familiar with the following Google resources:

Installation

It is assumed that this repository will be cloned into a working copy of ConnextCMS. You can clone your own working copy of ConnextCMS here for testing purposes.

To install this plugin, clone this repository into your home directory and run the merge-plugin script. This script assumes you are using a ConnextCMS installation best practices.

This plugin requires the following npm packages installed in the myCMS directory:

  • request

Usage

This plugin adds a new view to the ConnextCMS dashboard where you can add the private site key given to you by Google. Front end code can make a call to /api/recaptchaplugin/validateresponse to validate the reCAPTCHA response from the user.

Here is an example of front end JavaScript taking information from a simple form and validating it before sending an email through the ConnextCMS Mailgun hook:

//This function validates the form before sending an email.
function validateMessage() {
  //debugger;

  //Get the input values
  var name = $('#Name').val();
  var email = $('#Email').val();
  var message = $('#Message').val();
  var tel = $('#Tel').val();

  if( (name == "") || (email == "") || (message == "") ) {
    alert('Your message is missing either a name, email, or message. Please fill out all boxes.');
    return;
  }

  var gResponse = {};
  gResponse.captchaResponse = grecaptcha.getResponse();

  $.post('/api/recaptchaplugin/validateresponse', gResponse, function(data) {
    //debugger;

    if(data.success) {
      //debugger;
      sendMessage();
    } else {
      //debugger;
      alert('Google reCAPTCHA verification did not succeed. Please try again.');
    }

  }).fail(function( jqxhr, textStatus, error ) {
    //debugger;

    var err = textStatus + ", " + error;

    try {
      console.log( "Request to /api/recaptchaplugin/validateresponse Failed: " + error );
      console.error('Error message: '+jqxhr.responseText);
    } catch(err) {
      console.error('Error trying to send log to admin!');
    }            
  });

}


//This function sends an email when the user fills out the contact form.
function sendMessage() {
  //debugger;

  //Get the input values
  var name = $('#Name').val();
  var email = $('#Email').val();
  var message = $('#Message').val();
  var tel = $('#Tel').val();

  var obj = new Object();
  //obj.email = "chris.troutner@gmail.com";
  obj.email = "carperp@frontier.com";
  obj.from = email;
  obj.subject = "[Website Contact Form: From "+name+"]";
  obj.body = "Telephone: "+tel+"\n"+message;
  obj.html = false;

  $.get('/api/email/send', obj, function(data) {
    //debugger;
    console.log('Email sent!');

    //Clear the form
    $('#Name').val('');
    $('#Email').val('');
    $('#Message').val('');
    $('#Tel').val('');

    alert('Email sent!');

  })
  .fail(function( jqxhr, textStatus, error ) {
    debugger;

    var err = textStatus + ", " + error;

    try {
      if(jqxhr.responseText.indexOf("Invalid MailGun settings") != -1) {
        console.error('Can not email log to adminstrator for debugging! Have you set you MailGun settings correctly?');
      } else {
        console.log( "Request to /api/sendlog Failed: " + error );
        console.error('Error message: '+jqxhr.responseText);
      }
    } catch(err) {
      console.error('Error trying to send log to admin!');
    }            
  });
}