Adding Google ReCaptcha to forms in Laravel:

As the technologies work quite differently, v2 and v3 keys are not compatible. That is to say that a site running a v3 key cannot be used with recaptcha v2 since the same Google reCAPTCHA endpoint is used for both generations of the anti-spam technology. Below we’ll go over how you can generate your reCAPTCHA keys.

First, we can start by giving gratitude that Google didn’t can reCAPTCHA v2 right away like they did Google+. Kidding aside if you do not have a Google Account already you will need to create one, specifically for the Google reCAPTCHA admin console. Once you have an account created and you’re logged into the Google reCAPTCHA console you will be greeted with the register new site screen. If not, click the plus sign at the top right:

How to add google recaptcha

How to add google recaptcha image

Label:

You can use pretty much anything you want (it’s not exposed to the public) but consider something intuitive such as the website name that the key belongs to Under reCAPTCHA type,

select reCAPTCHA v2 and then select the “I’m not a robot” Checkbox option that appears below it

Domains

Add only the domain or sub-domain itself (i.e. no protocols, slashes, ports, etc…) so as an example, this would be iqcomputing.com and www.iqcomputing.com to cover both variants of the iqcomputing.com website. These variations won’t work as they contain protocols and ports: https://www.iqcomputing.com/ or iqcomputing.com:443.

Owners:

Optionally add additional owners (these must be email addresses associated with Google accounts)

Accept the reCAPTCHA:

Terms of Service Admire the minutia and font size of Google API’s Terms of Use When satisfied that you didn’t go to law school to spend all day writing the aforementioned terms, click the Accept checkbox

Send alerts to owners:

Unless your grandparents are one of the owners listed and you’re concerned that they might be confused about notifications regarding spikes in traffic or site configuration issues, checking this is recommended

Click the SUBMIT button:

(it’s all capitals to lend it legitimacy so that you know that it’s an important final step) Now it’s time to get those keys working for you AKA combating the legions of spam-happy bots that are constantly picking at your site, only too eager to generate spam.

How to add google recaptcha image

Setting up ReCaptcha in Laravel:

In your Laravel project’s .env file, add the following two variables, obviously updating the keys with your own:

GOOGLE_RECAPTCHA_KEY=ABCDE6abcdef
GOOGLE_RECAPTCHA_SECRET=ABCDE6abcdef

After that open config/services.php and add the following to the array:

'recaptcha' => [
'key' => env('GOOGLE_RECAPTCHA_KEY'),
'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
],

This means we can now access these keys via config('services.recaptcha.secret') and config('services.recaptcha.key').

Now we need to create a custom Validator, so create app/Validators/ReCaptcha.php and add the following code:

<?php
namespace App\Validators;
use GuzzleHttp\Client;
class ReCaptcha
{
    public function validate($attribute, $value, $parameters, $validator)
    {
        $client = new Client;
        $response = $client->post(
            'https://www.google.com/recaptcha/api/siteverify',
            [
                'form_params' =>
                    [
                        'secret' => config('services.recaptcha.secret'),
                        'response' => $value
                    ]
            ]
        );
        $body = json_decode((string)$response->getBody());
        return $body->success;
    }
}

Now we need to register the validator in the boot() method of the AppServiceProvider, so go to app/Providers/AppServiceProvider.php and add the following in the boot() method:

Validator::extend('recaptcha', 'App\\Validators\\ReCaptcha@validate');

We now need to update our contact form view to use the validator code, so within your

add the following:

@if(config('services.recaptcha.key'))
    <div class="g-recaptcha"
        data-sitekey="{{config('services.recaptcha.key')}}">
    </div>
@endif

We also have to add the JS from Google for the ReCaptcha, so add the following script to the head of your view, or in the head of your layout file:

<script src='https://www.google.com/recaptcha/api.js'></script>

Nearly done! Finally we need to add the validation rule and messages to our form request.

The rule we need is:

'g-recaptcha-response' => 'required|recaptcha'

Here’s an example of how it can be used with custom messages in a form request:

That’s it! Now try completing the form with and without completing the captcha and make sure you get the expected results. If so you should have taken a step towards protecting your site from automated bots.