افزودن Captcha و کار با آن

برای کار با کپچا شما می توانید از کپچاهای معروف زیادی همچون reCaptcha استفاده کنید اما من از یک کپچای خوب که کار با آن آسان است در این آموزش استفاده خواهم کرد.
ابتدا با ترمنیال به مسیر پروژه لاراول بروید و دستور زیر را تایپ و اجرا کنید:
composer require mews/captcha


سپس در فایل config/app.php بخش providers خط زیر را به انتهای آن اضافه کنید :
        'Mews\Captcha\CaptchaServiceProvider',

همچنین خط زیر را هم به انتهای بخش aliases اضافه کنید :
'Captcha' => 'Mews\Captcha\Facades\Captcha',

در پایان هم دستور زیر را احرا کنید :
php artisan vendor:publish


اکنون می توانیم از کپچا در فرم ها استفاده کنیم. با یک مثال کاربردی نحوه استفاده از آن را توضیح خواهم داد. طبق خواسته یکی از کاربران این مثال را در فرم لاگین انجام می دهم.
ابتدا فایل login.blade.php در مسیر resources/views/auth رو به این صورت ویرایش میکنیم :
کد HTML:
<form class="form-horizontal" role="form" method="POST" action="{{ url('/auth/login') }}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">

                        <div class="form-group">
                            <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') }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">Captcha Code</label>
                            <div class="col-md-6">
                                {!! Captcha::img('flat') !!}
                                <input type="text" class="form-control" name="captcha">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember"> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

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

                                <a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a>
                            </div>
                        </div>
                    </form>
همانطور که مشاهده می کنید با دستور Captcha::img('flat') تصویر کپچا نمایش داده می شود و من چون می خواستم ابعاد تصویر کمی بزرگتر باشد از flat استفاده کردم که می توانید در فایل config/captcha.php تنظیمات مربوط به ابعاد و رنگ ها را به دلخواه خودتان تغییر دهید.

حالا یک کلاس Request هم برای اعتبار سنجی با استفاده از دستور زیر ایجاد میکنیم:
php artisan make:request LoginRequest

قوانین اعتبار سنجی را در متد rules قرار می دهیم و متد authorize را هم true می کنیم چون نیازی به احراز هویت در این درخواست نمی باشد. کلاس LoginRequest در مسیر app/Http/Requests باید مشابه مثال زیر ویرایش شود :


<?php namespace App\Http\Requests;



use App\Http\Requests\Request;



class LoginRequest extends Request {



    /**

     * Determine if the user is authorized to make this request.

     *

     * @return bool

     */

    public function authorize()

    {

        return true;

    }



    /**

     * Get the validation rules that apply to the request.

     *

     * @return array

     */

    public function rules()

    {

        return [

            'email'    => 'required|email',

            'password' => 'required|min:3|max:17',

            'captcha'  => 'required|captcha',

        ];

    }



}


همانطور که می بینید برای فیلد captcha یک قانون اعتبارسنجی جدید به نام captcha قرار دادیم که میاد ورودی کاربر را با کد داخل تصویر مطابقت میده و در صورتی که مغایرت داشته باشد خطایی صادر میکند. پس باید داخل مسیر resources/lang/en فایل validation.php را باز کنیم و برای آن یک پیغام مناسب ست میکنیم. پس خط زیر را به آن اضافه کنید :
"captcha"               => "The :attribute field entered is wrong",


در ادامه باید در کنترلر AuthController در مسیر app/Http/Controllers/Auth متد postLogin را بازنویسی کنیم. ابتدا به کنترلر کلاس های زیر را ایمپورت می کنیم:


use App\Http\Requests\LoginRequest;

use Request;

use Auth;


حالا متد postLogin را به این صورت اضافه کنید :


public function postLogin(LoginRequest $request)

    {

        $credentials = Request::only('email', 'password');



        if(Auth::attempt($credentials)){



            return redirect()->intended('/home');



        } else {



            return redirect()->back()->withErrors(['invalid' => 'The username or email invalid!']);

        }

    }

خب دیگه مثال به پایان رسید و الان می تونید از کپچا در فرم هایتان به همین آسانی استفاده کنید. فقط دیدم این کپچا برای رفرش کردن کد توسط کاربر گزینه ای نداره خودم یک تابع با جی کوئری براش نوشتم . ابتدا یک تصویر برای رفرش کپچا در کنار تصویر کپچا قرار دادم :
کد HTML:
 <img src="{{ asset('img/refresh.svg') }}" alt="refresh" id="refresh" width="50" height="50">
در انتها هم دستورات jquery زیر را به صفحه اضافه کردم تا با هربار کلیک روی تصویر رفرش کپچا تغییر کند.


<script type="text/javascript">

    $('document').ready(function(){

        $('#refresh').click(function(){

            var src = "{{ Captcha::src() }}";

            var timestamp = new Date().getTime();

            $("img[alt=captcha]").attr("src", src + '?' +timestamp);

        });

    });

</script>


تصویر زیر نتیجه کار را نشان می دهد. امیدوارم که این مطلب هم برایتان مفید بوده باشد.
captcha.png