Laravel - 验证码

安装扩展包

使用 Composer 安装：

  composer require "mews/captcha:~2.0"

运行以下命令生成配置文件 config/captcha.php：

  php artisan vendor:publish --provider='Mews\Captcha\CaptchaServiceProvider'

我们可以打开配置文件（config/captcha.php），查看其内容：

<?php

return [
    //验证码随机种子可以是数组，也可以是字符串
    'characters' => '012346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',
//    'characters' => ['2', '3', '4', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'm', 'n', 'p', 'q', 'r', 't', 'u', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'X', 'Y', 'Z'],
    'default' => [
        'length' => 4,
        'width' => 120,
        'height' => 36,
        'quality' => 90,
        'math' => false,
    ],
    'math' => [
        'length' => 9,
        'width' => 120,
        'height' => 36,
        'quality' => 90,
        'math' => true,
    ],

    'flat' => [
        'length' => 6,
        'width' => 160,
        'height' => 46,
        'quality' => 90,
        'lines' => 6,
        'bgImage' => false,
        'bgColor' => '#ecf2f4',
        'fontColors' => ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
        'contrast' => -5,
    ],
    'mini' => [
        'length' => 3,
        'width' => 60,
        'height' => 32,
    ],
    'inverse' => [
        'length' => 5,
        'width' => 120,
        'height' => 36,
        'quality' => 90,
        'sensitive' => true,
        'angle' => 12,
        'sharpen' => 10,
        'blur' => 2,
        'invert' => true,
        'contrast' => -5,
    ]
];

页面嵌入

1. 前端展示

注册页面模板 register.blade.php

<div class="layui-form-item">
	<label class="layui-icon layui-icon-vercode" for="captcha"></label>
	<input type="text" name="captcha"  placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" lay-verify="captcha" value="">
	<div class="captcha-img">
		<img id="captchaPic" src="{{ captcha_src('default') }}" onclick="changeCaptcha(this)">
	</div>
</div>
<script src="jquery路径" charset="utf-8"></script>
<script src="jquery路径" charset="utf-8">
     function changeCaptcha(obj) {
        console.log('{{ captcha_src('default') }}' );
        $(obj).attr('src','{{ captcha_src('default') }}'+Math.random());
    }
</script>

2. 后端验证

在请求控制器创建方法

 public function login(Request $request){
     $validator = Validator::make($request->all(), [
     	'captcha' => 'required|captcha'
     ],[
         'captcha.required'=>'验证码必须填写',
         'captcha.captcha'=>'验证码填写错误'
     ]);
     if ($validator->fails()) {
         $error = $validator->errors()->first();
         return $error
     }
 }