How to add google recaptcha to a Joomla 3 login page?
Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

The solution I am about to share with you in this article comes from many diving-deep into the google search looking for how to add google recaptcha to a Joomla 3 login page. I must admit i have found a youtube video in Hindi but it did not help me much because the presenter only showed me how to show the recaptcha on the login page but not how to make that captcha work. Maybe it was there but i did not understand it.

After watching this video you will be able to do the following:

  1. Locate the plugin that takes care of managing the recaptcha functionality in Joomla 3
  2. Show the recaptcha on the login page
  3. Make that recaptcha work
  4. Increase your joomla security by protecting your login form from bots as promised by google recaptcha.

To understand this video tutorial, I recommend that you have a Joomla 3 installation with admin access, not using the gantry 5 framework because this is not the scope of this video.

I also suggest that you have your recaptcha keys created for your specific domain at this link. Make sure you take note of these keys so that you can insert them in the plugin before you activate it.

You will also need to know how to modify a php/html page (best if you are a joomla web developer) as we will need to insert the following codes:

 

Php Code to insert in the com_user/default.login.php override file as mentioned in the video:

 <div class="control-group">

        <div class="controls">

<?php

$newrecaptcha = false;

JPluginHelper::importPlugin('captcha');

$dispatcher = JDispatcher::getInstance();

$dispatcher->trigger('onInit', array('dynamic_recaptcha_1'));

$res = $dispatcher->trigger('onDisplay', array(null, 'dynamic_recaptcha_1', 'class="required"'));

echo isset($res[0]) ? $res[0] : '';

?>

</div>

</div>

Javascript code you need to insert in the index.php file of the template you are using:

jQuery(document).ready(function() {

jQuery('#dynamic_recaptcha_1').attr('data-callback', 'recaptchaValidated');

jQuery('form[name="ulogin"]').on('submit', function() {

if (!HAS_CAPTCHA) {

alert('Please check the Captacha');

}else {

recaptchaValidated();

return;

}

return HAS_CAPTCHA;

});

});

var HAS_CAPTCHA = false;

function recaptchaValidated() {

HAS_CAPTCHA = true;

}

Here is the video itself, enjoy!

 

Have you tried to implement this, did it work? Any specific need ? Just contact us here. Want to know hot build Joomla 3 Website, see here.

Have you achieved this using another way?, please share it with us in the comments section or propose ways we can improve this.

Partagez cette information: