Laravel 8 Google reCaptcha v3 Tutorial with Validation

Share this Article
Reading Time: 7 minutes
686 Views

Inside this article we will see the concept of laravel 8 google recaptcha v3 with validation. Google reCAPTCHA is a CAPTCHA system that enables web hosts to distinguish between human and automated access to websites.

Tutorial will help you to understand the integration of google recaptcha v3 in laravel 8. This will be step by step guide article.

Google reCaptcha that provide security against hackers and sticks or curl requests. It assures that a computer user is a human. It is the best and most used captcha system available where users are only required to click on a checkbox and in some cases select some similar images related to conman question.

Learn More –

Let’s get started.


Installation of Laravel Application

Laravel Installation can be done in two ways.

  • Laravel Installer
  • By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install it’s installer first. We need to make use of composer for that.

$ composer global require laravel/installer

This command will install laravel installer at system. This installation is at global scope, so you type command from any directory at terminal. To verify type the given command –

$ laravel

This command will open a command palette of Laravel Installer.

To create ad install laravel project in system,

$ laravel new blog

With the name of blog a laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project.

If your system doesn’t has composer Installed, Learn Composer Installation Steps.

Here is the complete command to create a laravel project-

$ composer create-project --prefer-dist laravel/laravel blog

After following these steps we can install a Laravel application into system.

To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Assuming laravel already installed at system.


Google reCaptcha Package

Open project terminal and run this composer command to install.

$ composer require josiasmontag/laravel-recaptchav3

Publish reCaptcha Provider

We need to publish package into application,

Back to terminal and run this command to publish it.

$ php artisan vendor:publish --provider="Lunaweb\RecaptchaV3\Providers\RecaptchaV3ServiceProvider"

Google reCaptcha Credentials

Open browser and hit this link, it will need to login via your google account. Please login to create google recaptcha credentials.

You need to do these,

  • Label name
  • Select reCaptcha version type
  • Domain to be linked

Click on Submit

Copy your Site Key and Secret Key from here.


Settings Environment Variables

Open .env file from application and add these keys into it.

...

RECAPTCHAV3_SITEKEY=6LcQRpAcAAAAAIGEO3y4jTO6gdLS2y_sMo4PCU-X
RECAPTCHAV3_SECRET=6LcQRpAcAAAAAD_lIBS7mxjUviQ7n2SoJPrMmrcL

...

Create Controller

Open project into terminal and run this artisan command to create controller.

$ php artisan make:controller RegisterController

It will create RegisterController.php file inside /app/Http/Controllers folder.

Open RegisterController.php write this complete code into it.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class RegisterController extends Controller
{
     /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function index()
    {
        return view('register');
    }
    
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|same:password_confirmation',
            'password_confirmation' => 'required',
            'g-recaptcha-response' => 'required|recaptchav3:register,0.5'
        ]);
   
        dd('done');
    }
}

Blade Layout Template

Next,

Create a file with name register.blade.php inside /resources/views folder.

Open register.blade.php and write this code into it.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Google Recaptcha V3 Tutorial with Validation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .help-block{
            color: red;
        }
    </style>
    {!! RecaptchaV3::initJs() !!}
</head>
<body>
    
<div class="container" style="margin-top:20px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="card card-primary">
                <div class="card-header">Laravel 8 Google Recaptcha V3 Tutorial with Validation</div>
                <div class="card-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
                        {!! csrf_field() !!}
     
                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Name</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="name" value="{{ old('name') }}">
                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
     
                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">E-Mail Address</label>
                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">
                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
     
                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password">
                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
     
                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Confirm Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password_confirmation">
                                @if ($errors->has('password_confirmation'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
     
                        <div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
                            <div class="col-md-6">
                                {!! RecaptchaV3::field('register') !!}
                                @if ($errors->has('g-recaptcha-response'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
     
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <br/>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-btn fa-user"></i>Register
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
     
</body>
</html>

Add Route

Open web.php from /routes folder.

//..

use App\Http\Controllers\RegisterController;

Route::get('register', [RegisterController::class, 'index']);
Route::post('register', [RegisterController::class, 'store']);

//..

Application Testing

Open project to terminal and type the command to start development server

$ php artisan serve

URL – http://localhost:8000/register

Submit without any input

We hope this article helped you to learn Laravel 8 Google Recaptcha V3 Tutorial with Validation in a very detailed way.

Buy Me a Coffee

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on Laravel 8 Articles here