It's Lenny's Fault

Intro / Background
As anyone who knows me knows I have an OVERWHELMING hatred toward CAPTCHA and am on an on going quest to come up with the best alternative. In my opinion, any worth-while alternative HAS to work atleast as well as captcha AND being easier for the user. Infact I feel it should be almost effort-less.

What I came up with (this time) is a system that presents a random Flickr image to a user and asks them to identify the image. I'm going to implement this in PHP and probably create a wordpress, drupal, and elgg plugin. However for now I'm going to create it using JavaScript / jQuery / JSON. This will allow me to create a quick functional prototype that should show if this is a practical method of stopping spam. In addition, I just want to explore the use of Flickr API in jQuery as I think it could have alot of pretty cool uses.

Disclaimer / flame protection
Yes I realize that since this is created in client side JavaScript it would be VERY easily bypassed by pretty much any spam bot. Again this is just a way to test how the user experience of this form of Captcha alternative would work and as an excuse to play with jQuery / flickr api.

Getting to it
Flickr has a very robust and extremely easy to understand API. They also provide easy to understand and very thorough documentation and a very useful tool for generating and testing REST api commands.

Flickr's REST API is very simple if you wanted to get a list of pictures tagged with the word "cat" you could simply call up the following URL.

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=PUT_YOUR_API_KEY_HERE&tags=cat&safe_search=1&content_type=1

This would return the photo IDs of 100 entries with the term cat as a tag. By default the results will come back as XML. However for the purpose of this project we're going to be using JSON. Luckily making flickr api return JSON is also very easy simply add the following to the end of the URL:

&format=json&jsoncallback=?

For an initial test of the flickr api in jquery I will simply get a list of pictures with a specific tag in the following example I display 100 pictures with the tag "cat". Here's the code you can click the preview link below to see it in action.

var apiKey="PUT_YOUR_API_KEY_HERE";
var jsonURL="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+apiKey+"&tags=cat&safe_search=1&content_type=1&format=json&jsoncallback=?";
//send JSON request to flicr
$.getJSON(jsonURL,function(data){
  //loop through the photo ids from flickr
  $.each(data.photos.photo, function(i,photo){
    var jsonURL="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key="+apiKey+"&photo_id="+photo.id+"&format=json&jsoncallback=?"
    //get the actual image URL from the id and append it to the document
    $.getJSON(jsonURL,function(pdata){
      $("body").append('<img src="'+pdata.sizes.size[0].source+'" border="0" alt="" /> ');
    });
  });
});

Preview the above code in action

making jFlickTCHA (Captcha alternative demo)
First we need to create an array of tags. Then we choose one at random then choose a random picture with that tag. Then we allow the user to type in what they think it is. Then we query back to flickr to see if that image actually contains that tag. Yes we could just remember the tag, but I tried to make this as secure as possible for being javascript based so we look it back up. Below is a link to the functional sample (including source code). In this example I used the tags cat, dog, lion, snake, bear, and monkey.

Click here to see it in action and view the code.

Conclusions
I think this proves that this is a very viable option as a CAPTCHA alternative despite the fact that you get images that are unrelated sometimes. I think this is perfectly fine as you can always click "I don't know" and get a new image pretty quickly. Which I still think is better than Captcha because with Captcha you might THINK you typed it right even though you didn't. With this you can click "I don't know" until it's an image you know you can get correct. The only major downfall is the accessibility issue, but I feel this could be easily overcome with audible direction "type the word cat" which is probably better than Captcha accessibility since the words will be common short words. So I guess stay tuned for my PHP based "FlickTCHA" system coming soon.