Laravel 8 Google ReCAPTCHA v2 Example Tutorial

In this tutorial you will learn about the Laravel 8 Google ReCAPTCHA v2 Example Tutorial and its application with practical example.

In this Laravel 8 google ReCAPTCHA v2 form validation tutorial I’ll show you how to integrate google v2 ReCAPTCHA with laravel 8 forms. In this tutorial, we will implement google v2 recaptcha with form in laravel 8. We will be using google v2 Recaptcha in laravel to secure laravel forms against spam.

Table Of Contents−

Install Laravel 8

.env file

Install Google reCaptcha v2 Package

Add Google Site Key and Secret Key

Create Blade File

Start Development Server

In this step by step Laravel 8 Google ReCAPTCHA v2 Example Tutorial I’ll guide you through the process to integrate google recaptcha v2 in laravel 8.

Install Laravel 8 Application
Configure Database Details

Install Google Recaptcha Package (anhskohbo/no-captcha)
Create Controller
Create Routes

Create Blade File
Start Development Server
Run This App On Browser

Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Install Google reCaptcha v2 Package

We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 5.8 application. In this step we will be installing “anhskohbo/no-captcha” via following composer command, lets open your terminal and switch to the project directory and enter the following command –

composer require anhskohbo/no-captcha

1	composer require anhskohbo/no-captcha

This package is supports the auto-discovery feature so we need to only publish config file

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

1	php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Add Google Site Key and Secret Key

Now, we need to set Google Site Key and Secret Key in .env file. Let’s start by getting Google key & secret required to make ReCaptcha authorize with the Google servers. Visit the following link to register your site –

https://www.google.com/recaptcha/admin/create

1	https://www.google.com/recaptcha/admin/create

Let’s open .env file and add this credential as following –

.env

NOCAPTCHA_SECRET=XXXXXX
NOCAPTCHA_SITEKEY=XXXXX

1 2	NOCAPTCHA_SECRET=XXXXXX NOCAPTCHA_SITEKEY=XXXXX

Create Controller

Now, lets create UserController using following command

php artisan make:controller <strong>UserController</strong>

1	php artisan make:controller <strong>UserController</strong>

Once the above command executed, it will create a controller file UserController.php in app/Http/Controllers/ directory. Open the UserController.php file and put the following code in it.

Controllers/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller
{
    
    public function create()
    {
        return view('users.create');
    }

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

        User::create($request->all());
   
        return "Success";
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class UserController extends Controller

{

public function create()

{

return view('users.create');

}

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'email' => 'required|email',

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

]);

User::create($request->all());

return "Success";

}

Create Route

After this, we need to add following routes in “routes/web.php” to display form. Lets open “routes/web.php” file and add following route.

routes/web.php

use App\Http\Controllers\UserController;

Route::resource('users', UserController::class);

use App\Http\Controllers\UserController;

Route::resource('users', UserController::class);

Create Blade File

In this step, we will create view/blade file to render a register form with recaptcha field. Lets create a “create.blade.php” file in “resources/views/” directory and put the following code in it.

resources/views/create.blade.php

<html>
<head>
   <title>Laravel 8 Google Recaptcha Example</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
</head>
<body>

   <div class="container">

      <div class="row" style="margin-top: 10px;">
         <div class="col-lg-12 margin-tb">
            <div class="text-center">
               <h2>Create New User</h2>
            </div>
         </div>
      </div>

      @if ($errors->any())
      <div class="alert alert-danger">
         <strong>Error!</strong> <br>
         <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
         </ul>
      </div>
      @endif

      <form action="{{ route('users.store') }}" method="POST">
         @csrf
         <div style="margin-left: 400px;">
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-6">
                  <div class="form-group">
                     <strong>Name:</strong>
                     <input type="text" name="name" class="form-control" placeholder="Name">
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-6">
                  <div class="form-group">
                     <strong>Email:</strong>
                     <input type="email" name="email" class="form-control" placeholder="Email">
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-6">
                  <div class="form-group">
                     <strong>Recaptcha:</strong>                  
                     {!! NoCaptcha::renderJs() !!}
                     {!! NoCaptcha::display() !!}
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-12 text-left">
                  <button type="submit" class="btn btn-primary">Submit</button>
               </div>
            </div>
         </div>
      </form>
   </div>
</body>
</html>

<html>

<head>

<title>Laravel 8 Google Recaptcha Example</title>

</head>

<body>

<h2>Create New User</h2>

</div>

@if ($errors->any())

<strong>Error!</strong> <br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@csrf

</div>

<strong>Email:</strong>

</div>

<strong>Recaptcha:</strong>

{!! NoCaptcha::renderJs() !!}

{!! NoCaptcha::display() !!}

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</body>

</html>

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/users

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Google ReCAPTCHA v2 Example Tutorial