Register Form with Captcha Code in Laravel 11

Register Form with Captcha Code in Laravel 11

Hello dear,

Captcha stands for Completely Automated Public Turing test. It is mainly used as a security test to ensure only human users can pass through. Computers or bots are not able to solve a captcha. There are different types of captcha. Therefore, we can use some protection.

Here is the step-by-step guide to generating a captcha code in Laravel.

Click to Download Project

Click to Download Admin Template

Prerequisites:

* Git: Git is a version control system that tracks source code changes during software development. Make sure Git is installed on your system. You can download Git from https://git-scm.com/ and follow the installation instructions for your operating system.

* PHP: Laravel requires PHP to be installed on your system. You need PHP version 7.3 or higher. You can check your PHP version by running php -v in your terminal.
* Composer: Composer is a dependency manager for PHP and is used to install Laravel and its dependencies. You can download Composer from https://getcomposer.org/ and follow the installation instructions for your operating system.
* Web Server: You'll need a web server to serve your Laravel application. While Laravel comes with a built-in development server, it's recommended that Apache or Nginx be used for production deployments.
* Database: If the cloned project uses a database, make sure you have the required database management system (e.g., MySQL, PostgreSQL, SQLite) installed on your system. 

Step 1: Configure Laravel Project:

Install the brand new Laravel project by typing the following command.

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

Step 2: Install the Captcha package:

We must add the Mews captcha package, so switch to your terminal and type the command below.

composer require mews/captcha

Step 3: Create one controller

php artisan make:controller CaptchaController --resource

It will create one controller file called the CaptchaController.php file.

Define validation and captcha code in the controller file.

<?php

namespace App\Http\Controllers;

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

class CaptchaController extends Controller
{
    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        return view('captchacreate');
    }

    public function captchaValidate(Request $request)
    {
        $request->validate([
            'name'     => 'required',
            'email'    => 'required|email',
            'password' => 'required|min:6',
            'captcha'  => 'required|captcha'
        ]);
    }
    public function refreshCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }
}

Step 4: Define Routes

We list the route in routes >> web.php file. So let us do it.

Route::group(['namespace' => 'App\Http\Controllers\Auth'],function()
{
    // ----------------------------login--------------------------------//
    Route::controller(LoginController::class)->group(function () {
        Route::get('/login', 'login')->name('login');
        Route::post('/login', 'authenticate');
        Route::get('/logout', 'logout')->name('logout');
    });

    // ------------------------- register ------------------------------//
    Route::controller(RegisterController::class)->group(function () {
        Route::get('/register', 'create')->name('register');
        Route::post('/register','captchaValidate')->name('register');    
        Route::get('refresh/captcha','refreshCaptcha')->name('refresh/captcha');    
    });
});

Step 5: Create one view file

Create a file in the resources  >>  views  >>   captchacreate.blade.php and set the following code.

<span class="captcha">{!! captcha_img() !!}</span>
<button type="button" class="btn btn-success"><i class="fa fa-refresh" id="refresh"></i></button>

<script type="text/javascript">
    $('#refresh').click(function(){
      $.ajax({
         type:'GET',
         url:'refresh/captcha',
         success:function(data){
            $(".captcha").html(data.captcha);
         }
      });
    });
</script>

Step 6: Custom captcha

Then move to config >> captcha.php file and change the below code:

<?php

use Illuminate\Support\Str;
return [
    'default' => [
        'length'  => 3,
        'width'   => 120,
        'height'  => 36,
        'quality' => 90,
        'math'    => true,
        'expire'  => 60,
        'encrypt' => false,
    ],
];

Clear Cache:

php artisan optimize

Serve the Application:

Finally, you can use the following command to start the Laravel development server:

php artisan serve

1. This will make your application accessible http://localhost:8000 by default.

2. Read more document:https://github.com/mewebstudio/captcha