安装扩展包

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

使用 Composer 安装扩展包:

1
$ composer require mews/captcha

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

打开 config/app.php

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

1
2
3
4
'providers' => [
// ...
Mews\Captcha\CaptchaServiceProvider::class,
]

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

1
2
3
4
'aliases' => [
// ...
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]

生成配置文件 config/captcha.php

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
return [

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

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

'flat' => [...],

'mini' => [...],

'inverse' => [...]

];

小试牛刀

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

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

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

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

创建 PostsController 控制器。

1
$ php artisan make:controller PostsController

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
* 显示发布帖子的表单
*/
public function showCreateForm()
{
return view('posts.create');
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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 方法中编写验证表单的的逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 保存一篇新的帖子
* @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 相关方法

1
2
3
4
5
6
7
8
9
10
11
// 获取验证码图片
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');