Laravel 9 Captcha Tutorial – Create Captcha in Laravel | CodeSolutionStuff - Web Development Websites, Tutorials & Solutions

A CAPTCHA is a challenge-response test used in computing to determine if a user is human. It is an abbreviation for the Completely Automated Public Turing Test.

Luis von Ahn, Manuel Blum, Nicholas J. Hopper, and John Langford coined the term in 2003. The most common type of CAPTCHA was invented in 1997 by two parallel groups.

Every day, we receive a large number of bot messages in order to protect this hesitant traffic and to maintain the upper-security layer in any form. We present a small challenge to real users in order for them to solve the captcha code. Fake users, on the other hand, will not be able to solve this problem. As a result, we believe in the power of captcha to receive accurate information across the internet.

Table of Content

1. Getting Started

If you have all the Laravel application installed, skip this step; otherwise, install the Laravel application from scratch.

composer create-project laravel/laravel --prefer-dist laravel-captcha-generate

Next, navigate to the project folder:

cd laravel-captcha-generate

2. Install Captcha Module

This is the first step in this tutorial. In this step, we'll use the Composer package manager to install the Captcha package.

composer require mews/captcha

3. Setting Up Captcha Package

The Captcha package must be registered in the Laravel application. Include the Captcha service provider in your Laravel app.

'providers' => [
        ...
        ...
        ...
        Mews\Captcha\CaptchaServiceProvider::class,
    ]

'aliases' => [
        ...
        ...
        ...
        'Captcha' => Mews\Captcha\Facades\Captcha::class,
    ]

4. Captcha Custom Config Settings

To make the custom captcha configuration visible, run the following command:

php artisan vendor:publish

On your terminal screen, a list of options appears; select the "MewsCaptchaCaptchaServiceProvider" list number and press enter.

You can enable or disable settings in the config/captcha.php file based on your needs.

return [
    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'math'      => true, //Enable Math Captcha
        'expire'    => 60,   //Stateless/API captcha expiration
    ],
    // ...
];

5. Create Captcha Controller

You must create a captcha controller in this step.

php artisan make:controller CaptchaServiceController

Include the following code in the app/Http/Controllers/CaptchaServiceController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaptchaServiceController extends Controller
{
    public function index()
    {
        return view('index');
    }
    public function capthcaFormValidate(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'username' => 'required',
            'captcha' => 'required|captcha'
        ]);
    }
    public function reloadCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }
}

index() ? This function loads the form template with the captcha element into the view.

capthcaFormValidate() ? This function validates the entire form, including the captcha input field.

reloadCaptcha() ? This function updates the captcha code or text.

6. Create Routes

Create three routes: one to load the form with captcha, one to validate the captcha, and one to refresh the captcha.

Add the following code to the routes/web.php file.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CaptchaServiceController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/contact-form', [CaptchaServiceController::class, 'index']);
Route::post('/captcha-validation', [CaptchaServiceController::class, 'capthcaFormValidate']);
Route::get('/reload-captcha', [CaptchaServiceController::class, 'reloadCaptcha']);

7. Create Form View

Finally, we must create a file called resources/views/index.blade.php. Then, inside of it, paste the given code.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Styles -->
    <style>
        .container {
            max-width: 500px;
        }
        .reload {
            font-family: Lucida Sans Unicode
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Laravel Captcha Code Example</h2>
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br />
        @endif
        <form method="post" action="{{url('captcha-validation')}}">
            @csrf
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" name="name">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="text" class="form-control" name="email">
            </div>
            <div class="form-group">
                <label for="Password">Username</label>
                <input type="text" class="form-control" name="username">
            </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">
                        &#x21bb;
                    </button>
                </div>
            </div>
            <div class="form-group mb-4">
                <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">Submit</button>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">
    $('#reload').click(function () {
        $.ajax({
            type: 'GET',
            url: 'reload-captcha',
            success: function (data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });
</script>
</html>

We added a jQuery link and the Bootstrap 5 beta version. Then I made a simple contact form that also mentions captcha and has a dynamic captcha refresh button.

8. Final Testing

To start the application, we must eventually run the following command.

php artisan serve

Use the following URL to access the captcha form:

http://127.0.0.1:8000/contact-form

I hope you will like the content and it will help you to learn Laravel 9 Captcha Tutorial ? Create Captcha in Laravel
If you like this content, do share.