In todays's tutorial, we are going to learn how to intergrade captcha with our Laravel application. When we considering about the security of our application, it's play a major role to enhance our application's security. Basically captcha is something like a text on image which can be readable by humans. So, in this tutorial, we are implement captcha validation using mews/captcha package.

Install mews/captcha package

Firstly, we need to install required Laravel package, which we are going to use in this tutorial. As I previously mentioned, we are used mews/captcha package in this tutorial. To install above package run below command in your terminal. 
1
composer require mews/captcha

After installed this package, we need to configure this package in our providers array and alias array in config/app.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'providers' => [

  ....

  Mews\Captcha\CaptchaServiceProvider::class,

],

'aliases' => [

  ....

  'Captcha' => Mews\Captcha\Facades\Captcha::class,

],

Create Controller

Now we need to create our controller which is going to hold our functions related to captcha. To create controller run below command in your terminal. 
1
php artisan make:controller CaptchaController

After that paste below code in newly created CaptchaController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class CaptchaController extends Controller
{
    public function index()
    {
        return view('captcha');
    }

    public function submitCaptcha(Request $request)
    {
        request()->validate([
            'email' => 'required|email',
            'password' => 'required',
            'captcha' => 'required|captcha'
        ],
        [
            'captcha.captcha'=>'Invalid captcha code.'
        ]);
        exit("You are here :) .");
    }

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

Create view

Navigate to resources/views/welcome.blade.php and paste below code in it. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html lang="en">
<head>
    <title>How to integrate simple captcha in Laravel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
<div class="container" style="margin-top: 50px">
   <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          
            <div class="panel-body">
                <form class="form-horizontal" method="POST" action="{{ route('submit.captcha') }}">
                    {{ csrf_field() }}

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

                        <div class="col-md-6">
                            <input id="email" type="text" 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 for="password" class="col-md-4 control-label">Password</label>


                        <div class="col-md-6">
                            <input id="password" 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('captcha') ? ' has-error' : '' }}">
                        <label for="password" class="col-md-4 control-label">Captcha</label>

                        <div class="col-md-6">
                            <div class="captcha">
                            <span>{!! captcha_img() !!}</span>
                            <button type="button" class="btn btn-success btn-refresh"><i class="fa fa-refresh"></i></button>
                            </div>
                            <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">


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

                    <div class="form-group">
                        <div class="col-md-8 col-md-offset-4">
                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

$(".btn-refresh").click(function(){
  $.ajax({
     type:'GET',
     url:'/refresh_captcha',
     success:function(data){
        $(".captcha span").html(data.captcha);
     }
  });
});

</script>

</html>

Create Routes

Navigate to routes/web.php and paste below code in it. 
1
2
3
4
5
6
7
8
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CaptchaController;
 
Route::get('/', [CaptchaController::class, 'index'])->name('get.captcha');
Route::post('/my-captcha', [CaptchaController::class, 'submitCaptcha'])->name('submit.captcha');
Route::get('/refresh_captcha', [CaptchaController::class, 'refreshCaptcha'])->name('refresh.captcha');

Check Application

Now we have finished with our configuration part. To get location information, run below command in your terminal: 
1
php artisan serve

After that visit http://127.0.0.1:8000/

Conclusion

In this tutorial, we implemented intergrade captcha with our Laravel application. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail.You can obtain complete source code for this tutorial from this GitHub repository.

Happy Coding