EWZRecaptchaBundle

This bundle provides easy reCAPTCHA form field for Symfony.

Installation

Step 1: Using Composer (recommended)

To install EWZRecaptchaBundle with Composer just add the following to your composer.json file:

// composer.json
{
    // ...
    require: {
        // ...
        "excelwebzone/recaptcha-bundle": "master-dev"
    }
}

NOTE: Please replace master-dev in the snippet above with the latest stable branch, for example 2.0.*.

Then, you can install the new dependencies by running Composer's update command from the directory where your composer.json file is located:

$ php composer.phar update

Now, Composer will automatically download all required files, and install them for you. All that is left to do is to update your AppKernel.php file, and register the new bundle:

<?php

// in AppKernel::registerBundles()
$bundles = array(
    // ...
    new EWZ\RecaptchaBundle\EWZRecaptchaBundle(),
    // ...
);

Step 1 (alternative): Using deps file (Symfony 2.0.x)

First, checkout a copy of the code. Just add the following to the deps file of your Symfony Standard Distribution:

[EWZRecaptchaBundle]
    git=http://github.com/excelwebzone/EWZRecaptchaBundle.git
    target=/bundles/EWZ/Bundle/RecaptchaBundle

NOTE: You can add version tag in the snippet above with the latest stable branch, for example version=origin/2.0.

Then register the bundle with your kernel:

<?php

// in AppKernel::registerBundles()
$bundles = array(
    // ...
    new EWZ\RecaptchaBundle\EWZRecaptchaBundle(),
    // ...
);

Make sure that you also register the namespace with the autoloader:

<?php

// app/autoload.php
$loader->registerNamespaces(array(
    // ...
    'EWZ'              => __DIR__.'/../vendor/bundles',
    // ...
));

Now use the vendors script to clone the newly added repositories into your project:

$ php bin/vendors install

Step 1 (alternative): Using submodules (Symfony 2.0.x)

If you're managing your vendor libraries with submodules, first create the vendor/bundles/EWZ/Bundle directory:

$ mkdir -pv vendor/bundles/EWZ/Bundle

Next, add the necessary submodule:

$ git submodule add git://github.com/excelwebzone/EWZRecaptchaBundle.git vendor/bundles/EWZ/Bundle/RecaptchaBundle

Step2: Configure the autoloader

Add the following entry to your autoloader:

<?php
// app/autoload.php

$loader->registerNamespaces(array(
    // ...

    'EWZ' => __DIR__.'/../vendor/bundles',
));

Step3: Enable the bundle

Finally, enable the bundle in the kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...

        new EWZ\Bundle\RecaptchaBundle\EWZRecaptchaBundle(),
    );
}

Step4: Configure the bundle's

Finally, add the following to your config file:

# app/config/config.yml

ewz_recaptcha:
    public_key:   here_is_your_public_key
    private_key:  here_is_your_private_key
    secure:       false
    locale_key:   kernel.default_locale

NOTE: If you use secure url for reCAPTCHA put true in secure (false is the default value).

You can easily disable reCAPTCHA (for example in a local or test environment):

# app/config/config.yml

ewz_recaptcha:
    // ...
    enabled: false

Congratulations! You're ready!

Basic Usage

When creating a new form class add the following line to create the field:

<?php

public function buildForm(FormBuilder $builder, array $options)
{
    // ...
    $builder->add('recaptcha', 'ewz_recaptcha');
    // ...
}

You can pass extra options to reCAPTCHA with the "attr > options" option:

<?php

public function buildForm(FormBuilder $builder, array $options)
{
    // ...
    $builder->add('recaptcha', 'ewz_recaptcha', array(
        'attr' => array(
            'options' => array(
                'theme' => 'clean'
            )
        )
    ));
    // ...
}

To validate the field use:

<?php

use EWZ\Bundle\RecaptchaBundle\Validator\Constraints as Recaptcha;

/**
 * @Recaptcha\True
 */
public $recaptcha;

Cool, now you are ready to implement the form widget:

PHP:

<?php $view['form']->setTheme($form, array('EWZRecaptchaBundle:Form')) ?>

<?php echo $view['form']->widget($form['recaptcha'], array(
    'attr' => array(
        'options' => array(
            'theme' => 'clean',
        ),
    ),
)) ?>

Twig:

{% form_theme form 'EWZRecaptchaBundle:Form:ewz_recaptcha_widget.html.twig' %}

{{ form_widget(form.recaptcha, { 'attr': {
    'options' : {
        'theme' : 'clean',
    },
} }) }}

If you are not using a form, you can still implement the reCAPTCHA field using JavaScript:

PHP:

<div id="recaptcha-container"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $.getScript("<?php echo \EWZ\Bundle\RecaptchaBundle\Form\Type\RecaptchaType::RECAPTCHA_API_JS_SERVER ?>", function() {
            Recaptcha.create("<?php echo $form['recaptcha']->get('public_key') ?>", "recaptcha-container", {
                theme: "clean",
            });
        });
    };
</script>

Twig:

<div id="recaptcha-container"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $.getScript("{{ constant('\\EWZ\\Bundle\\RecaptchaBundle\\Form\\Type\\RecaptchaType::RECAPTCHA_API_JS_SERVER') }}", function() {
            Recaptcha.create("{{ form.recaptcha.get('public_key') }}", "recaptcha-container", {
                theme: "clean"
            });
        });
    });
</script>

Customization

If you want to use a custom theme, put your chunk of code before setting the theme:

 <div id="recaptcha_widget">
   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
 </div>

{% form_theme form 'EWZRecaptchaBundle:Form:ewz_recaptcha_widget.html.twig' %}

{{ form_widget(form.recaptcha, { 'attr': {
    'options' : {
        'theme' : 'custom',
    },
} }) }}

Further reading: Customizing the Look and Feel of reCAPTCHA