1. Install the extension package

composer require gregwar/captcha

2. Define routes

// Route grouping
Route::group(['prefix'= >'admin'.'namespace'= >'Admin'].function (){

    // The login display name gives the route an alias
    Route::get('login'.'LoginController@index')->name('admin.login');

    // The login method name gives the route an alias
    Route::post('login'.'LoginController@login')->name('admin.login');

    // Define graphic captcha routing
    Route::get('img_code'.'CommonController@imgCode')->name('admin.img_code');
});
Copy the code

Third, generate graphic verification code class



      

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Carbon\Carbon;
use Gregwar\Captcha\CaptchaBuilder;
use Gregwar\Captcha\PhraseBuilder;

class CommonController extends Controller
{
    / / verification code
    public function imgCode()
    {
        $phrase = new PhraseBuilder;
        // Set the verification code number
        $code = $phrase->build(4);
        // Generate the captcha image Builder object and configure the corresponding properties
        $builder = new CaptchaBuilder($code.$phrase);
        // set the background colors to 25,25,112
        $builder->setBackgroundColor(34.0.45);
        // Set the tilt Angle
        $builder->setMaxAngle(25);
        // Set the maximum number of lines after the verification code
        $builder->setMaxBehindLines(10);
        // Set the maximum number of lines before the verification code
        $builder->setMaxFrontLines(10);
        // Set the verification code color
        $builder->setTextColor(230.81.175);
        // You can set the image width, height and font
        $builder->build($width = 150.$height = 40.$font = null);
        // Get the content of the verification code
        $phrase = $builder->getPhrase();

        // Cache the contents and expire after 10 minutes
        $client_id = md5( rand(1.1000).time());
        \Cache::put($client_id.$phrase, Carbon::now()->addMinutes(10));

        // Assemble interface data
        $data = [
            'client'= >$client_id.'captcha'= >$builder->inline(),
        ];
        return $data; }} instead! [image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8034e8b8f6ac4f0abe121f296591e3bd~tplv-k3u1fbpfcp-watermark.image)

Copy the code

Ajax calls the interface and then assigns values to the page

<script>
    // The page is loaded
    $(function(){
        getCaptCha();
    });

    // The method to obtain the graphic verification code
    var getCaptCha = function (){
        $.ajax({
            url:"{{route('admin.img_code')}}".success(res){$("#client").val(res.client);
                $("#img_code").attr('src',res.captcha);
            }
        })
    }

</script>
Copy the code

Five, page display

    <input type="hidden" id="client" name="client" >
Copy the code

       <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input name="captcha" class="input-text size-L" type="text" placeholder="Verification code" onblur="If (this.value=="){this.value=' verification code :'}" onclick="If (this.value==' verification code :'){this.value='"; }" value="" style="width:150px;">
                    <img id="img_code" src="" onclick="getCaptCha()"> <a id="kanbuq" onclick="getCaptCha()" href="javascript:;">I can't see it. Change it</a> </div>
            </div>
Copy the code

Foreground page implementation effect:

6. Background login interface verifies whether the verification code is correct

    // Login method
    public function login(Request $request)
    {
        // Accept all parameters
        $params = $request->all();
        // Check whether the verification codes are consistent
        $captcha = \Cache::get($params['client']);
        if ($params['captcha'] != $captcha) {return redirect(route('admin.login'))->withErrors(['error'= >'Verification code error']); }}Copy the code

Seven, END

The article continues to update, you can wechat search a search “ke zuo” first time to read, reply [source] I prepared the small program source and website source.