AJAX based Currency Converter

CakePHP Securimage Component

On SecurImage

Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots. It can run on most any webserver as long as you have PHP installed, and GD support within PHP. Securimage does everything from generating the CAPTCHA images to validating the typed code. Audible codes can be streamed to the browser with Flash for the vision impaired.
SecurImage CAPTCHA

So what is the CakePHP SecurImage Component

It is a component for the CakePHP MVC framework that makes it easy to implement CAPTCHA codes in your pages or forms or as a matter of fact, wherever you want to enforce a check against automated bots.

This component was first published at The Bakery for CakePHP 1.2.x and then republished at the World of Baud as an upgraded version compatible with CakePHP 1.3.x. This isn’t an original work and I take no credit for creation of the original component. However, the project seems to have been ditched for a good while, whereas both CakePHP and SecurImage keep evolving. Certain configuration options have become deprecated while a whole bunch of new ones have been introduced.

This is an attempt to keep up with the evolution of SecurImage and make the correct set of options available in the component.

Moreover, certain values passed to the component (e.g. Color Codes – foreground or background) now need to be converted to a native SecureImage_Color format. The component handles this task, letting the end-user specify the colors in standard hexademical notation (e.g. #cccccc).

Getting the component

You can grab this component by visiting its GitHub Repository or use the following links to grab the Zip or Tarball directly.

[download id=”11″]

[download id=”12″]

Installation

First and foremost, you are required to obtain the SecurImage library and unzip it into your app/vendors folder.

If you are familiar with the CakePHP framework, usage of this component should be fairly evident to you.

The zip file contains:

  1. A component file that should be placed in controllers/components folder of your application, and
  2. A view file, that is to be placed in views/elements folder.

If effect, the folder structure should be as follows:

app
 |-controllers
 |  |-components
 |     |-securimage.php (Component)
 |-vendors
 |  |-securimage (The folder you get from unzipping the Securimage library)
 |-views
    |-elements
	   |-securimage.ctp

Usage

The component should be included like a standard CakePHP component, in whichever controller you wish to use it. In my examples, I’m using a controller named ContactsController. The corresponding model’s name is Contact.

Simple example:

class ContactsController extends AppController {

    // Components
    var $components = array(
        'Securimage'
    );
	
}

Example with parameters:

class ContactsController extends AppController {

    // Components
    var $components = array(
        'Securimage' => array(
            'code_length' => 6,
            'font_size' => 60,
            'image_width' => 200,
            'image_height' => 70,
            'image_bg_color' => '#F7F7F7',
            'line_color' => '#D3D3D3',
            'multi_text_color' => '#8E67D6,#B98B83,#529071,#7C3E39,#E07E6A,#46765D',
            'num_lines' => 8,
            'perturbation' => 0.5,
            'text_transparency_percentage' => 20,
            'use_multi_text' => true,
            'use_wordlist' => true,
        ),
    );
	
}

Note: For a full list of available parameters (configuration options) please take a look into the component file. Details of each option are included in it in PHP Doc format. Alternatively you can view them below:

    /**
     * Type of image to be generated (jpg, gif or png)
     * @var string
     */
    var $image_type = 'jpg';
    /**
     * Height of the Captcha image
     * @var int
     */
    var $image_height = 75;
    /**
     * Width of the captcha image
     * @var int
     */
    var $image_width = 350;
    /**
     * The background color for the image as a hexadecmial value (prepended by a '#')
     * @var string 
     */
    var $image_bg_color = '#ffffff';
    /**
     * Whether to draw the lines over the text
     * @var bool
     */
    var $draw_lines_over_text = false;
    /**
     * Number of vertical and horizontal lines to draw on the image<br />
     * Ignored if $draw_lines_over_text is set to false
     * @see $draw_lines_over_text
     * @var int
     */
    var $num_lines = 6;
    /**
     * Color of lines drawn over text as a hexadecmial value (prepended by a '#')<br />
     * Ignored if $draw_lines_over_text is set to false
     * @see $draw_lines_over_text
     * @var string 
     */
    var $line_color = '#cccccc';
    /**
     * Text to write at the bottom corner of captcha image<br />
     * No signature is drawn if this parameter is not set
     * @var string
     */
    var $image_signature = null;
    /**
     * Color to use for writing signature text<br />
     * Ignored if $image_signature is set to null
     * @see $image_signature
     * @var string 
     */
    var $signature_color = '#000000';
    /**
     * Absolute path to the directory containing background images<br />
     * A random one is picked everytime. GIF, JPG or PNG files only<br />
     * No background images are used if this parameter is not set
     * @var string
     */
    var $background_directory = null;
    /**
     * Whether to use a gd font instead of a ttf font
     * @var bool
     */
    var $use_gd_font = false;
    /**
     * Path to GD font file<br />
     * relative to SecurImage library folder under vendors<br />
     * Used only if $use_gd_font is set to true
     * @var string
     */
    var $gd_font_file = null;
    /**
     * The approxiate size of the font in pixels<br />
     * Used only if $use_gd_font is set to true
     * @see $use_gd_font
     * @var int
     */
    var $gd_font_size = 50;
    /**
     * The path to the ttf font file to load<br />
     * relative to SecurImage library folder in vendors
     * @var string
     */
    var $ttf_file = 'fonts/AHGBold.ttf';
    /**
     * The color of the text as a hexadecmial value (prepended by a '#')<br />
     * Ignored if $use_multi_text set to true
     * @see $use_multi_text
     * @var string
     */
    var $text_color = '#000000';
    /**
     * Whether to use multiple colors for each character
     * @var bool
     */
    var $use_multi_text = false;
    /**
     * Comma separated list of colors as hexadecmial values (prepended by '#'-es)<br />
     * Used only if $use_multi_text is set to true
     * @see $use_multi_text
     * @var string
     */
    var $multi_text_color = '#E36B63,#B78D89,#3A9E67,#A7878D,#B78D89,#F3705E,#8B47FD,#2D985D,#9A4CF9';
    /**
     * Whether to make characters appear transparent
     * @var bool
     */
    var $use_transparent_text = true;
    /**
     * The percentage of transparency, 0 to 100<br />
     * Works only if $use_transparent_text is set to true
     * @var int
     * @see $use_transparent_text
     */
    var $text_transparency_percentage = 45;
    /**
     * How much to distort image, higher = more distortion<br />
     * Distortion is only available when using TTF fonts i.e.<br />
     * when $use_gd_font is set to false
     * @var float 
     * @see $use_gd_font
     */
    var $perturbation = 0;
    /**
     * Maximum angle of text in degrees
     * @var int
     */
    var $text_angle_maximum = 21;
    /**
     * Minimum angle of text in degrees
     * @var int
     */
    var $text_angle_minimum = -21;
    /**
     * The character set used for generating Captcha codes in the image<br />
     * Used only if $use_wordlist is set to false
     * @see $use_wordlist
     * @var string
     */
    var $charset = 'ABCDEFGHKLMNPRSTUVWYZ23456789';
    /**
     * The length of the code to generate<br />
     * Used only if $use_wordlist is set to false
     * @see $use_wordlist
     * @var int
     */
    var $code_length = 5;
    /**
     * Use wordlist instead of random codes
     * @var bool
     */
    var $use_wordlist = false;
    /**
     * Generate codes using words in this file<br />
     * relative to SecurImage library folder under vendors<br />
     * Used only if $use_wordlist is set to true
     * @see $use_wordlist
     * @var string
     */
    var $wordlist_file = 'words/words.txt';
    /**
     * Path to the WAV files to use for the audio playback of Captcha text, include trailing /<br />
     * relative to SecurImage library folder in vendors
     * @var string
     */
    var $audio_path = 'audio/';
    /**
     * Type of audio file to generate (mp3 or wav)
     * @var string
     */
    var $audio_format = 'mp3';
    /**
     * The session name to use (blank for default)
     * @var string 
     */
    var $session_name = ''; // 
    /**
     * The amount of time in seconds that a code remains valid<br />
     * Any non-numeric or value less than 1 disables this functionality
     * @var int 
     */
    var $expiry_time = -1;
    /**
     * Use an SQLite database for storing codes as a backup to sessions
     * @var bool 
     */
    var $use_sqlite_db = false;
    /**
     * Absolute path to SQLite database for storing codes as a backup to sessions<br />
     * For Security reasons, put this file in a directory below the web root or one that is restricted
     * Works only if $use_sqlite_db is set to true
     * @see $use_sqlite_db
     * @var string
     */
    var $sqlite_database = null;

In your view file the CAPTCHA image can be displayed in the following manner:

    <div id="captcha_container">
        <img id="captcha_img" src="/contacts/securimage/0" alt="CAPTCHA image" />
        <img id="captcha_reload" src="/img/icon-reload.png" title="Refresh CAPTCHA" />
        <input id="captcha_text" name="data[Contact][captcha_text]" value="" />
    </div>

The purpose of the second image is to act like a refresh button, in case your captcha is unintelligible. A little bit of javascript can aid in refreshing the image dynamically.

    // Using jQuery
	$( '#captcha_reload' ).click( function() {
        $( '#captcha_img' ).attr('src', '/contacts/securimage/' + Math.random()); // Append random number to prevent caching
        $( '#captcha_text' ).val('');
    });

If you have any questions, feel free to write back and I’ll try my best to respond ASAP.

Last, but not the least

While working on the component, I came by a cool site named CaptchaFails, with a whole bunch of really funny captchas that people tend to encounter on the net. Have Fun!!

About Us

performancex150

Boost your Sales with CRMs

We offer consultancy & implementation services for major Open Source & Enterprise CRMs. Our custom crafted Performance Dashboards help you maximize on your ROI and make the best out of your Marketing and Sales campaigns.

web-appx150

Web-applications

No two businesses are equal. Develope your system to match your business processes. The possibilities are endless!

mobile-appsx150

Mobile applications

Be visible to your customers at all times. Step into the new paradigm of building brand and recognition, while improving customer engagement – all at the same time.

Stand out from the competition while cultivating customer loyalty.

integrationsx150

Cross-Platform Integrations

Finding it difficult to move from legacy systems? Let us build custom integrations with the latest and the best in the SaaS world.

We focus on the strategic needs of our clients’ businesses to determine the technology capabilities needed to support their long-term Marketing & Sales goals. We help companies confidently address technology-related decisions and ensure their IT organizations and operating models are agile and effective, equipping them to cut through the noise of fleeting technology trends to create enduring results.

Clients

SAE_Institute_Logo-128
xisto-logo_nobg-dark2
stiu-logo-150
Fields marked with an * are required