S5 Register Module and Captcha's

This forum is for general questions about extensions for Joomla! version 1.5.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
User avatar
Damadar
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Nov 21, 2010 1:52 am
Contact:

S5 Register Module and Captcha's

Post by Damadar » Sun Nov 21, 2010 2:08 am

Hi.

I've been using Joomla for some time; I just never really post anything. I ran into some spam issues recently and wanted to share my experience with cutting it down.

What I'm talking about here has to do with the S5 Register Module and the Joo-ReCaptcha Module. I am posting this here in an attempt to help others keep spam down while using jQuery. :)

One of the biggest issues any website could face is Spam. Spam users being registered, Spam comments, and just spam in general.

One of the ways we've managed to combat this is through Captcha's, however some captcha's are harder than others to integrate. For example, trying to integrate ReCaptcha into the Register Module is a nightmare.

The Register Module uses the S5_Box Module - This module uses the jquery library which is pretty difficult to use with recaptchalib.php.

Using recaptchalib.php, a form like this:

Code: Select all

<form method="post" action="verify.php">
        <?php
          require_once('recaptchalib.php');
          $publickey = "your_public_key"; // you got this from the signup page
          echo recaptcha_get_html($publickey);
        ?>
        <input type="submit" />
Calling to something like this:

Code: Select all

 <?php
  require_once('recaptchalib.php');
  $privatekey = "your_private_key";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
    // What happens when the CAPTCHA was entered incorrectly
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
<?php echo JRoute::_( 'index.php?option=com_user' ); ?>
  }
  ?>
Should work just fine. However, combine this with jQuery, and all you get is a blank, non-loading white page. (This won't stop spammers, though; they don't get the white page, and they can still inject their code.)

So I went looking for a better way to integrate this into the current setup that I have. I installed the Joo-Recaptcha Module. Then I modified the default.php of the s5_Register module to look like this:

Code: Select all

<form class="form-validate" name="josForm" id="josForm" method="post" action="/index.php?option=com_user">

<div style="float:left;width:108px;line-height:31px;">
	<label for="name" id="namemsg">
			Name:
	</label>
</div>		
<div style="float:left;">
	<input type="text" maxlength="50" class="inputbox required" value="" size="40" id="name" name="name"/> *
</div>
<div style="clear:both;"></div>

<div style="float:left;width:108px;line-height:31px;">
		<label for="username" id="usernamemsg">
			Username:
		</label>
</div>
<div style="float:left;">
		<input type="text" maxlength="25" class="inputbox required validate-username" value="" size="40" name="username" id="username"/> *
</div>
<div style="clear:both;"></div>


<div style="float:left;width:108px;line-height:31px;">
		<label for="email" id="emailmsg">
			E-mail:
		</label>
</div>
<div style="float:left;">
		<input type="text" maxlength="100" class="inputbox required validate-email" value="" size="40" name="email" id="email"/> *
</div>
<div style="clear:both;"></div>


<div style="float:left;width:108px;line-height:31px;">
		<label for="password" id="pwmsg">
			Password:
		</label>
</div>
<div style="float:left;">
  		<input type="password" value="" size="40" name="password" id="password" class="inputbox required validate-password"/> *
</div>
<div style="clear:both;"></div>


<div style="float:left;width:108px;line-height:31px;">
		<label for="password2" id="pw2msg">
			Verify Password:
		</label>
</div>
<div style="float:left;">
		<input type="password" value="" size="40" name="password2" id="password2" class="inputbox required validate-passverify"/> *
</div>

<div style="clear:both;"></div>
<br />
	Fields marked with an asterisk (*) are required.
    <br />
                        <div id='recaptcha_ajax_instance_1'></div>
                        <script type='text/javascript' src='http://api.recaptcha.net/js/recaptcha_ajax.js'></script>

                        <script type='text/javascript'>
                        (function(){
                                function loadRecaptcha(){ 
                                        Recaptcha.create('Recaptcha Public Key','recaptcha_ajax_instance_1', {theme: 'blackglass'});
                                }
                                if( window.addEvent ){
                                        window.addEvent('domready', loadRecaptcha);
                                }
                                else{
                                        if( window.addEventListener ){ window.addEventListener('load', loadRecaptcha); }
                                        else if( window.attachEvent ){ window.attachEvent('onload', loadRecaptcha); }
                                        else{ old = window.onload; window.onload = function(){ if( old && typeof old == 'function'){ old(); } loadRecaptcha(); }; }
                                }
                        })();
                        </script>

<br/><br/>
	<button type="submit" class="button validate">Register</button>
	<input type="hidden" value="register_save" name="task"/>
	<input type="hidden" value="0" name="id"/>
	<input type="hidden" value="0" name="gid"/>
	<?php echo JHTML::_( 'form.token' ); ?>
</form>
The important part is this right here:

Code: Select all

<div id='recaptcha_ajax_instance_1'></div>
                        <script type='text/javascript' src='http://api.recaptcha.net/js/recaptcha_ajax.js'></script>

                        <script type='text/javascript'>
                        (function(){
                                function loadRecaptcha(){ 
                                        Recaptcha.create('Recaptcha Public Key','recaptcha_ajax_instance_1', {theme: 'blackglass'});
                                }
                                if( window.addEvent ){
                                        window.addEvent('domready', loadRecaptcha);
                                }
                                else{
                                        if( window.addEventListener ){ window.addEventListener('load', loadRecaptcha); }
                                        else if( window.attachEvent ){ window.attachEvent('onload', loadRecaptcha); }
                                        else{ old = window.onload; window.onload = function(){ if( old && typeof old == 'function'){ old(); } loadRecaptcha(); }; }
                                }
                        })();
                        </script>
This enabled the login form to call out to the ReCaptcha Module using Ajax instead of pure Javascript, which allowed it to work wonderfully with jquery!

The option for 'blackglass' can be changed to 'red' 'white' or 'clean' if you don't like the look of the black glass. (It fits with the theme on the site that I'm working on it with.)

So, for those of you who love using the Register Module in the S5_Box module like myself, but who also need to protect yourselves from spammers, this is the way to do it!
Please read forum rules regarding signatures: http://forum.joomla.org/viewtopic.php?t=65

Locked

Return to “Extensions for Joomla! 1.5”