Skip to content

All topics  /  Laravel

Laravel 8 Captcha Code Tutorial

Laravel ·

Teams applying “Laravel 8 Captcha Code Tutorial” in a production project can use equal employment opportunity commission eeoc to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi Guys,

In this tutorial,I will learn you how to use captcha code in laravel 8.you can easy and simply use captcha code in laravel 8.

In this post i give you very simple and from scratch of generate captcha code image as you can also see bellow preview. After complete this example you can found ui design like bellow preview, you have to just follow few step and find result:

Step 1: Install Laravel Project


First, you need to download the laravel fresh setup. Use this command then download laravel project setup : 

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

Step 2: Install Captcha Module

This is the foundational step of this tutorial. In this step, we will install the Captcha package using the Composer package manager. 

composer require mews/captcha

Setting Up Captcha Package

Captcha package needs to be registered in laravel application. Incorporate the Captcha service provider in the laravel app.

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,
    ]

Captcha Custom Config Settings

To manifest the custom captcha configuration, you must execute the below command: 

php artisan vendor:publish

A list of options manifests on your terminal screen, select the “Mews\Captcha\CaptchaServiceProvider” list number and press enter.

Inside the config/captcha.php file, here 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 3: Add Controller Method index() – It loads the form template in the view with the captcha element.

capthcaFormValidate() – Validates the entire form, including the captcha input field.

reloadCaptcha() – It refreshes the captcha code or text.

app/Http/Controllers/CaptchaController.php 

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

Step 4: Create Routes

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

routes/web.php 

 
use App\Http\Controllers\CaptchaController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('contact-form', [CaptchaController::class, 'index']);
Route::post('captcha-validation', [CaptchaController::class, 'capthcaFormValidate']);
Route::get('reload-captcha', [CaptchaController::class, 'reloadCaptcha']);

Step 5: Create blade file

In this last Step,you will create to layout your file.

resources/views/index.blade.php 

<!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>

        
        .reload {
            font-family: Lucida Sans Unicode
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                  <div class="card-header">
                    <h2>Laravel Captcha Code Example - Nicesnippest.com</h2>
                  </div>
                  <div class="card-body">
                    @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 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>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">Submit</button>
                        </div>
                    </form>
                  </div>
                </div>
            </div>
        </div>
    </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>

Now we are ready to run our example so run bellow command for quick run: 

php artisan serve

Now you can open bellow URL on your browser: 

http://localhost:8000/contact-form

It will help you...

More on this topic