【Laravel实战】mews/captcha 验证码安装、使用，附Ajax验证完美解决方案

目前在Laravel中主流使用的验证码解决方案都是：mews/captcha，安装使用都比较简单与方便，但对Ajax验证支持不太友好，我将在后面附原因与我的完美解决方案。

一、安装

1、通过命令下载：

安装一般有2个方案，通过我们都使用下面的命令：

composer require mews/captcha

即可完成安装工作，当然我们也可以编辑：composer.json文件，通常使用上面的命令就可以了！会在composer.json的 require 增加一项： "mews/captcha": "^3.2",并在composer.lockd文件里增加依赖信息。

2、在Laravel里加载：

打开 config/app.php 找到：

'providers' => [
     // 在此数组里增加下面的代码
     'MewsCaptchaCaptchaServiceProvider',
]

再找到：

'aliases' => Facade::defaultAliases()->merge([
     // 在此数组里增加下面的代码
     'Captcha' => MewsCaptchaFacadesCaptcha::class, //验证码
])->toArray(),

到此，验证码的加载工作就算完成了，这里将会使用mews/captcha的默认配置信息，如果我们需要自定配置，还需要使用下面的命令对mews/captcha 发布操作：

php artisan vendor:publish

输入 captcha 对应的编号后，会生成 config/captcha.php 文件，打开后就可以编辑验证码的配置了！下面是我的验证码配置及说明：

'default' => [
    'length' => 4,//验证码长度
    'width' => 120,//图片宽
    'height' => 36,//图片高
    'quality' => 90,//透明度
    'math' => false, //数学计算(关闭)
    'expire' => 60,//有效时间(秒)
    'encrypt' => false,//加密(否)
],

通过情况下，我们使用default 默认即可。

二、使用

上面安装与配置好验证码后，我们要怎么使用呢？首先可以查看一下是否有相关路由：

php artisan route:list

GET|HEAD        captcha/api/{config?} ......... MewsCaptcha › CaptchaController@getCaptchaApi
GET|HEAD        captcha/{config?} ............. MewsCaptcha › CaptchaController@getCaptcha 

可以尝试访问一下，路由就会生成验证码图片。

1、生成验证码

下面我们就可以在模板里引入验证码图片了：

调用方法生成图片：
{{captcha()}}

调用方法只返回URL：


同上的HTML方法：
{{captcha_img()}}

 2、提交并验证

在控制器里接受并验证代码：

//验证输入
$request->validate([
    'message' => 'required|min:2|max:2048', //评论内容
    'captcha' => 'required|size:4|captcha', //验证码会自动验证哦~
    'id' => 'required|numeric|exists:posts', //文章ID
]);

如果验证未通过，可能提示信息不正确的情况，我们可以修改语言包替换我们自己安装的信息，打开中文语言包：lang/zh_CN/validation.php

找到 custom 自定义字段:

'custom'               => [
    'captcha' => [
        'required' => '验证码不能为空。',
        'captcha' => '验证码输入错误。',
    ],
],

如果我们在输入时就想验证，就需要使用到下面的ajax了，比如本文的评论就是使用了Ajax验证。

三、Ajax 验证

 mews/captcha 在使用Ajax验证的时候有一个问题，由于其机制为：

$check = $this->hasher->check($value, $key);
// 如果验证通过，删除session里的captcha项
if ($check) {
    $this->session->remove('captcha');
}

所以，导致我测试了很久都不行，因为验证码只能使用一次，只要通过验证了，验证码就无效了，为了处理这个问题，我在Ajax路由里使用了下面的代码：

//Ajax验证码
Route::post('/captcha', function () {
    $rules = ['captcha' => 'required|captcha'];
    $captcha = session()->get('captcha'); //验证前获取到captcha
    $validator = validator()->make(request()->all(), $rules);
    if ($validator->fails()) {
        $message = '验证码输入错误';
    } else {
        //在文件 vendor/mews/captcha/src/Captcha.php 里函数：
        //function check() 验证成功后会 session->remove('captcha')
        session()->put('captcha', $captcha); //验证后重新写入到 'captcha' 以供表单提交时验证
        $message = 'success';
    }
    return response()->json([
        'message' =>  $message,
    ]);
})->name('captcha');

网上很多方案都是直接修改 mews/captcha 的源代码，这种方案肯定不是我想要的，我只需要绕过 remove 语句，在不影响功能的情况下预先ajax验证一次即可~

我的HTML代码参考：

$(":input[name='captcha']").blur(function() {       
    if ($(this).val().length == 4) {
        $.ajax({
            type: "POST",
            url: '{{route('captcha')}}',/* 路由地址 */
            data: {
                captcha: $(this).val(),
                _token:'{{csrf_token()}}'                
            },
            success: function(data) {
                $("#seccode").html((data.message == 'success') ?
                    '<i class="text-success fa" title="验证码输入正确，可以提交！">ok</i>' : 
                    '<i class="text-danger fa" title="验证码输入有误，请点击刷新后重新输入！">error</i>');
            }
        });
    }
});

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/219