使用 mews/captcha 扩展包为 Laravel 应用添加图片验证码

安装扩展包

mews/captcha 是一个图片验证码扩展包，通过它我们能够快速的为 Laravel 增加验证码的功能。

使用 Composer 安装扩展包：

$ composer require mews/captcha

如果是在 Windows 环境中，需要在 php.ini 文件中取消 php_gd2.dll、php_fileinfo.dll、php_mbstring.dll 的注释，这些都是 mews/captcha 依赖的组件。

打开 config/app.php 。

在 key 为 providers 的数组中注册 Captcha 服务提供者。

'providers' => [
    // ...
    Mews\Captcha\CaptchaServiceProvider::class,
]

在 key 为 aliases 的数组中注册 Captcha 别名。

'aliases' => [
    // ...
    'Captcha' => Mews\Captcha\Facades\Captcha::class,
]

生成配置文件 config/captcha.php。

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

打开 config/captcha.php 文件，其中有四种图片验证码的配置，通过修改里面的参数来调整生成的验证码的规则，你可以通过新建一个 key 创建新的配置，这里我们使用的默认的配置(default)。

return [

    // 生成的验证码字符集
    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',

    'default'   => [
        'length'    => 5,   // 验证码字符长度
        'width'     => 120, // 图片长度
        'height'    => 36,  // 图片高度
        'quality'   => 90,  // 图片质量
    ],

    'flat'   => [...],

    'mini'   => [...],

    'inverse'   => [...]

];

小试牛刀

接下来我们用一个发布帖子的例子来展示如何在 Laravel 中使用 Captcha。

首先在 routes/web.php 文件中添加相关路由。

Route::get('posts/create', 'PostsController@showCreateForm')->name('posts.create');

Route::post('posts', 'PostsController@store')->name('posts.store');

创建 PostsController 控制器。

$ php artisan make:controller PostsController

在 PostsController 中添加路由中对应的方法。

/*
 * 显示发布帖子的表单
 */
public function showCreateForm() 
{
    return view('posts.create');
}

/*
 * 保存一篇新的帖子
 * @param Request $request
 */
public function store(Request $request)
{
    // 验证并存储帖子...
}

创建视图文件 resources/views/posts/create.blade.php，其中 @if ($errors->any()) 代码片段是用输出表单验证失败时的错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>发布帖子</title>
</head>
<body>
    @if ($errors->any())
        <ul style="color:red;">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    @endif
    <form action="{{ route('posts.store') }}" method="post">
        帖子标题：<input type="text" name="title">  <br/>
        帖子内容：<input type="text" name="content"> <br/>
        验 证 码：<input type="text" name="code"> <img src="{{ captcha_src() }}" alt="点击刷新" onclick="this.src='{{ url('captcha/default') }}?s='+Math.random()"> <br/>
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="submit" value="提交">
    </form>
</body>
</html>

在浏览器中打开 http://127.0.0.1:8000/posts/create 就可以看到这个页面了，点击验证码可以刷新验证码。

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

接下来在 store 方法中编写验证表单的的逻辑。

/**
* 保存一篇新的帖子
* @param Request $request
*/
public function store(Request $request)
{
    // 验证表单的规则
    $rules = [
        'title' => 'required|string|max:255',
        'content' => 'required|string|max:1000',
        'code' => 'required|captcha',
    ];

    // 使用 rules 验证表单
    $request->validate($rules);

    // 验证成功则存入数据库
    
    echo '添加成功';
}

这里用到了 Laravel 中的表单验证，不清楚的可以先看一下表单验证机制详解

'code' => 'required|captcha' 表示 code 这个参数是必需的，并使用 captcha 规则来验证该字段。然后使用 Request 对象中的 validate 方法对请求的参数进行校验。

如果验证失败则会返回到来源页面，并将验证失败的错误信息存到 Session 中，在页面上可以通过 $errors->all() 来获取错误信息。

如果我们什么都不填，直接提交表单，就会看到如下图的提示。

如果按照 $rules 的验证规则来填写表单就可以看到 发布成功 ，表示参数都已经通过验证了。

Captcha 相关方法

// 获取验证码图片
captcha(); // Captcha::create();

// 获取验证码图片地址（http://127.0.0.1:8000/captcha/default?Lh6ngrPi）
captcha_src(); // Captcha::src();

// 获取验证码 HTML (<img src="http://127.0.0.1:8000/captcha/default?Lh6ngrPi" >)
captcha_img(); // Captcha::img();

// 使用其它配置
captcha_src('flat'); // Captcha::src('flat');