Laravel怎样实现图形验证码登录的效果?

这篇文章给大家分享的是Laravel图形验证码登录的实现。小编觉得挺实用的，在很多登录场景都能应用，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

一、 安装扩展包

composer require gregwar/captcha

二、定义路由

//路由分组
Route::group(['prefix'=>
    'admin','namespace'=>
'Admin'],function (){
    

    //登录显示 name给路由起一个别名
    Route::get('login','LoginController@index')->
    name('admin.login');
    

    //登录方法 name给路由起一个别名
    Route::post('login','LoginController@login')->
    name('admin.login');
    

    //定义图形验证码路由
    Route::get('img_code','CommonController@imgCode')->
    name('admin.img_code');

}
    );
    

三、 生成图形验证码类

?php

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
{

    //验证码
    public function imgCode()
    {
    
        $phrase = new PhraseBuilder;
    
        // 设置验证码位数
        $code = $phrase->
    build(4);
    
        // 生成验证码图片的Builder对象，配置相应属性
        $builder = new CaptchaBuilder($code, $phrase);
    
        // 设置背景颜色25,25,112
        $builder->
    setBackgroundColor(34, 0, 45);
    
        // 设置倾斜角度
        $builder->
    setMaxAngle(25);
    
        // 设置验证码后面最大行数
        $builder->
    setMaxBehindLines(10);
    
        // 设置验证码前面最大行数
        $builder->
    setMaxFrontLines(10);
    
        // 设置验证码颜色
        $builder->
    setTextColor(230, 81, 175);
    
        // 可以设置图片宽高及字体
        $builder->
    build($width = 150, $height = 40, $font = null);
    
        // 获取验证码的内容
        $phrase = $builder->
    getPhrase();
    

        // 把内容存入 cache，10分钟后过期
        $client_id = md5( rand(1,1000).time());
    
        \Cache::put($client_id, $phrase, Carbon::now()->
    addMinutes(10));
    

        // 组装接口数据
        $data = [
            'client' =>
     $client_id,
            'captcha' =>
     $builder->
    inline(),
        ];
    
        return $data;

    }

}
    


![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8034e8b8f6ac4f0abe121f296591e3bd~tplv-k3u1fbpfcp-watermark.image)

四、接口调用

script>

    //页面加载完毕事件
    $(function(){
    
        getCaptCha();

    }
    );


    //获取图形验证码的方法
    var getCaptCha = function (){

        $.ajax({

            url:"{
{
route('admin.img_code')}
}
",
            success(res){
    
                $("#client").val(res.client);
    
                $("#img_code").attr('src',res.captcha);

            }

        }
)
    }
    

/script>
    

五、页面展现

 input type="hidden" id="client" name="client" >
    

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="验证码" onblur="if(this.value=='')

{
this.value='验证码:'}
" onclick="if(this.value=='验证码:'){
    this.value='';
}
    " value="" style="width:150px;
    ">
    
                    img id="img_code" src="" onclick="getCaptCha()">
     a id="kanbuq" onclick="getCaptCha()" href="javascript:;
    " 

rel="external nofollow" >
    看不清，换一张/a>
     /div>
    
            /div>

前台页面实现效果：

六、后台登录接口进行校验验证码是否正确

 //登录方法
    public function login(Request $request)
    {
    
        //接收所有参数
        $params = $request->
    all();
    
        //取出验证码是否一致
        $captcha = \Cache::get($params['client']);

        if ($params['captcha'] != $captcha){
    
            return redirect(route('admin.login'))->
    withErrors(['error' =>
     '验证码错误']);

        }

    }
    

以上就是关于Laravel图形验证码登录的实现，本文只是提供了一种实现思路，代码仅供参考，需要的朋友可以了解看看，希望对大家学习laravel框架有帮助，想要了解更多可以继续浏览网络其他相关的文章。

文本转载自脚本之家

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！