Adding ReCaptha to Symfony

Why ReCaptcha are required today ?

With all these bots who are spamming the web, having a recaptcha to protecting your contact or sign-up section. It's pretty simple to set-up, nearly 5 minutes when you know the steps, for this tutorial we gonna say 15 minutes max !

Sign up to Google Console

If you want to integrate a ReCaptcha to your website, you need to ask google give you token for be able to use their service. It's very simple and no verifications are required. Just go to the ReCaptcha console and fill your informations.

As you can see in this example, i added a name, choosed the ReCaptcha V2 and added my domain name. The little trick is i added localhost too. With this domain added on the console i will be able to test it on my local server.

Coding time

Now go to your symfony project. The first step is to require the recaptcha-bundle with:

composer require victor-prdh/recaptcha-bundle

With Symfony flex

You can quickly configure this bundle by using symfony/flex:

• answer no for google/recaptcha
• answer yes for victor-prdh/recaptcha-bundle

If everything is good, you must have the bundle registred in the "bundles.php" file of your config folder ("config/bundles.php"):

//config/bunldes.php
<?php
return [
    ...
    VictorPrdh\RecaptchaBundle\RecaptchaBundle::class => ['all' => true]
];

Just add it if you dont see this line.

You can directly go to Usage section

Without Symfony flex

If you don't want / you can't use the flex recipe you can create a "recaptcha.yaml" file in your config folder ("config/packages/recaptcha.yaml"):

#config/packages/recaptcha.yaml
recaptcha:
  google_site_key: '%env(GOOGLE_RECAPTCHA_SITE_KEY)%'
  google_secret_key: '%env(GOOGLE_RECAPTCHA_SECRET_KEY)%'

Once you created this config file, you can go in your ".env" file and add this:

###> victor-prdh/recaptcha ###
# https://www.google.com/recaptcha/admin  <--- get keys here
GOOGLE_RECAPTCHA_SITE_KEY='your site key'
GOOGLE_RECAPTCHA_SECRET_KEY='your secret key'
###< victor-prdh/recaptcha ###

It's time for update the bundle, if you don't do it, your keys will not be used by the bundle.

composer update victor-prdh/recaptcha-bundle

Usage

Integration in Symfony Form

You have now a "ReCaptchaType" class available for all your forms. You can use it in your FormBuilder like a "TextType" or "PasswordType":

<?php

namespace App\Form;

use VictorPrdh\RecaptchaBundle\Form\ReCaptchaType;

class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add("recaptcha", ReCaptchaType::class);
    }
}

Display error on your Twig view

Once you create the form, you render it as usual with Symfony. You can show it in your twig file like that:

{{ form_start(form) }}

    {{ form_row(form.recaptcha) }} 
    {# must be the same name of this put on the FormBuilder #}

    {{ form_errors(form.recaptcha) }}
    {# That will display the error of the captcha to user #}

{{ form_end(form) }}

And voilà ! You have your ReCapthca verification set-up on your symfony project !