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

前言

在网站中，为了防止恶意通过数据字典撞库攻击、注册机批量注册账号，会使用一些防范措施，比如图片验证码、手机验证码、手势验证码、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

这时候你打开数据库就能看到 migrations、users 两张表，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'              => '验证码错误。',

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

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