How to add reCAPTCHA to Jot

From MODx Wiki
Jump to: navigation, search


Contents

What is reCAPTCHA?

reCAPTCHA is a CAPTCHA web service which offers many features such as audio captchas and an unlimited set of secret codes. In addition to this, it's true purpose is to provide "crowd-sourcing" labor to "digitize books, newspapers and old time radio shows."[1]

You can find out more about ReCaptcha here: http://recaptcha.net/

What is Jot?

"Jot is a snippet for MODx and gives your site users the opportunity to enter feedback on your articles. Add comments to articles, create guestbooks, you can even use multiple instances on the same page. Jot is the reincarnation of the former Replix snippet."[2]

Basically it gives you blog type functionality.

Find out more on the Jot wiki page.


How do I add ReCaptcha to Jot?

Here's where we get to have some ModX fun ;-p

It's really not hard but there are a few steps you have to take.

  1. Get your reCAPTCHA account info
  2. Create a Snippet called reCAPTCHA
  3. Modify the jot template file chunk.form.inc.html
  4. Modify the Jot class file: jot.class.inc.php


Get your reCAPTCHA account info

Go here: http://recaptcha.net/api/getkey

Sign up for an account and then request a public/private key pair with either a single domain access or global access (single domain is suggested for security purposes). You will be adding the private and public keys you receive after submitting the form on recaptcha.net to both the Snippet and the Jot class file.[3]

You will need to download this file: http://code.google.com/p/recaptcha/downloads/list?q=label:phplib-Latest and upload the php file recaptchalib.php to your web server.

Create a Snippet called reCAPTCHA

Add the following code to this Snippet and make sure you put your public key in place of the "......".

  1. require_once('assets/snippets/reCAPTCHA/recaptchalib.php'); //this is the file you downloaded and uploaded to your web server somewhere (I put it in the ModX snippets directory).
  2.  
  3. // Get a key from http://recaptcha.net/api/getkey
  4. $publickey = "......"; //you get this from the sign up page
  5.  
  6. echo recaptcha_get_html($publickey, $error);

Modify the Jot template file chunk.form.inc.html

So we're using the snippet parameter &captcha=`3` to indicate that we want to use reCAPTCHA in our Jot snippet comments form. Jot normally only goes up to 2, where 0 = no captcha, 1 = captcha for everyone, and 2 = captcha only if you're not logged in. So we'll use 3 as an example... you could use a different parameter just as easily but I'm going to stick with 'captcha' for this tutorial at least.

Our Jot template file should be here: ModX_Install_Directory/assets/snippets/jot/templates/chunk.form.inc.html

Okay, here is the code for the form template. This can be added anywhere in your template but I've added it to line 74 in my version so it simply takes the place of the Veriword Captcha (which ends on line 73 in my file.

BTW notice our newly created snippet? This is where it is used.

  1. [+jot.captcha:is=`3`:then=`
  2. [[ReCaptcha]]
  3. `:strip+]


Modify the Jot class file: jot.class.inc.php

Now to add in the reCAPTCHA validation so it will check the security answer provided and give us either a positive response or an error. We'll be updating this file: ModX_Install_Directory/assets/snippets/jot/jot.class.inc.php

FIrst you'll need to update line 540 which checks to see if a captcha is being requested (by your snippet parameters) and then checks the VeriWord Captcha if it's being used...

We're not going to use Veriword since we're using reCAPTCHA so change this:

  1. if ($saveComment && !(($this->config["captcha"] == 0 || isset($_POST['vericode']) && isset($_SESSION['veriword']) && $_SESSION['veriword'] == $_POST['vericode']))) {

to this:

  1. if ($saveComment && !(($this->config["captcha"] == 0 || $this->config["captcha"] == 3 || isset($_POST['vericode']) && isset($_SESSION['veriword']) && $_SESSION['veriword'] == $_POST['vericode']))) {


Finally let's add in the actual validation routine. Put this after the Veriword/Captcha validation code block (somewhere near line 548 or so... and again, don't forget to replace the Private Key variable "....." with your own key that you got from reCAPTCHA's website.


  1. //-- Captcha/ReCaptcha
  2. if ($saveComment && $this->config["captcha"] == 3){
  3. //require_once('/FirePHPCore/FirePHP.class.php');
  4. require_once('assets/snippets/reCaptcha/recaptchalib.php');
  5.  
  6. // Get a key from http://recaptcha.net/api/getkey
  7. $privatekey = "......."; //you get this from the sign up page
  8.  
  9. // the response from reCAPTCHA
  10. $resp = null;
  11. // the error code from reCAPTCHA, if any
  12. $error = null;
  13.  
  14. // was there a reCAPTCHA response?
  15. if (isset($_POST['recaptcha_response_field'])) {
  16.  
  17. $resp = recaptcha_check_answer ($privatekey,
  18. $_SERVER["REMOTE_ADDR"],
  19. $_POST['recaptcha_challenge_field'],
  20. $_POST['recaptcha_response_field']);
  21. if ($resp->is_valid) {
  22. //return true;
  23. } else {
  24. // set the error code so that we can display it
  25. $this->form['error'] = 2; // Veriword / Captcha / reCAPTCHA incorrect
  26. unset($pObj);
  27. return;
  28. }
  29. }else{
  30.  
  31. $this->form['error'] = 2; // Veriword / Captcha incorrect
  32. unset($pObj);
  33. return;
  34. }
  35.  
  36. }//end recaptcha


How do I use this in a Template or Page?

Here is an example snippet call in a Template:


  1. [!Jot? &captcha=`3` &pagination=`10`!]


Conclusion

You should now be able to see, submit and enjoy your new reCAPTCHA bot trap... enjoy spam free comments on your blog or news pages... just don't complain to me when your post counts start to drop like rocks, just means you need more controversial content ;-p

Personal tools