Adding Google reCAPTCHA in Laravel For Form Validation

Posted on 27 March 2019 Posted in Laravel Tags: Google reCAPTCHA, Laravel reCAPTCHA 21K+ Views

When it comes to blocking bots to post malicious content, Google reCAPTCHA is an awesome solution.

Forms are one of the essential elements of any web application, which often become the main source of spam. Google reCAPTCHA is an industry standard for preventing spam by enhancing form validation capabilities.

Google reCAPTCHA relies on machine learning from Google’s large data sets of human interaction with the web, which is slightly different and random when compared to bots.

In this post, I’ll cover how to easily integrate Google ReCaptcha validation in your Laravel Application.

Prerequisites

To complete this tutorial, you will need to have:

Fresh Installation of Laravel
Google reCAPTCHA Keys

Setting Up Laravel Application

To start, let’s create a new Laravel application by running below command in your terminal.

composer create-project laravel/laravel laravel-reCaptcha

Above command will create a new Laravel application under folder name laravel-reCaptcha.

Now let’s mock up a quick contact page view in Laravel. Add below route in your routes/web.php file.

Route::get('contact', '[email protected]');

Now create a controller by running below command.

php artisan make:controller ContactController

Now, add getContactPage method in ContactController which will return a contact page view like below.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function getContactPage()
    {
        return view('contact');
    }
}

Create a new view file called contact.blade.php in your views folder. Add below code snippet to add a bootstrap based form to your view.

Now if your visit /contact, you will see a contact form layout like below.

Add reCAPTCHA Package

Now let’s add the necessary package to add reCAPTCHA functionality. For reCAPTCHA I will be using anhskohbo/no-captcha package. Use below composer command to add this package to your project.

composer require anhskohbo/no-captcha

Setup Configuration

Now, we need to create secret keys for Google reCAPTCHA, for this go to this link and enter the domain address of your application e.g. app.wip or app.test and fill other form fields like below.

When you submit the form, you will be provided with the Site Key and Site Secret.

Add below lines to your .env file.

NOCAPTCHA_SECRET= PUT YOUR SECRET KEY HERE
NOCAPTCHA_SITEKEY= PUT YOUR SITE KEY HERE

Now you have set up the configuration, it’s time to add reCAPTCHA to your contact form.

Add Necessary Routes

Add below new route in routes/web.php file.

Route::post('/submit-contact', 'ContactContro[email protected]')->name('contact.submit');

Using the above code, we are adding a new POST route to our application which will be used in our contact form.

Update Controller

Add a new method called submitContactForm in your ContactController with below code snippet.

public function submitContactForm(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required',
            'message' => 'required',
            'g-recaptcha-response' => 'required|captcha',
        ]);

        // Write your contact form logic here

        return redirect()->back();
    }

In submitContactForm method, we are adding validation rules for our contact form. Pay close attention on g-recaptcha-response field name which will be validation for our reCAPTCHA.