Captcha is a widely used security measure in web applications to distinguish between human users and automated bots. In this tutorial, you will learn unique approach to adding and utilizing Captcha in Laravel 10 to enhance the security of your application.
How to Add and Use Captcha in Laravel 10
By using the following steps, you can add and use captcha in laravel 10 with forms:
- Step 1 – Create New Laravel 10 Project
- Step 2 – Setup Database with Laravel Project
- Step 3 – Install Captcha Package
- Step 4 – Register Captcha Package
- Step 5 – Captcha Configuration
- Step 6 – Define Routes
- Step 7 – Create Form Controller and Define Methods
- Step 8 – Add Captcha in Form
- Step 9 – Run Development Server
Step 1 – Create New Laravel 10 Project
First of all, Open your command prompt or terminal.
Then execute the following command into it to download or install Laravel 10 new setup on your server:
composer create-project --prefer-dist laravel/laravel FormValidation
Step 2 – Setup Database with Laravel Project
Once you have installed laravel project in your server. Then you need to configure your database with your apps.
So, visit your app root directory and find .env file. Then configure database details as follows:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password
Step 3 – Install Captcha Package
In this step, open again your command prompt. And run the following command on it. To install captcha package:
composer require mews/captcha
Step 4 – Register Captcha Package
In this step, registered this package in laravel application. So, Open providers/config/app.php file and register the captcha service provider and aliases.
'providers' => [
...
...
...
Mews\Captcha\CaptchaServiceProvider::class,
]
'aliases' => [
...
...
...
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]
Step 5 – Captcha Configuration
In this step, open config/captcha.php file. And in this file you can enable or disable settings based on your requirement:
return [
'default' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
'math' => true, //Enable Math Captcha
'expire' => 60, //Stateless/API captcha expiration
],
// ...
];
Step 6 – Define Routes
In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route file:
use App\Http\Controllers\CaptchaValidationController;
Route::get('contact-form-captcha', [CaptchaValidationController::class, 'index']);
Route::post('captcha-validation', [CaptchaValidationController::class, 'capthcaFormValidate']);
Route::get('reload-captcha', [CaptchaValidationController::class, 'reloadCaptcha']);
Step 7 – Create Form Controller and Define Methods
In this step, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:
php artisan make:controller CaptchaValidationController
Now, visit your laravel directory app/http/controllers and open CaptchaValidationController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaptchaValidationController extends Controller
{
public function index()
{
return view('form-with-captcha');
}
public function capthcaFormValidate(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'message' => 'required',
'captcha' => 'required|captcha'
]);
}
public function reloadCaptcha()
{
return response()->json(['captcha'=> captcha_img()]);
}
}
Step 8 – Add Captcha in Form
Now, create blade view file to display form with captcha challenge and submit to database. So, Go to resources/views and create form-with-captcha.blade.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Form Captcha Validation</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 10 Add Captcha in Form For Validation</h2>
</div>
<div class="card-body">
<form name="captcha-contact-us" id="captcha-contact-us" method="post" action="{{url('captcha-validation')}}">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="@error('name') is-invalid @enderror form-control">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="@error('email') is-invalid @enderror form-control">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea name="message" class="@error('message') is-invalid @enderror form-control"></textarea>
@error('message')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group mt-4 mb-4">
<div class="captcha">
<span>{!! captcha_img() !!}</span>
<button type="button" class="btn btn-danger" class="reload" id="reload">
↻
</button>
</div>
</div>
<div class="form-group mb-4">
<input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#reload').click(function () {
$.ajax({
type: 'GET',
url: 'reload-captcha',
success: function (data) {
$(".captcha span").html(data.captcha);
}
});
});
</script>
</body>
</html>
The following below code will display validation error message on blade view file:
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
Step 9 – Run Development Server
Last step, open command prompt and run the following command to start developement server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/contact-form-captcha
Conclusion
By following this tutorial, you will gain a thorough understanding of how to add and utilize Captcha in your Laravel 10 application. This additional security measure will protect your forms from spam, brute-force attacks, and other malicious activities.
