Adding ReCaptha to Symfony
Tags: php, symfony, recaptcha, webdev
Published: 2022-08-24 19:03:36

## 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](https://www.google.com/recaptcha/admin) and fill your informations.

![ReCaptcha console example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1o78pnzh2bgm9bgol0p.png)

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

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

```env
###> 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
<?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:
```twig
{{ 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 !