DEV Community

Cover image for Adding ReCaptha to Symfony

Posted on

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.

ReCaptcha console example

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"):

return [
    VictorPrdh\RecaptchaBundle\RecaptchaBundle::class => ['all' => true]
Enter fullscreen mode Exit fullscreen mode

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"):

  google_site_key: '%env(GOOGLE_RECAPTCHA_SITE_KEY)%'
  google_secret_key: '%env(GOOGLE_RECAPTCHA_SECRET_KEY)%'
Enter fullscreen mode Exit fullscreen mode

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

###> victor-prdh/recaptcha ###
#  <--- get keys here
###< victor-prdh/recaptcha ###
Enter fullscreen mode Exit fullscreen mode

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


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":


namespace App\Form;

use VictorPrdh\RecaptchaBundle\Form\ReCaptchaType;

class TaskType extends AbstractType
    public function buildForm(FormBuilderInterface $builder, array $options)
        $builder->add("recaptcha", ReCaptchaType::class);
Enter fullscreen mode Exit fullscreen mode

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) }}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

shanda0409 profile image
Shanda Anny

it's perfect and easy.
Thanks a lot