Laravel Google ReCaptcha ? In this section, you will learn how to incorporate Google v2 Re Captcha form validation (security) into your Laravel application forms.
Today, we will incorporate Google Re Captcha into the Laravel application. We will create one form with Google Re Captcha and validate the form data with Laravel validations before storing it in the database.
In this Google Re captcha tutorial, we will go over all of the steps and then provide a live demo button. Click the live demo button to put this Laravel Google Recaptcha integration to the test.
Laravel Google V2 Re Captcha Form Validation
To learn more about Captcha validation in Laravel, go to Google. You can validate form data with Google v2 reCaptcha validation by following the steps below.
Table of Content
- Download laravel Fresh Setup
- Setup Database Credentials
- Install Google Captcha Package
- Get Google Captcha Secrets
- Create Route
- Generate Controller by Command
- Create Blade View (form)
- Run Development Server
Step 1: Download laravel Fresh Setup
We must first download new Laravel setups. To download the laravel fresh setup on your system, run the command below.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Setup Database Credentials
Following the successful download of the laravel application, Set up database credentials in your project's.env file before proceeding to the next step:
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
In your Laravel 6 application, we'll now install the Google Captcha Package. Install this package in your Laravel application with the command below.
composer require anhskohbo/no-captcha
Open the config/app.php file and add service provider and alias after successfully installing Google Captcha Packages.
config/app.php
'providers' => [
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
],
'aliases' => [
'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,
]
Step 4: Get Google Captcha Secrets
Now I'll make a site key and a secret key for Google Recaptcha in order to use it in a Laravel application. You only need to put the.env file if you already have site key and secret key.
If you're not sure where we'll acquire secret key and secret site, use the link below and make your own secret credentials. Recaptcha is a new online registration system that uses a captcha system.
The form will appear like this when you click this link Recaptcha new site registration. Fill in all of the required information and submit the form.
After you submit the above form, you will be able to see your secret site and secret key. Here is where you should paste your credentials and your.env file.
After that, we'll set the Google captcha secret in.env files. To do so, open a.env file and enter the following credentials:
Step 5: Create Route
We'll now add two routes to the web.php file, as seen below. The first is to display the form, and the second is to save the data from the form into the database.
Open routes/web.php
file
Route::get('captcha-form', 'CaptchaController@captchForm');
Route::post('store-captcha-form', 'CaptchaController@storeCaptchaForm');
Step 6: Generate Controller by Command
We'll need to make a new controller called CaptchaController
to handle two methods. Let's make a Controller with the command below.
php artisan make:controller CaptchaController
Now navigate to => app/Http/Controllers/CaptchaController.php
to access the controller. Create some methods for displaying data and storing it in a database now.
<?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
Then, in the resources/views/ folder
, create a captchaform.blade.php file and insert the following code in it.
<!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 - CodeSolutionStuff.com</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 - <a href="https://www.codesolutionstuff.com" target="_blank">CodeSolutionStuff</a></h2>
<br><br><br>
<div class="row justify-content-center">
<div class="col-md-8">
<a href="https://www.codesolutionstuff.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>
Step 8: Run Development Server
The development server must be started. Start your server with the php artisan serve command:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now that we're ready to run our example, type the following command to do so quickly.
http://localhost:8000/
Or direct hit in your browser
http://localhost/blog/public/captcha-form
We have successfully setup google Recaptcha credentials (secret site and secret key) in this laravel google ReCaptcha tutorial. Following that, we successfully integrated Google Recaptcha into a Laravel application.
I hope you will like the content and it will help you to learn Laravel 8/7/6 Google ReCaptcha v2 Form Validation
If you like this content, do share.