Block Requests

reCaptcha Integration

Permalink 6 users found helpful December 10, 2010 at 9:24 PM

I'm finding that the current captcha included with Concrete5 isn't very appealing to my users and clients.

Could someone create a way to have an option to use reCaptcha?

ReCaptcha is a free anti-spam application provided by Google. It is much more user-friendly. Learn more at:http://www.google.com/recaptcha...

There could be a way to change the default captcha in the dashboard on the sitewide settings page.
This add-on should be free, as well.

Is someone working on this already, or if not, WILL YOU?

warpol replied on Dec 10, 2010 at 9:37 pm Permalink Reply

I completely agree with you, the default captcha always looks a bit rough on a nicely designed site. Integration looks to be pretty straight-forward with reCAPTCHA. I'll look into it.

TheRealSean replied on Jan 10, 2011 at 8:17 am Permalink Reply 1 Attachment

I have added it to my form, but I am using the edited version of form from the forum,

You will of course need a license key
https://www.google.com/recaptcha/admin/create...

In the View.php around lines 35

within

<?php
if($surveyBlockInfo['displayCaptcha']) {
   echo(t('<p class="captcha"><label for="ccmCaptchaCode">Please type the letters and numbers shown in the image</label>'));
   echo '<span class="answer">';
   $captcha = Loader::helper('validation/captcha');
   $captcha->display();
   $captcha->showInput();
   echo '</span></p>';   
}?>

Replace That with

<?php
if($surveyBlockInfo['displayCaptcha']) {
     $recaptcha = Loader::helper('recaptcha');
          $publickey = "your_public_key"; // you got this from the signup page
          echo $recaptcha->recaptcha_get_html($publickey);
}?>

I have just wrapped the reCaptchalib.php in a class and uploaded to the /root/helpers/validation folder

I have attached it to the post

Within the controller script, around lines 219

// check captcha if activated
      if ($this->displayCaptcha) {
         $captcha = Loader::helper('validation/captcha');
         if (!$captcha->check()) {
            $errors['captcha'] = t("Incorrect captcha code");
            $_REQUEST['ccmCaptchaCode']='';
         }      
      }

Replace With this

// check captcha if activated
      if ($this->displayCaptcha) {         
           $recaptcha = Loader::helper('recaptcha');
           $privatekey = "your_private_key";
           $resp = $recaptcha->recaptcha_check_answer ($privatekey,
                                 $_SERVER["REMOTE_ADDR"],
                                 $_REQUEST["recaptcha_challenge_field"],
                                 $_REQUEST["recaptcha_response_field"]);
           if (!$resp->is_valid) {
            // What happens when the CAPTCHA was entered incorrectly
            $errors['captcha'] = t("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
                "(reCAPTCHA said: " . $resp->error . ")");
           } else {
            // Your code here to handle a successful verification
//Don't need to do anything here but left in as default google code

Viewing 15 lines of 17 lines. View entire code block.

 
// check captcha if activated
      if ($this->displayCaptcha) {         
           $recaptcha = Loader::helper('recaptcha');
           $privatekey = "your_private_key";
           $resp = $recaptcha->recaptcha_check_answer ($privatekey,
                                 $_SERVER["REMOTE_ADDR"],
                                 $_REQUEST["recaptcha_challenge_field"],
                                 $_REQUEST["recaptcha_response_field"]);
 
           if (!$resp->is_valid) {
            // What happens when the CAPTCHA was entered incorrectly
            $errors['captcha'] = t("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
                "(reCAPTCHA said: " . $resp->error . ")");
           } else {
            // Your code here to handle a successful verification
//Don't need to do anything here but left in as default google code
           }   
 
      }

Of course Back up your files, first I don't want to be responsible for breaking sites.

I don't think I have missed anything but if you can see anything I have missed, let me know.

I should have put the reCaptcha within the validation folder but the uploaded, file has a class of RecaptchaHelper, this needs to be ValidationRecaptchaHelper if you want to add it to the logical location, then the helper call would be $recaptcha = Loader::helper('validation/recaptcha');

Just noticed it does not apply to the preview if you follow this method, but the reCaptcha is added

michaelfillier replied on Feb 10, 2011 at 11:19 pm Permalink Reply

I would like to try this out, where can I get the "edited version of form from the forum"?

TheRealSean replied on May 3, 2011 at 12:22 pm Permalink Reply

Sorry for the long delay,
I used the community form from here,

but Phallanx has posted a better solution to this below, so modifying any of the code is not really needed.

clintre replied on Feb 24, 2011 at 11:28 am Permalink Reply 1 Attachment

**************NOTE*************************************************
This is now taken care of in the latest versions of Extended Form.
I will leave this for people who want it or do not update EF.
*******************************************************************

For those using Extended Form, it is a bit different. So I will post it here as well. I did upload the recaptcha with the changes that seanom made after his original post as well.

I dug in to Extended Form and had to look around to find where the changes need to be made relative to the directions in the post you linked to. It is definitely different.

So as to make it easier for others wanting to do this here you go...

First make sure you get a reCaptcha Key...
http://www.google.com/recaptcha/admin/create...

Next take the attached recaptcha.php and upload it to /helpers/validation (not the one under the concrete folder).

Before the next part, please make sure to backup the original files before making changes. I have made the changes that original poster made after he had posted this.

All changes are within packages/extended_form

Line 249 on models/survey.php

Find

if($surveyBlockInfo['displayCaptcha']) {                 
    echo '<div class="formBlockSurveyCell question">'.stripslashes($surveyBlockInfo['titleCaptcha']).':&nbsp;<span class="required">*</span></div>'."\n";
    echo '<div class="formBlockSurveyCell answer">';
    $captcha = Loader::helper('validation/captcha');    
    $captcha->display();              
    $captcha->showInput();
    echo stripslashes($surveyBlockInfo['commentCaptcha']);
    echo '</div>'."\n";  
    echo '<br class="clearfloat" />'."\n\r";              
}

Replace with

if($surveyBlockInfo['displayCaptcha']) {
    $recaptcha = Loader::helper('validation/recaptcha');
    $publickey = "your_public_key"; // you got this from the signup page
    echo $recaptcha->recaptcha_get_html($publickey);
}

Then line 325 on blocks/extended_form/controller.php

Find

// check captcha if activated
if ($this->displayCaptcha) {
   $captcha = Loader::helper('validation/captcha');
   if (!$captcha->check()) {
      $errors['captcha'] = t("Incorrect captcha code");
      $_REQUEST['ccmCaptchaCode']='';
   }
}

Replace with

// check captcha if activated
if ($this->displayCaptcha) {         
    $recaptcha = Loader::helper('recaptcha');
    $privatekey = "your_private_key";
    $resp = $recaptcha->recaptcha_check_answer ($privatekey,
        $_SERVER["REMOTE_ADDR"],
        $_REQUEST["recaptcha_challenge_field"],
        $_REQUEST["recaptcha_response_field"]);
    if (!$resp->is_valid) {
        // What happens when the CAPTCHA was entered incorrectly
        $errors['captcha'] = t("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")");
    } else {
        // Your code here to handle a successful verification
        //Don't need to do anything here but left in as default google code

Viewing 15 lines of 17 lines. View entire code block.

 
// check captcha if activated
if ($this->displayCaptcha) {         
    $recaptcha = Loader::helper('recaptcha');
    $privatekey = "your_private_key";
    $resp = $recaptcha->recaptcha_check_answer ($privatekey,
        $_SERVER["REMOTE_ADDR"],
        $_REQUEST["recaptcha_challenge_field"],
        $_REQUEST["recaptcha_response_field"]);
 
    if (!$resp->is_valid) {
        // What happens when the CAPTCHA was entered incorrectly
        $errors['captcha'] = t("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")");
    } else {
        // Your code here to handle a successful verification
        //Don't need to do anything here but left in as default google code
    }   
 
}

Doki replied on Apr 6, 2011 at 2:43 pm Permalink Reply

All,

Has anyone thought about putting this code up on the marketplace?

I have integrated the reCAPTCHA stuff into the default form with a few tiny modifications of my own (aka "packagized" it to include the recaptcha.php in the installation code, moved keys from internal code to a seperate config file, etc). Thought these small mods would be useful in case someone was thinking about it...

Doki

senshidigital replied on Apr 28, 2011 at 9:51 am Permalink Reply

Would this work on the guestbook? My client gets a shed load of spam though that. Is the code to change the same?

Phallanx replied on Apr 28, 2011 at 2:42 pm Permalink Reply

Hmmm.

It shouldn't be this hard. And it certainly shouldn't require modifying controllers, views etc.

Perhaps we should be looking at extending and overriding "ValidationCaptchaHelper" instead. Then (I think) it would be a site-wide enhancement.

Phallanx replied on Apr 28, 2011 at 5:57 pm Permalink Best Answer Reply 1 Attachment

OK. Got it working. Not tested much, but seems fine with the guestbook so should be on the right path for other stuff. I won't have a lot of time in the next few weeks, so you'll be pretty much on your own. But it's very simple.

Place the captcha.php AND recaptchalib.php attached to this post in the root "helpers/validation/" directory (you will probably have to create the directory). Then rename captcha.php in "/concrete/helpers/validation/" to something like "_captcha.php". Recaptcha should then replace any occurancies of the old captcha.

For your public and private keys I have arranged it so that you can put defines in the "site.php". Read the top of the captcha.php file for examples. Alternatively you can hard-code them in the captcha.php itself-but I would recommend the former.

senshidigital replied on Apr 30, 2011 at 5:13 pm Permalink Reply

This seems to work a treat! No problems so far. Fingers crossed.

Cheers

Chris

Phallanx replied on Apr 30, 2011 at 5:53 pm Permalink Reply

@dojodesign
Yup. It's pretty simple, so not much to go wrong really. Another testament to the CC5 teams elegant design.

It wouldn't take much for the core to be modified so that "captcha modules" could be selected like packages (or install them and choose from a drop-down).

senshidigital replied on Apr 30, 2011 at 6:13 pm Permalink Reply

Only thing I noticed is in Chrome and Safari the captcha adds a empty iframe which can break the layout. You can find info on it here:

http://silverstripe.org/form-questions/show/12821...

and here:

http://groups.google.com/group/recaptcha/browse_thread/thread/e550b...

It will probably depend on the design but it happened to me. Had to set the iframe to 'display: inherit;'.

Apart from that, excellent work! Thanks.

Phallanx replied on Apr 30, 2011 at 7:31 pm Permalink Reply

@dojodesign

I'm using Google Chrome and it's fine on my sites and a few others that I've found recaptcha on. When I inspect the javascipt, they all have the empty iframe - but no broken layout. The worst I have had to do is remove a few <br /> tags so the post button isn't 3 miles away from the captcha...lol. Are you using a custom recaptcha theme perhaps? (I'm using the default)

But its a (known?) recaptcha issue and well done for posting a workaround if/when people come across it.

I guess it remains to be seen how rare/prevalent it is since not all sites are affected by it.

senshidigital replied on May 1, 2011 at 2:40 am Permalink Reply

@Phallanx

Yeah its a known issue. It probably all depends on the design of the site and container and css it sits within. I have custom styled the guestbook fields etc so might be that.

Normally you would set iframe to 'display: none;' but this affected the facebook like button for example so the 'inherit' seemed to work better.

Again, thanks for this. I will now try on my clients site and see if it reduces the spam.

Once again, this community rocks! ;-D

TheRealSean replied on May 3, 2011 at 12:15 pm Permalink Reply

I also wished that Google would allow the use of more then one reCaptcha on a page I have a client who wants two forms on the page and have had to go back to the C5 captcha just to get to forms to work.

But thanks for the tips Ill be looking at that for the next site

Phallanx replied on May 3, 2011 at 1:59 pm Permalink Reply

@seanom
Well. You can only have 1 submit at a time regardless of the number of forms on a page; so it makes sense to me.

If you have to have multiple forms on pages. Then you just pop-up the captcha (or go to a captcha page) to proceed when the user presses one (any one) of the submits. I personally think using a pop-up looks a lot better and is less confusing than having 10 captchas on a page. But clients will be clients eh?

TheRealSean replied on May 4, 2011 at 6:34 am Permalink Reply

I agree :)

I did attempt to put the recaptcha into a pop up but my skills somewhat lack when I start dealing with pop ups especially c5's.

I just wished google used class names rather then ID to refer to those it creates or allowed you to change them via the API so that I could use more then one on a page.

Maybe I should just sit down and try to work out how to get it appear in a pop-up/new window.

12345j replied on May 4, 2011 at 7:01 am Permalink Reply

well if you use an id you can set the first part of it to be the block id- that way you can have as many as you want per page. (look at guestbook to see how the core team does it)

TheRealSean replied on May 4, 2011 at 9:12 am Permalink Reply

Unfortunately when using reCaptcha you are limited to Googles ID its embedded in the API

I could in theory use some javascript to replace them but that would get quite messy

Phallanx replied on May 4, 2011 at 9:39 am Permalink Reply

@seanom
There is an excellent tutorial here:
http://www.concrete5.org/documentation/how-tos/developers/javascrip...

Pick one :)

zoinks replied on Sep 30, 2011 at 10:24 am Permalink Reply

First MISER, now this. You are one awesome contributor. Thanks!

Phallanx replied on Sep 30, 2011 at 10:51 am Permalink Reply

Thanks.
I think someone has already integrated this into a block in the market.
Shame the Miser admin package can't go in the market, eh?

12345j replied on Sep 30, 2011 at 12:20 pm Permalink Reply

the guestbook version of recaptcha is available in an addon called advanced
comments that I made.
-jack

cavidano1 replied on Sep 18, 2011 at 7:50 am Permalink Reply

This is now a part of the extended_form.

fastcrash replied on Dec 31, 2011 at 5:41 pm Permalink Reply

Sugoiiii....! i found another precious diamond.
phallanx, you got "expert III" medal from me dude

i search about "pop up private messages" and end-up here.
just like in youtube a lot people say "why i'm here?", lol

that recaptcha is common nowdays, there is even option for handicap, let me try add it, to ajax form
tehee..heh, honestly i dont like external link, it's always make loading more heavy, just like ym

maybe my bandwidth is sux ;)

Forums

Block Requests

reCaptcha Integration

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?