Laravel 7/6 Google ReCaptcha v2 Form Validation

In this tutorial you will learn about the Laravel 7/6 Google ReCaptcha v2 Form Validation and its application with practical example.

In this Laravel 7/6 Google ReCaptcha v2 Form Validation tutorial I’ll show you how to integrate google v2 ReCAPTCHA with laravel 7/6 forms. In this tutorial, we will implement google v2 recaptcha with form in laravel 7/6. We will be using google v2 Recaptcha in laravel to secure laravel forms against spam.

Table Of Contents−

Laravel 7/6 Google ReCaptcha v2 Form Validation

In this tutorial, we will integrate google recaptcha v2 in laravel 7/6 application. I’ll guide you through step by step how to integrate google recaptcha v2 in a laravel 7/6 application. We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 7/6 application. In this tutorial, we will be creating a simple form with some basic fields along with the google recaptcha.

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

Step 1: Download laravel Fresh Setup
Step 2: Setup Database Credentials
Step 3: Install Google Captcha Package

Step 4: Get Google Captcha Secrets
Step 5: Create Route
Step 6: Generate Controller by Command

Step 7: Create Blade View (form)
Step 8: Run Development Server

Step 1: Download laravel Fresh Setup

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

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

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

Step 2: Setup Database Credentials

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=here your database name here
  DB_USERNAME=here database username here
  DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Install Google Captcha 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

After successfully Install Google Captcha Packages, open config/app.php file and add service provider and alias.

 config/app.php
 
 
 'providers' => [
 
 
 Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
 
 
 ],
 
 
 'aliases' => [
 
 
 'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,
 
 
 ]

config/app.php

'providers' => [

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

'aliases' => [

'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

]

Step 4: Get Google Captcha Secrets

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_SITEKEY=secret_site_key
NOCAPTCHA_SECRET=secret_key

1 2	NOCAPTCHA_SITEKEY=secret_site_key NOCAPTCHA_SECRET=secret_key

Step 5: Create Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('captcha-form', 'CaptchaController@captchForm');
Route::post('store-captcha-form', 'CaptchaController@storeCaptchaForm');

1 2	Route::get('captcha-form', 'CaptchaController@captchForm'); Route::post('store-captcha-form', 'CaptchaController@storeCaptchaForm');

Step 6: Generate Controller by Command

Now, lets create a controller named CaptchaController using command given below –

php artisan make:controller CaptchaController

1	php artisan make:controller CaptchaController

Now open the controller let’s go to app/Http/Controllers/CaptchaController.php. Now create some methods for showing and storing data into a database.

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\User;
 
class CaptchaController extends Controller
{
    public function captchaForm()
    {
       return view('captchaform');
    }  
    public function storeCaptchaForm(Request $request)
    {
        request()->validate([
        'name' => 'required',
        'email' => 'required',
        'mobile_number' => 'required',
        'g-recaptcha-response' => 'required|captcha',
        ]);
 
        dd('successfully validate');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\User;

class CaptchaController extends Controller

{

public function captchaForm()

{

return view('captchaform');

}

public function storeCaptchaForm(Request $request)

{

request()->validate([

'name' => 'required',

'email' => 'required',

'mobile_number' => 'required',

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

]);

dd('successfully validate');

}

Step 7: Create Blade View

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

resources/views/captchaform.blade.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>laravel 6 Google Recatpcha Verification</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.error{ color:red; } 
</style>
</head>
<body>
<div class="container">
<h2 style="margin-top: 10px;" class="text-center">laravel 6 Google Recatpcha Verification</h2>
<br><br><br>
<div class="row justify-content-center">
<div class="col-md-8">
<a href="https://www.w3adda.com/laravel-5-8-v2-google-recaptcha-integration" class="btn btn-secondary">Back to Post</a>
<br><br>
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<br>
@endif
<form id="captcha-form" method="post" action="{{url('store-captcha-form')}}">
@csrf
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
<span class="text-danger">{{ $errors->first('name') }}</span>
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
<span class="text-danger">{{ $errors->first('email') }}</span>
</div>      
<div class="form-group">
<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile_number" class="form-control" id="mobile_number" placeholder="Please enter mobile number">
<span class="text-danger">{{ $errors->first('mobile_number') }}</span>
</div>
<div class="form-group">
<label for="captcha">Captcha</label>
{!! NoCaptcha::renderJs() !!}
{!! NoCaptcha::display() !!}
<span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

<!doctype html>

<head>

<title>laravel 6 Google Recatpcha Verification</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;" class="text-center">laravel 6 Google Recatpcha Verification</h2>

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

<br>

@endif

@csrf

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="mobile_number">Mobile Number</label>

<span class="text-danger">{{ $errors->first('mobile_number') }}</span>

</div>

<label for="captcha">Captcha</label>

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

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

<span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>

</div>

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

</div>

</form>

</div>

</body>

</html>

Step 8: Run 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/
Or direct hit in your browser
http://localhost/blog/public/captcha-form

http://localhost:8000/

Or direct hit in your browser

http://localhost/blog/public/captcha-form

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7/6 Google ReCaptcha v2 Form Validation