Recaptcha for Seaside 5-Jan-09
Posted by laza in Smalltalk.Tags: API, JavaScript, reCAPTCHA, seaside, Smalltalk, Squeak, VisualWorks
trackback
A captcha is mechanism to prevent scripts and bots to spread spam, create fake votes or accounts. For this a captcha presents some kind of distorted text, which should be easy to read and reenter for any human, but should be hard to be deciphered by common OCR-Software. An implementation of such a method is reCAPTCHA from the Carnegie Mellon University. It uses images of text out of scanned books, which an OCR program failed to read. So in addition to stop spam, every solved reCAPTCHA challenge helps also to proof read the text out of scanned books. This captcha also can offer a sound stream of spoken digits for visually impaired users. You can read about the details here at the homepage of the reCAPTCHA project.

If you want to use reCAPTCHA in your project you could try a Seaside 2.9 component I did. You can find the package BowWave-Recaptcha in a SqueakSource repository called (surprise) BowWave. After you loaded the latest version in a Seaside 2.9 image (I didn’t check with Pharo though. Or VisualWorks. Or GemStone. Or GNU Smalltalk), you can use it as a Seaside component inside a form. But at first you will only see the following instead of the reCAPTCHA Box:
Missing configuration for recaptcha component
You have to add a reCAPTCHA configuration to your root component.

Add a reCAPTCHA configuration to the root component
Now you will see two more configuration options under the group Recaptcha.

required reCAPTCHA configuration
To get your own private and public key, you have to get an account at reCAPTCHA. There you have to add a domain you want the reCAPTCHA to be used for.

Keys from reCAPTCHA website
Now the reCAPTCHA Box should appear in your form as a component. Now you should ask if the captcha was answered correctly in some callback on submission of your form.
So let’s assume you created a callback with a submit button in your renderContentOn: method. (There is only one child, the captcha component in that instance variable)-
renderContentOn: html
html form: [
"... some other form elements ..."
html render: captcha.
html submitButton
callback: [ self submitComment ];
value: 'Submit Comment']
submitComment
(self checkInput and: [captcha verify])
ifTrue: ["Everything is fine"]
VoilĂ ! That’s it.
On my Seaside demoserver is a rudimentary comment/reply component, which uses reCAPTCHA.
This is the first shot at it, so handle it with care and … ah … well … leave a comment.
Update: I moved some stuff around so that you now need to load the BowWave-Captcha-Core and the BowWave-Captcha-Recaptcha packages
I saw you are now following my site (Caligraffiti) on Twitter. I have some family members down there in Cologne. I really love how internet conects everybody.
The people of cologne believe to be the brasilians of germany. So it figures why your people are here!