Laravel - Generate Captcha code and Validation example using BotDetect package

I think we should use captcha code on our registration form because captcha code prevent spams, bots etc. Most of the application we need to use captcha varification because it very important for security reason. There are several library to generate captcha image in Laravel. In this example i use BotDetect package library for generate captcha image and using their validation. BotDetect is very popular library and very customize library. they provide several ui design for captcha code and also how much character do you want?, you can set all the thing using this package.

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:

Preview:

Step 1: Installation

In first step we will install captcha-com/laravel-captcha package for generate captcha code image. this package through we can generate generate captcha code image for our project. so first fire bellow command in your cmd or terminal:

composer require captcha-com/laravel-captcha:"4.*"

Now we need to add provider path and alias path in config/app.php file so open that file and add bellow code.

config/app.php

return [
	......
	$provides => [
		......
		......,
		LaravelCaptcha\Providers\LaravelCaptchaServiceProvider::class
	],
	.....
]

Now we will run bellow command that way it will generate app/captcha.php file for configration and we can change and customize easily.

php artisan vendor:publish

Step 2: Add Route

In second step we will add new two route for creating small example that way we can undestand very well. so first add bellow route in your routes.php file.

app/Http/routes.php

Route::get('web-register', 'Auth\AuthController@webRegister');
Route::post('web-register', 'Auth\AuthController@webRegisterPost');

Step 3: Add Controller Method

In this step we will add webRegister() and webRegisterPost() method in AuthController Controller file for our example. If you want to copy whole controller file then also you can just copy and paste.

app/Http/Controllers/Auth/AuthController.php

namespace App\Http\Controllers\Auth;

use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
use Auth;
use Illuminate\Http\Request;

class AuthController extends Controller
{

    use AuthenticatesAndRegistersUsers, ThrottlesLogins;

    protected $redirectTo = '/';

    /**
     * Create a new authentication controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
        ]);
    }

    public function webRegister()
    {
        return view('webRegister');
    }

    public function webRegisterPost(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|same:password_confirmation',
            'password_confirmation' => 'required',
            'CaptchaCode' => 'required|valid_captcha'
        ]);
        print('write your other code here.');
    }
}

Step 4: Add Blade file

This is a last step and you have to just create new blade file webRegister.blade.php and put bellow code on that file.

resources/views/webRegister.blade.php

@extends('layouts.app')

@section('content')
<link href="{{ captcha_layout_stylesheet_url() }}" type="text/css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-primary">
                <div class="panel-heading">Register</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/web-register') }}">
                        {!! csrf_field() !!}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Name</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="name" value="{{ old('name') }}">
                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password">

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Confirm Password</label>

                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password_confirmation">

                                @if ($errors->has('password_confirmation'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('CaptchaCode') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">Captcha</label>

                            <div class="col-md-6">
                                {!! captcha_image_html('ContactCaptcha') !!}
                                <input class="form-control" type="text" id="CaptchaCode" name="CaptchaCode" style="margin-top:5px;">

                                @if ($errors->has('CaptchaCode'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('CaptchaCode') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <br/>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-btn fa-user"></i>Register
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Try this.. if you want to more custom captcha then you can do from here : captcha.com.