How to Create Laravel CAPTCHA using jQuery AJAX

How to Create Laravel CAPTCHA using jQuery AJAX

In this Post We Will Explain About is How to Create Laravel CAPTCHA using jQuery AJAX With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5.2 Basic BotDetect CAPTCHA Example

In this post we will show you Best way to implement How to create CAPTCHA image verification in Laravel and jQuery, hear for How to Create CAPTCHA using Laravel and jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1 : Install Laravel 5.5 web-Application

I am Learning Laravel application from scratch, Therefore I need to download as well as install fresh Laravel 5.5 version web-application using bellow source command, Therefore open your terminal OR (CMD)command prompt and Execute bellow some source command:

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

Phase 2: Install mews Captcha Package

Now, I have to Put mews Captcha package Therefore one your cmd or terminal and run bellow source command:

composer require mews/captcha

And then all the success install Laravel Captcha all libs package, and then open simple path like as a config/app.php file and Put some array values service provider and alias.

Also Read :   Laravel 5.6 Generate PDF from html view file and download using dompdf

config/app.php

// here put source code providers and aliases array
'providers' => [
	//....available class
	Mews\Captcha\CaptchaServiceProvider::class,
],
'aliases' => [
	//....available class
	'Captcha' => Mews\Captcha\Facades\Captcha::class,
],

Phase 3: Create Routes

After that, I require to Put three simple routes display first of all the login form, second one post login form and another for some uniq refresh captcha source code. Therefore open your simple http main directory to routes/web.php file and Put following this route.

routes/web.php

Route::get('my-captcha', 'LiveController@liveCaptcha')->name('liveCaptcha');
Route::post('my-captcha', 'LiveController@liveCaptchaPost')->name('liveCaptcha.post');
Route::get('refresh_captcha', 'LiveController@refreshCaptcha')->name('refresh_captcha');

Phase 4: Make LiveController Methods

And Then I require to Make LiveController and Put new three methods as liveCaptcha(), liveCaptchaPost() and refreshCaptcha(). Therefore let’s Make laravel controller and then put bellow some source code:

routes/web.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class LiveController extends Controller
{
    public function liveCaptcha()
    {
        return view('liveCaptcha');
    }
    public function liveCaptchaPost(Request $request)
    {
        request()->validate([
            'email' => 'required|email',
            'password' => 'required',
            'captcha' => 'required|captcha'
        ],
        ['captcha.captcha'=>'Invalid captcha code.']);
        dd("Good You are here :) .");
    }
    public function refreshCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }
}

Phase 5: Make View File

At last Phase, I have to simple Make views sideliveCaptcha.blade.php file and we need to write source code there for generate dynemically bootstrap login form, as well as jquery ajax source code. Therefore let’s copy and past bellow some source code:

Also Read :   HTTP Session Management Using Laravel

resources/views/liveCaptcha.blade.php

<html lang="en">
<head>
<!-- Devloped by http://live24u.com free download examples -->
    <title>How to Make captcha code in Laravel 5.5 step by step</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
	<!--font-awesome.min.css -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<!-- jquery.min.js -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Devloped by http://live24u.com free download examples -->
<div class="live24u container" style="margin-top: 60px">
   <div class="live24u col-sm-8 col-sm-offset-2">
      <div class="live24u panel panel-primary">
          <div class="panel-heading live24u">Login</div>
          <div class="panel-body live24u">
              <form class="live24u form-horizontal" method="POST" action="{{ route('liveCaptcha.post') }}">
                  {{ csrf_field() }}

                  <div class="live24u form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                      <label for="email" class="live24u col-sm-4 control-label">E-Mail Address</label>
                      <div class="live24u col-sm-6">
                          <input id="email" type="text" class="live24u form-control" name="email" value="{{ old('email') }}">
                          @if ($errors->has('email'))
                              <span class="live24u help-block">
                                  <strong>{{ $errors->first('email') }}</strong>
                              </span>
                          @endif
                      </div>
                  </div>
                  <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                      <label for="password" class="live24u col-sm-4 control-label">Password</label>
                      <div class="live24u col-sm-6">
                          <input id="password" type="password" class="live24u form-control" name="password">
                          @if ($errors->has('password'))
                              <span class="live24u help-block">
                                  <strong>{{ $errors->first('password') }}</strong>
                              </span>
                          @endif
                      </div>
                  </div>
                  <div class="form-group{{ $errors->has('captcha') ? ' has-error' : '' }}">
                      <label for="password" class="live24u col-sm-4 control-label">Captcha</label>
                      <div class="live24u col-sm-6">
                          <div class="live24u captcha">
                          <span>{!! captcha_img() !!}</span>
                          <button type="button" class="live24u btn btn-success live-btn-ref"><i class="live24u fa fa-refresh"></i></button>
                          </div>
                          <input id="captcha" type="text" class="live24u form-control" placeholder="Enter Captcha" name="captcha">
                          @if ($errors->has('captcha'))
                              <span class="live24u help-block">
                                  <strong>{{ $errors->first('captcha') }}</strong>
                              </span>
                          @endif
                      </div>
                  </div>
                  <div class="live24u form-group">
                      <div class="live24u col-sm-8 col-sm-offset-4">
                          <button type="submit" class="live24u btn btn-success">
                              Submit
                          </button>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>
</body>

<script type="text/javascript">
$(".live-btn-ref").click(function(){
  $.ajax({
     type:'GET',
     url:'/refresh_captcha',
     success:function(data){
        $(".captcha span").html(data.captcha);
     }
  });
});
</script>
</html>

And Then I am All the source code ready to execute simple captcha code example so execute bellow source command for quick way execute:

Also Read :   Laravel JQuery AJAX Pagination Step By step

php artisan serve

And Then Last step to run project you can open this bellow Web URL on your any browser:

http://localhost:8000/my-captcha

Laravel Captcha Download Source code

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is How to create CAPTCHA image verification in Laravel and jQuery And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.