inchirags@gmail.com Chirag's Laravel Tutorial https://www.chirags.in

********************************************************************************************

Laravel 12 Captcha Configuration

********************************************************************************************

In Hindi YouTube Video:

https://www.youtube.com/watch?v=LU6YYIuQ8GY

In English YouTube Video:

https://www.youtube.com/watch?v=1u9eR8Ex2rE

Configuring a CAPTCHA in Laravel 12 involves using a package like mews/captcha or anhskohbo/no-captcha. Below is a step-by-step guide to set up CAPTCHA in Laravel 12, including the view page coding.

Step 1: Install Laravel 12

If you haven’t already set up Laravel 12, create a new Laravel project:

composer create-project laravel/laravel laravel-captcha

cd laravel-captcha

Open the Laravel project folder in any text editor like vscode, sublime, notepad++ etc.

Step 2: Install a CAPTCHA Package

For this example, we’ll use the mews/captcha package. Install it via Composer:

composer require mews/captcha

Step 3: Publish the CAPTCHA Configuration File

Publish the configuration file to customize CAPTCHA settings:

php artisan vendor:publish --provider="Mews\Captcha\CaptchaServiceProvider"

This will create a config/captcha.php file where you can configure the CAPTCHA settings.

Step 4: Configure CAPTCHA

Open the config/captcha.php file and customize the settings as needed. For example:

return [
    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',
    'length' => 6,
    'width' => 120,
    'height' => 36,
    'quality' => 90,
    'math' => false, // Enable math CAPTCHA if needed
];

Step 5: Add CAPTCHA to Your Form

In your view file (e.g., resources/views/contact.blade.php), add the CAPTCHA field:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form with CAPTCHA</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Contact Us</h1>
    @if ($errors->any())
        <div>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if (session('success'))
            {{ session('success') }}
    @endif
    <form action="{{ route('contact.submit') }}" method="POST">
        @csrf
        <div>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div>
            <label for="message">Message:</label>
            <textarea name="message" id="message" required></textarea>
        </div>
        <div>
            <label for="captcha">CAPTCHA:</label>
            <div class="captcha">
                <span>{!! captcha_img() !!}</span>
                <button type="button" onclick="refreshCaptcha()">Refresh</button>
            </div>
            <input type="text" name="captcha" id="captcha" required>
        </div>
        <button type="submit">Submit</button>
    </form>
    <script>
        function refreshCaptcha() {
            $.ajax({
                url: '/refresh-captcha',
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(data) {
                    $(".captcha span").html(data.captcha);
                },
                error: function(error) {
                    console.error('Error refreshing CAPTCHA:', error);
                }
            });
        }
    </script>
</body>
</html>

Step 6: Validate CAPTCHA in the Controller

php artisan make:controller ContactController

In your controller (e.g., app/Http/Controllers/ContactController.php), validate the CAPTCHA input:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mews\Captcha\Facades\Captcha;

class ContactController extends Controller
{
    public function showForm()
    {
        return view('contact');
    }

    public function submitForm(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255',
            'message' => 'required|string',
            'captcha' => 'required|captcha', // Validate CAPTCHA
        ]);

        // Process the form data

        return redirect()->back()->with('success', 'Your message has been sent!');
    }

    public function refreshCaptcha()
    {
        return response()->json(['captcha' => captcha_img()]);
    }

}

Step 7: Add Routes

Define the routes in routes/web.php:

use App\Http\Controllers\ContactController;
Route::get('/contact', [ContactController::class, 'showForm'])->name('contact.form');
Route::post('/contact', [ContactController::class, 'submitForm'])->name('contact.submit');
Route::get('/refresh-captcha', [ContactController::class, 'refreshCaptcha'])->name('refresh.captcha');

Step 8: Test the CAPTCHA

Visit

http://127.0.0.1:8000/contact

in your browser.

Fill out the form and submit it.

If the CAPTCHA is incorrect, the form will return an error. If correct, the form will submit successfully.

That’s it! You’ve successfully integrated CAPTCHA into your Laravel 12 application. Let me know if you need further assistance!

For any doubts and query, please write on YouTube video comments section.

Note : Flow the Process shown in video.

😉Please, Subscribe and like for more videos:

https://www.youtube.com/@chiragtutorial

💛Don't forget to, 💘Follow, 💝Like, 💖Share 💙&, Comment

Thanks & Regards,

Chitt Ranjan Mahto "Chirag"

_____________________________________________________________________

Note: All scripts used in this demo will be available in our website.

Link will be available in description.

Laravel 12 Captcha Configuration

Subscribe to my newsletter

Chitt Ranjan Mahto (Chirag)

Chitt Ranjan Mahto (Chirag)