Tutorial: Update reCaptcha

Chris McGrane · June 2016

Hello all,

There have been some concerns that the Google reCaptcha has not been updated to the latest version within the NetCommunity platform. Here is a temporary fix until they (hopefully) improve the system with the next NC release. Please provide any suggestions to improve this implementation.

1428ad7a01a76f3989502172a354c8a8-huge-q3

1.) Disable the built-in captcha.

2.) Create an unformatted part to add the following html / script to the bottom of your form page. Remember to replace PUBLICKEY with your... public key.

<div class="g-recaptcha" id="rcaptcha" data-sitekey="PUBLICKEY"></div>

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

<script>

(function ($) {

if (typeof __doPostBack === 'function') {

var old__doPostBack = __doPostBack;

__doPostBack = function (eventTarget, eventArgument) {

$('form').trigger('beforePostBack');

old__doPostBack(eventTarget, eventArgument);

};

}

$.beforePostBack = function (func) {

$('form').on('beforePostBack', function () {

func();

});

};

})(jQuery);

$(document).ready(function(){

$.beforePostBack(function () {

   var v = grecaptcha.getResponse();

if(v.length === 0){

   console.log('Captcha Error');

return false;

} else {

   console.log('Captcha Validated');

}

});

});

</script>

3.) Now upon a postback of your form, it will check for a response from the captcha. If there is no response, the postback will not occur. I will work on adding a validation message, right now the result is logged to console.

Let me know if this works out for you!

Chris

Brandon Stein 2 · June 2016

Thanks for posting this, Chris!

Cas Nolan · December 2016

This is awesome, thank you for sharing. I can get it working, but it sits at the very bottom of my donation form. How can I ensure it is placed before the submit button?

With thanks,

Cas

Chris McGrane · December 2016

Hello Cas,

Since you wont be able to edit the html content directly for the part, you can move the location of the element with JS (or jQuery in this instance).

Locate the submit button in the source and find a unique way to target it, you will need to use the "before" function to place content...before it. Since NetCommunity does not follow standard class conventions, you should use a wilcard selector to target the button.

In example: $('input[id*="partial match"]').before('content');

If you're not familiar with JS or jQuery and need help, send me a message and I can help you out real quick.

Email: mail@chrismcgrane.com

or PM me

- Chris

Chris McGrane · December 2016

Hello all - I've got a bunch of PMs / emails from people saying this method is only partially working. This is because the postback is not prevented by the time the form submission is validated. Here is an updated script that should work a little better. The only part that should be fixed is adding in the validation message for a submission without completing the captcha. the conditional is in there, you will just have to decide how to implement the error message. As always, please feel free to contact me directly if you need help (for free of course).

<div class="g-recaptcha" id="rcaptcha" data-sitekey="YOUR PUBLICKEY"></div>

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

$(document).ready(function(){

   $('.DonationSubmitButton').hide();

   $('body').append('<button id="submitDonation" type="button">Submit</button>');

   $('body').on('click','#submitDonation',function(e){

var v = grecaptcha.getResponse();

if(v.length === 0){

console.log('Captcha Error');

   // Validation message triggered here
return false;

} else {

console.log(v);

__doPostBack('ID OF SUBMIT BUTTON','');

   // Example ID: PC2497$btnNext
}

   });

});

</script>

- Chris McGrane

Tutorial: Update reCaptcha

Comments

Categories