上一级我们的登录注册都已经完美的实现了,登录部分,还有个验证码现在还是假的。我们这一集就来实现这个功能。

验证码也需要用到captcha这个composer包 https://github.com/mewebstudio/captcha

先来用这个命令,将包装上

composer require mews/captcha

Tips: 装完后,用windows的同学们请注意,请务必确认下php_gd2.dllphp_mbstring.dllphp_fileinfo这三个扩展开启了,验证码才能正常运行。

再来跑这个命令,生成验证码的配置文件

php artisan vendor:publish

屏幕提示:

Which provider or tag's files would you like to publish?:
 [0 ] Publish files from all providers and tags listed below
 [1 ] Provider: Fideloper\Proxy\TrustedProxyServiceProvider
 [2 ] Provider: Illuminate\Mail\MailServiceProvider
 [3 ] Provider: Illuminate\Notifications\NotificationServiceProvider
 [4 ] Provider: Illuminate\Pagination\PaginationServiceProvider
 [5 ] Provider: Intervention\Image\ImageServiceProviderLaravel5
 [6 ] Provider: Mews\Captcha\CaptchaServiceProvider
 [7 ] Tag: config
 [8 ] Tag: laravel-mail
 [9 ] Tag: laravel-notifications
 [10] Tag: laravel-pagination

这里选择 6,也就是Captcha这个包。 这样在config中,就会出现一个叫做captcha.php的配置文件。这里存放的都是跟验证码相关的配置了。这里有一个

'length'    => 4,

也就是验证码的长度,5位我觉得有点多了,那么我把它改为4位,其他的配置都保持默认就好。

修改html

找到登录页面的验证码部分,改为

<img src="{{captcha_src()}}" style="cursor: pointer;">

刷新页面,现在验证码能正常显示了。这里有点不方便的时候,有时候生成的验证码,我们看不清楚,最好是能点击这个图片后,验证码能重新得到一个新的。 那么就修改这行代码为

<img src="{{captcha_src()}}" alt="" style="cursor: pointer;" onclick="this.src='{{captcha_src()}}'+ Math.random();">

也就是点击后,我们重新去获取这个验证码,并且带上一个随机数,不然有的浏览器有缓存,图片可能不会更新。

添加验证

现在来提交一下表单,发现验证码不填,或者填个错误的,也能登录。这就说明,刚才做的验证码没有生效。

手册中,只告诉了我们,应该使用required|captcha来验证,那具体怎么实现呢? 解决的方案是,到LoginController中添加这样的方法

//...
use Illuminate\Http\Request;

class LoginController extends Controller
{
    //...

    protected function validateLogin(Request $request)
    {
        $this->validate($request, [
            'captcha' => 'required|captcha',
            $this->username() => 'required|string',
            'password' => 'required|string',
        ]);
    }
}

再来测试,验证码可以正常使用。提示信息有点小问题。

vendor/caouecs/laravel-lang/src/zh-CN中,增加下面的代码。

return [
    'captcha' => ':attribute 填写错误。',
    //...

    'attributes'           => [
    'captcha' => '验证码',
         //...
     ];
];

现在再来看就完美了。

关于验证码,为什么这样写就才能用。我们下一集要学习一个叫做trait新知识。学习后,你就知道为什么这样做就可以实现验证了。