简述
在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识别,极验验证码提供了一个安全可靠的滑动验证码体系,让网站开发更加安全。
先感受一下这种验证码的魅力:极验。
接入极验验证码的过程并没有想象中的那么简单,如果想在Laravel 5中使用,可以使用Laravel 5的极验验证码包LaravelGeetest,支持 Laravel 5.0 及以上版本。
地址:https://github.com/Germey/LaravelGeetest
建议阅读原项目的README文件,最新的更新都会在README中说明,而且用法介绍是最全面的。
下面简单介绍一下该工具包的使用。
注册极验账号
首先需要到极验网站注册账号,然后新建一个应用,获取到 ID 和 KEY,留作备用,后台管理页面如下。
安装
在项目地址输入命令
$ composer require germey/geetest
就可以完成该包的安装
或者可以在 composer.json
的 require
中添加
"germey/geetest": "~2.0"
然后执行
$ composer update
同样可以完成该包的安装。
配置
注册 ServiceProvider,在 config/app.php
的 providers
中添加
GermeyGeetestGeetestServiceProvider::class
在 aliases
中添加
'Geetest' => GermeyGeetestGeetest::class
然后执行
$ php artisan vendor:publish
会生成一个配置文件,config/geetest.php
和视图文件views/vendor/geetest
,视图文件中你可以自定义配置,比如修改一下验证失败后的alert
函数,修改为你想要的提示toast等。
使用
首先把刚才拿到的 ID 和 KEY 配置到 .env
文件中,因为这两个算私密内容,配置到 .env
文件中可以保证安全性。在 .env
中写入如下两行。
GEETEST_ID=0f1097bef7xxxxxx9afdeced970c63e4 GEETEST_KEY=c070f0628xxxxxxe68e138b55c56fb3b
其中 ID 和 KEY 换成你自己的。
然后,在任意的视图里,我们只需要调用
{!! Geetest::render() !!}
就可以得到验证码了。
比如我们最常用的表单里
<form action="/" method="post"> <input name="_token" type="hidden" value="{{ csrf_token() }}"> <input type="text" name="name" placeholder="name"> {!! Geetest::render() !!} <input type="submit" value="submit"> </form>
通过如上代码就可以完成验证码的生成了,样例如下:
另外还可以指定验证码的另外两种样式。
{!! Geetest::render('embed') !!} {!! Geetest::render('popup') !!}
以上两个方法分别会生成嵌入式和弹出式验证码。如果没有参数,默认是浮动式。
关于这几种样式,可以参考官网。
这样,就能保证必须完成验证码操作才能提交表单。
好,至此,你就可以完成最基础的验证码配置了。
服务端验证
如果你完成了上面的部分,那么恭喜你已经成功了一大半了,可以到此为止,不过如果想更加安全,请继续往下看。
在此是服务端二次验证,在上面讲的方法是客户端的验证,但是这并不能代表绝对安全,一些恶意用户依然可以通过操作JS完成表单的提交,所以服务端我们需要再次验证一下。
在表单提交的时候,如果你用了极验,那么就会额外提交三个字段,分别是 geetest_challenge
, geetest_validate
, geetest_seccode
, 利用这三个字段,我们可以重新核对操作是否合法。
在这里这个包又做了封装,提供了一条验证规则。
所以验证时我们只需要利用验证规则即可。
use IlluminateHttpRequest; class BaseController extends Controller { /** * @param Request $request */ public function postValidate(Request $request) { $result = $this->validate($request, [ 'geetest_challenge' => 'geetest', ], [ 'geetest' => config('geetest.server_fail_alert') ]); if ($request) { return 'success'; } } }
利用 validate
方法,通过验证其中一个字段 geetest_challenge
, 验证规则 geetest
就可以完成服务端的验证。这样就更保证了安全性。
在这里注意,由于多提交了几个字段,如果想执行 ORM 的批量插入修改操作时,记得在 Model 里面屏蔽这几个字段
protected $guarded = ['geetest_challenge', 'geetest_validate', 'geetest_seccode'];
通过以上方法,就完成了服务端验证。
关于更多使用方法,可以参考README。
语言设置
验证码提供五种语言,简体中文,繁体中文,英文,日文,韩文。
可以通过 config/geetest.php
中设置 lang
字段。
- zh-cn (简体中文)
- zh-tw (繁体中文)
- en (英文)
- ja (日文)
- ko (韩文)
修改提示语
在这里有两个提示语,client_fail_alert
和 server_fail_alert
,分别是前端和后台(客户端和服务器)两边的提示语,可以通过设置 config/geetest.php
设置。