README

A visual and cleaner alternative to the traditional text based Captcha

This is a Laravel version using jQuery of the Captcha alternative from http://visualcaptcha.net VisualCaptcha is the easiest to implement secure Captcha with images instead of text (and mobile-friendly).

A better alternative to text based Captchas.
Decrease user frustration and improve conversion rates.
Server side validation.
Easy to style and add custom images.
Easily translated text.
Can be used in Views and Controllers.

Pre-Requisites

Laravel
PHP 5.3

Installation Back-End

Begin by installing this package through Composer.

{
    "require": {
		"hugocabral/visualcaptcha-laravel-jquery": "~1.0"
	}
}

Add these lines top the "app.php" file in the config folder where is the "aliases" category :

	// app.php
	'Captcha'          => 'visualCaptcha\Captcha',
	'SessionCaptcha'   => 'visualCaptcha\SessionCaptcha',

Update composer in terminal:

	composer update

Note

Example/ folder contains the app/ and public/ files used for the laravel example shown here: http://www.hugocabral.pt/visualCaptcha-Laravel-jQuery

Usage

Note: This implementation uses Localization from Laravel (Languages). No need to freak out. Its easy to use and you can check the explanation in this readme under Localization.

Add routes:

// routes.php

		// Check Locale selected and show demo view. If your app will be English only, you can remove: $lang = Config::get('app.locale'); and remove: ,compact('lang').
		Route::get('/', array('as' => 'demo', function()
		{
		    $lang = Config::get('app.locale');
		    return View::make('demo', compact('lang'));
		}));
		
		// Send method to validate captcha
		Route::post('captchacheck','CaptchaController@send');
		
		// Routes for app.visualcaptcha.js. 
		Route::group(array('prefix' => 'captcha'), function()
		{
		    Route::get('start/{howmany}', array('as' => 'captcha/start', 'uses'=>'CaptchaController@start'));
		    Route::get('audio/{type?}', array('as' => 'captcha/audio', 'uses'=>'CaptchaController@audio'));
		    Route::get('image/{index?}', array('as' => 'captcha/image', 'uses'=>'CaptchaController@image'));
		});

Create CaptchaController.php to create captcha, refresh, validade and do action (ex send email, update database)

// app/controllers/CaptchaController.php

		class CaptchaController extends BaseController {
		
		    /**
		     * Generate a Captcha
		     * @return Response
		     */
		    public function start($howmany)
		    {
		        $session = new SessionCaptcha();
		        $captcha = new Captcha($session);
		        $captcha->generate($howmany);
		
		        return Response::json($captcha->getFrontEndData());
		    }
		
		    /**
		     * Get an audio file
		     * @param  string $type Song type (mp3/ogg)
		     * @return File
		     */
		    public function audio($type = 'mp3')
		    {
		        $session = new SessionCaptcha();
		        $captcha = new Captcha($session);

		        return $captcha->streamAudio(array(), $type);
		    }
		
		    /**
		     * Get an image file
		     * @param  string $index Image index
		     * @return File
		     */
		    public function image($index)
		    {
		        $session = new SessionCaptcha();
		        $captcha = new Captcha($session);

		        return $captcha->streamImage(array(), $index, 0 );
		    }
		
		    /**
		     * Check if the Captcha result is good
		     * @return Mixed
		     */
		    public function send()
		    {
		
		        $data = Input::all();
		
		        //Validation rules
		        $rules = array(
		
		            'name' => 'required'
		        );
		
		        //Validate data
		        $validator = Validator::make($data, $rules);
		
		        //If everything is correct than run passes.
		        if ($validator->passes())
		        {
		            $session = new SessionCaptcha();
		            $captcha = new Captcha($session);
		
		            $frontendData = $captcha->getFrontendData();
		
		            if (!$frontendData)
		            {
		                return Redirect::back()->withInput()->withErrors(array('message' => Lang::get('text.captcha.none')));
		    
		            } else
		            {
		                // If an image field name was submitted, try to validate it
		                if ($imageAnswer = Input::get($frontendData['imageFieldName']))
		                {
		                    if ($captcha->validateImage($imageAnswer))
		                    {
		                        // Return true if the result is correct
		
		                        (... DO ACTION HERE, ex send email, update db...)
		
		                        // This return back to form to show sucess, thats why i use status=1 
		                        return Redirect::back()->with('status', 1);
		
		                    } else
		                    {
		                        return Redirect::back()->withInput()->withErrors(array('message' => Lang::get('text.captcha.image')));
		                        
		                    }
		                } else if ($audioAnswer = Input::get($frontendData['audioFieldName']))
		                {
		                    if ($captcha->validateAudio($audioAnswer))
		                    {
		                        // Return true if the result is correct
		
		                        (... DO ACTION HERE, ex send email, update db...)
		
		                         // This return back to form to show sucess, thats why i use status=1 
		                        return Redirect::back()->with('status', 1);
		
		                    } else
		                    {
		                        return Redirect::back()->withInput()->withErrors(array('message' => Lang::get('text.captcha.audio')));
		                        
		                    }
		                } else
		                {
		                    return Redirect::back()->withInput()->withErrors(array('message' => Lang::get('text.captcha.incomplete')));
		                    
		                }
		            }
		
		        } else
		        {
		            //return "contact form with errors";
		            return Redirect::back()->withErrors($validator)->with('status', 2);;
		
		        }
		
		    }
		}

Note: The Lang::get('xxx.xxx.xxx') code is the implementation of Localization (Languages). If your app will be English only, you can hardcore and replace this with your messages/errors.

Include jQuery library, jQuery visualCaptcha front-end library and app.js in you view or main layout or wherever you will be using visualCaptcha

// contact.blade.php
{{ HTML::script(js/jquery.min.js) }}
{{ HTML::script(js/visualcaptcha.jquery.js) }}
{{ HTML::script(js/app.js') }}) }}

hugocabral / visualcaptcha-laravel-jquery

Maintainers

Details