Google ReCaptcha integration with Laravel

Today i have task to create ReCaptcha on contact form with in a Laravel Web page and I like to share the process of making this possible.

Laravel with ReCaptcha

First you will need Google Account where you will create ReCaptcha for your domain.

localhost is also acceptable for testing.

When you have your key and secret, next step will be to add in .env file:

GOOGLE_RECAPTCHA_KEY=6LdB6BAUAAAAAA33OmfV0MWH0b6MKYQNyYuQdEu5
GOOGLE_RECAPTCHA_SECRET=6LdB6BAUAAAAAFm6lq5AWir_frgabrQqv177-475

You can name values as you like, i just put prefix GOOGLE_RECAPTCHA.
This will need later in the HTML form and the validation on the server.

Don’t use this key/secret — it is only as example here and are not valid !

I can’t share the full project, but i create little clean repository on GitHub,
feel free to see it:

talevskiigor/laravel-recaptcha

Cos this is empty Laravel project we will need to create: view, controller and route for the contact form. You can find more details on the official Laravel documentation but i will note key point here.

We need routes for
GET — to show the contact form and
POST — to process form on the server.

Route::get('contact','ContactController@index');
Route::post('contact','ContactController@store');

For the ContactController so far we have only one method, just to return view with the form:

public function index()
{
        return view('contact');
}

Also for the view we just have bare minimum:

<div class="g-recaptcha" 
           data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
</div>

Nothing special, only line with env(‘GOOGLE_RECAPTCHA_KEY’) is where we take KEY from the .env file and let the JS script generate the form item.

Note: You will need to include JS file from Google:

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

And we should have a bare minimum form, something like:

Use GitHub Repository to get full code listing

Now, we actually need to make the magic…. but, how?
In my opinion this is best to be implemented as Custom Validation Rules,
so we will create Form Request Validation. You can find the full example on the GitHub repository, but here is the main key:

public function rules()
{
    return [
        'g-recaptcha-response'=>'required|recaptcha'
    ];
}

The main point here is the word: recaptcha who is Custom Validation Rules and need to be implemented. We can create simple class to this job:

<?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'=>env('GOOGLE_RECAPTCHA_SECRET'),
                    'response'=>$value
                 ]
            ]
        );
    
        $body = json_decode((string)$response->getBody());
        return $body->success;
    }

}

You can see the official documentation for Custom Validation Rules for more details, but key point is we follow the Google Documentation to validate our ReCaptchata and use the success JSON item of the returning object to return as Boolean true or false from our validation rule.

Node: We use Guzzle and if you don’t have it, you will need to add to your project: composer require guzzlehttp/guzzle

Ok, now we need to tell Laravel what message to show when the ReCaptchata is not valid. We just need to add new item to validation language file:

'recaptcha'=>'Please ensure that you are a human!'

And the final step will be to register our new validation in AppServiceProvider.php

public function boot()
{      
   Validator::extend(
          'recaptcha',
          'App\\Validators\\ReCaptcha@validate'
   );
}

We setup all we need for this task, so let as use it in our controller like so:

public function store(ReCaptchataTestFormRequest $request)
{
    //TODO: the rest of the code when form is successful
    return "Done right! :-)";
}

We are done.

I hope i help someone, please comment, share… ask question… i will try to answer all of them ASAP.