Fork me on GitHub
Ignitersworld Lab

patternCaptcha

Android like pattern matching captcha system for your node webapps.

Pattern Captcha

Taking captcha to a new level, presenting a pattern matching captcha system for your node web apps. It could be more user friendly having android style pattern system to match the pattern image generated by server. Image is with random pattern of random matrix shape and does not contain any text plus it is distorted, so it's hard for bots to find pattern sequence.

Example

Match the pattern in right side.

Using Pattern captcha

Pattern Captcha is backed with node-canvas plus for frontend to validate draw pattern you require patternLock.

Installation
        	npm install patterncaptcha
        
If you face any problem on npm with installation of canvas please check node canvas wiki.

Two public configuration are available for pattern captcha which can be applied globally or per request basis.

  1. matrix: This set the matrix of pattern captcha ,eg ([3,4] to have 3 cross 4 captcha ). Default is to false which takes random matrix. Keep it false if you want random matrix pattern.
  2. images: Images which will be kept as background on pattern. You can provide a single image source or array of source of images. If you provide array of images, one image will be choosed randomly is time you initiate a new pattern. Make sure to provide full path of image. Relative path may fail.

Require pattern captcha
var captcha = require('patterncaptcha');
You can configure captcha globally using globalSettings object.
Ex :
captcha. globalSettings.images = ["Array of image paths"];

You get two important methods on your captcha object, one is to create new pattern (new) and one is to validate pattern (checkPattern).

  1. captcha.new([options],callback)
    Options parameter is optional and required if you need to configure a patternCaptcha for current instance.
    Callback is required in which you get an object as first parameter containing generated pattern’s base64 data for image, patternId and matrix. Note all this three will be required. imageData to create pattern image, matrix to create a pattern capturing UI of same matrix as image, patternId to validate captcha.
    Note that patternId is not the pattern sequence, while its just Id so pattern captured by user can be validated using that id.
    Ex:
    var newCaptcha = captcha.new({matrix:[3,3]} , function(data){
    	console.log(JSON.stringify(data));
    	//send it to user
    	res.json(data);
    });
    
  2. captcha.checkPattern(patternId,pattern) Both parameter are required.
    returns false ,true .
    Its checks the pattern sequence captured by used against pattern sequence in captcha using patternId. Reference of patternId is deleted after once it is checked weather it returns true or false. So for a patternId any one can not check for more than one pattern sequence.
    Ex
    var validated = captcha.checkPattern("a33c2428aee32492c9168e882b590f6a","45961");

Example's code

Server
Using express.js in server side.
var captcha=require('patternCaptcha');

var app = express();

/*create a api to get pattern*/
app.get('/api/getPattern',function(req,res){
		captcha.new(function(err,data){
				if(err)  consloe.log(err);
				res.json(data);
			});
});

app.get('/api/checkPattern',function(req,res){
		var params=req.query,
			pattId=params.patternId,
			pattern=params.pattern,
			patternCorrect=captcha.checkPattern(pattId,pattern),
			msg=patternCorrect? "Hurrey.. You are ready to go.." : "Oouch.. your pattern does not matched with captcha.";

		res.json({
				success : patternCorrect,
				message : msg
			});		
});

    
Client Side
Using PatternLock plugin.
(function(){

	var patternId,
		captchaHolder=$('#patternCaptcha'),
		patternUI;
//function to get a new captcha and create a patternLock with same matrix.	
function reloadCaptcha(){
			$.ajax({
					url:"http://patterncaptcha.herokuapp.com/api/getPattern",
					type:'get',
					dataType:"json",
					crossDomain :true,
					success: function(data){
							patternId = data.id;
							var matrix = data.matrix,
								imgData = data.imageData;
							
							if(!patternUI){
									patternUI= new PatternLock('#patternUI',{
											matrix : matrix,
											radius:20,
											margin:15
										});
																}
							else{
									patternUI.option('matrix',matrix);
								}
							
							captchaHolder.html('');		
								
						}
				});
		}
	//initialize captcha first time
	reloadCaptcha();
	

	//to refresh captcha.
	$('#refreshCaptcha').click(function(){
			reloadCaptcha();
		});
        
	//to validate captcha
	$('#submitCaptcha').click(function(){
			$.ajax({
					url:"http://patterncaptcha.herokuapp.com/api/checkPattern",
					type:'get',
					dataType:"json",
					data:{
							patternId:patternId,
							pattern:patternUI.getPattern()
						},
					crossDomain :true,
					success: function(data){
							alert(data.message);		
							reloadCaptcha();
						}
				});
		});
}());
    

Want to support and contribute to patternCaptcha?

patternCaptcha needs your contribution to become best of its kind. There are lot of things you can do to contribute and support plugin.

Author

This plugin is developed and maintained by me ( Sudhanshu Yadav ignitersworld.com/me ) . If you have any query you can contact me at sudhanshuyadav2@gmail.com.

You can also follow me on twitter and github Follow @s-yadav .

Check out my other open source work