Articles

Easy ModX Quip with Recaptchav2

Mike Harvey

Article Header

As a followup to the previous article, on Responsive ModX Commenting with Quip, this article will detail how to implement Google's Recaptchav2 in an unobtrusive way into Modx Quip by using the Recaptcha Javascript API and modifying only a single Quip chunk and one snippet setting and no other modifications to Quip.

Background

The solution also includes client side validation using Bootstrap Validator to validate the entire form including the recpatchav2 response. The solution as written has been implemnented on this site and you can preview the functionality below in the comments section.

Included here are the custom chunks, scripts, and styles I used in the process with as much explanation I think necessary for a reasonably experienced ModX developer.

Platform and Versions

As of the writing of this, all the relevant versions are the latest stable versions available:

  • Platform: ModxCloud
  • Version: Revo 2.3.5pl
  • Jquery: 2.0.2
  • Bootstrap: v3.3.5 with all components
  • Bootstrap Validator : latest stable
  • Articles: 1.7.11-pl
  • Quip: 2.3.3-pl

Quip Reply Setting

Wherever you QuipReply snippet settings are located, you need to set your recaptcha setting to "No". This will disable the default recaptcha functionality within Quip.

Templates and Chunks

All of the formatting for the following chunks is using Bootstrap 3.0 css and components to enable a responsive layout. The addtional css required will be shown in the next section. This assumes either you have implemented the Responsive Quip solution or are using the out-of-the box Quip chunks as your base.

  1. addComments chunk

    In your chunk that currently displays your comment form, replace the following lines:

    <div class="quip-fld recaptcha">
        [[+quip.recaptcha_html]]
        <span class="quip-error">[[+error.recaptcha]]</span>
    </div>

    with the lines below:

    <div id="recpatcha-placeholder"></div>
        <span id="recaptcha-error" class="help-block with-errors" style="display: none;">Recaptcha Answer Incorrect. You must <button id="recaptcha-reset" name="" value="1" class="btn btn-danger btn-sm" style="display: inline-block;"><span class="glyphicon glyphicon-refresh"></span> Reload</button></span>
    </div>

Javascript

Assumes you are running JQuery (tested with v2.0.2). Should work fine with any recent version. In order to easily validate on the client side, the solution use Bootstrap Validator for form validation and also to perform the recaptchav2 answer validation as well to eliminate the need for a spearate server side call.

  1. RecaptchaV2 API Script

    Included this script link for the Recaptchv2 API after all other scripts (usually just before the </body> tag:
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
            
  2. Onload Callback Function

    Included the function below wherever you are loading your javascript functions, or load it at the top of your $( document ).ready(function(); function:

    
    var onloadCallback = function() {
    		grecaptcha.render('recpatcha-placeholder', {
    		  'sitekey' : 'your-recpatcha-site-key',
    		});
    };   
                
            
  3. Document Ready Function

    These functions and events must load after the document is rendered:

    $('#quip-add-comment-qcom').validator().on('submit', function (e) {
    	var response = grecaptcha.getResponse();
    	//recpatcha failed vaildation
    	if(response.length == 0) {
    	    e.preventDefault();
    	    $('div.recaptcha').addClass('has-error');
    	    $('#recaptcha-error').show();
        }
        else {
    		$('div.recaptcha').removeClass('has-error').addClass('has-success');
    		$('#recaptcha-error').hide();
        }
      	if (e.isDefaultPrevented()) {
        	return false;
      	} else {
        	return true;
      	}
    });
    
    $('#recaptcha-reset').on('click', function(event){
    	grecaptcha.reset();
    	$('div.recaptcha').removeClass('has-error').addClass('has-success');
    	$('#recaptcha-error').fadeOut(1000);
    });
                

Styling

The styling of the solution assumes you framework is Bootstrap 3. All styles used are included in the base styling of Bootstrap. If you're not using Bootstrap 3, you will need to apply styles to taste.

Checking your results

Below are screenshots of the basic functionality. If everything is working correctly, you should see something similar.

  1. Initial Widget Rendering

    When your comment form initially renders, the recaptchav2 widget should look something like this:

    Recaptch SS 1
  2. Validation Failure

    If the user attempts to post comment without completing the recaptcha, the form will look something like this, adn the post will not go through:

    Recaptch SS 2
  3. Validation Success

    If the completes the recaptcha, the widget will look something like this, and the form will post successfully:

    Recaptch SS 3

Comments (0)




Allowed tags: <b><i><br>