在 Laravel 登录/注册中使用 mews/captcha 扩展包

2018-08-10
2分钟阅读时长

前言

在网站中,为了防止恶意通过数据字典撞库攻击、注册机批量注册账号,会使用一些防范措施,比如图片验证码、手机验证码、手势验证码Geetest。今天就介绍一下如何使用 mews/captcha 扩展包防止恶意注册。

用户认证脚手架

Laravel 自带了 用户认证功能,我们将使用此功能来快速构建登录注册。

首先执行生成用户认证脚手架命令:

$ php artisan make:auth

.env 中配置数据库连接信息:

...

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=数据库名称
DB_USERNAME=数据库用户名
DB_PASSWORD=数据库密码

...

执行迁移,创建用户认证相关表结构:

$ php artisan migrate

运行结果:

$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

这时候你打开数据库就能看到 migrationsusers 两张表,migrations 是用来记录数据库迁移日志的,users 则是用户表,用于登录/注册。

手动在浏览器中打开 http://127.0.0.1:8000/register,就能看到注册界面了。

http://127.0.0.1:8000 使用的是 PHP 内置的服务器,可以使用 php artisan serve 命令来启动 PHP 服务器,你也可以使用自己的运行环境。

这里写图片描述
这里写图片描述

安装 Captcha

上一篇文章 中已经介绍过如何安装 Captcha,这里就不赘述了。

使用 Captcha

修改注册视图文件

首先要在确认密码输入框下面加入一个验证码输入框及图片验证码。

打开 resources/views/auth/register.blade.php 视图文件,添加如下代码:

...

<div class="form-group{{ $errors->has('code') ? ' has-error' : '' }}">
    <label for="password-confirm" class="col-md-4 control-label">Verification Code</label>
    <div class="col-md-3">
        <input id="password-confirm" type="text" class="form-control" name="code" required>
        @if ($errors->has('code'))
            <span class="help-block">
                <strong>{{ $errors->first('code') }}</strong>
            </span>
        @endif
    </div>
    <div class="col-md-3">
        <img src="{{ captcha_src() }}" alt="点击刷新" onclick="this.src='{{ url('captcha/default') }}?s='+Math.random()">
    </div>
</div>

...

刷新注册页面:

这里写图片描述
这里写图片描述

修改注册控制器

接下来就是在校验参数的方法中增加校验验证码的规则,打开 app/Http/Controllers/Auth/RegisterController.php,修改 validator 方法:

protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:6|confirmed',
        'code' => 'required|captcha',
    ]);
}

验证 Captcha

故意输入错误的验证码:

这里写图片描述
这里写图片描述

可以看到验证码的输入框变成了红色,但是提示的信息 validation.captcha 有点问题,并不是正确的提示语。

我们需要手动配置验证失败的提示语,打开 resources/lang/en/validation.php 文件,在 key 为 url 后下面一行添加提示语:

'url'                  => 'The :attribute format is invalid.',

'captcha'              => '验证码错误。',

再次输入错误的验证码,就可以看到配置的提示语了:

这里写图片描述
这里写图片描述

最后我们按照规则输入正确的参数,就可以通过验证注册成功了:

这里写图片描述
这里写图片描述

本文作者:她和她的猫
本文地址https://her-cat.com/posts/2018/08/10/use-of-mews-captcha-in-laravel-login-register/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!