极验验证码 (Geetest) Laravel 5 集成开发包,滑动二维码让验证更安全

举报
崔庆才丨静觅 发表于 2021/05/22 02:00:43 2021/05/22
【摘要】 简述 在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识别,极验验证码提供了一个安全可靠的滑动验证码体系,让网站开发更加安全。 先感受一下这种验证码的魅力 极验 接入极验验证码的过程并没有想象中的那么简单,如果想在 Laravel5 中使用,可以使用 Laravel5 的极验验证码包 LaravelGeetest 支持...

简述

在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识别,极验验证码提供了一个安全可靠的滑动验证码体系,让网站开发更加安全。 先感受一下这种验证码的魅力 极验 接入极验验证码的过程并没有想象中的那么简单,如果想在 Laravel5 中使用,可以使用 Laravel5 的极验验证码包 LaravelGeetest 支持 Laravel 5.0 及以上版本。 地址: https://github.com/Germey/LaravelGeetest 建议阅读原项目的 README 文件,最新的更新都会在 README 中说明,而且用法介绍是最全面的。 下面简单介绍一下该工具包的使用。

注册极验账号

首先需要到 极验 网站注册账号,然后新建一个应用,获取到 ID 和 KEY,留作备用,后台管理页面如下。

安装

在项目地址输入命令

1
$ composer require germey/geetest

就可以完成该包的安装 或者可以在 composer.json 的 require 中添加

1
"germey/geetest": "~2.0"

然后执行

1
$ composer update

同样可以完成该包的安装。

配置

注册 ServiceProvider,在 config/app.php 的 providers 中添加

1
Germey\Geetest\GeetestServiceProvider::class

在 aliases 中添加

1
'Geetest' => Germey\Geetest\Geetest::class

然后执行

1
$ php artisan vendor:publish

会生成一个配置文件,config/geetest.php 和视图文件 views/vendor/geetest,视图文件中你可以自定义配置,比如修改一下验证失败后的 alert 函数,修改为你想要的提示 toast 等。

使用

首先把刚才拿到的 ID 和 KEY 配置到 .env 文件中,因为这两个算私密内容,配置到 .env 文件中可以保证安全性。在 .env 中写入如下两行。

1
2
GEETEST_ID=0f1097bef7xxxxxx9afdeced970c63e4
GEETEST_KEY=c070f0628xxxxxxe68e138b55c56fb3b

其中 ID 和 KEY 换成你自己的。 然后,在任意的视图里,我们只需要调用

1
{!! Geetest::render() !!}

就可以得到验证码了。 比如我们最常用的表单里

1
2
3
4
5
6
<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>

通过如上代码就可以完成验证码的生成了,样例如下: 另外还可以指定验证码的另外两种样式。

1
2
{!! Geetest::render('embed') !!}
{!! Geetest::render('popup') !!}

以上两个方法分别会生成嵌入式和弹出式验证码。如果没有参数,默认是浮动式。 关于这几种样式,可以参考 官网 这样,就能保证必须完成验证码操作才能提交表单。 好,至此,你就可以完成最基础的验证码配置了。

服务端验证

如果你完成了上面的部分,那么恭喜你已经成功了一大半了,可以到此为止,不过如果想更加安全,请继续往下看。 在此是服务端二次验证,在上面讲的方法是客户端的验证,但是这并不能代表绝对安全,一些恶意用户依然可以通过操作 JS 完成表单的提交,所以服务端我们需要再次验证一下。 在表单提交的时候,如果你用了极验,那么就会额外提交三个字段,分别是 geetest_challenge, geetest_validate, geetest_seccode, 利用这三个字段,我们可以重新核对操作是否合法。 在这里这个包又做了封装,提供了一条验证规则。 所以验证时我们只需要利用验证规则即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
use Illuminate\Http\Request;

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 里面屏蔽这几个字段

1
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 设置。

关于作者

静觅(崔庆才) 个人主页:http://cuiqingcai.com

文章来源: cuiqingcai.com,作者:崔庆才,版权归原作者所有,如需转载,请联系作者。

原文链接:cuiqingcai.com/2988.html

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。