IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    崔庆才发表于 2016-07-25 18:11:22
    love 0

    简述

    在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识别,极验验证码提供了一个安全可靠的滑动验证码体系,让网站开发更加安全。

    接入极验验证码的过程并没有想象中的那么简单,如果想在Laravel5中使用,可以使用Laravel5 的极验验证码包

    LaravelGeetest

    支持Laravel5.0及以上版本。

    地址:

    https://github.com/Germey/LaravelGeetest

    下面介绍一下该工具包的使用。

    注册极验账号

    首先需要到

    极验

    网站注册账号,然后新建一个应用,获取到 ID 和 KEY,留作备用。

    安装

    在项目地址输入命令

    $ composer require germey/geetest

    就可以完成该包的安装

    或者可以在 composer.json 的 require 中添加

    "germey/geetest": "~1.0"

    然后执行

    $ composer update

    同样可以完成该包的安装

    配置

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

    Germey\Geetest\GeetestServiceProvider::class

    在 aliases 中添加

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

    然后执行

    $ php artisan vendor:publish

    会生成一个配置文件,config/geetest.php 和视图文件views/vendor/geetest

    使用

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

    GEETEST_ID=0f1097bef7xxxxxx9afdeced970c63e4
    GEETEST_KEY=c070f0628xxxxxxe68e138b55c56fb3b

    其中 ID 和 KEY 换成你自己的。

    然后需要配置一个极验的后台地址,用于生成一串密钥,通过Ajax方法获取密钥来呈现验证码。

    默认的地址是 /auth/geetest,这样只需要在对应的 AuthController 中添加使用一个 Trait 即可。

    use Germey\Geetest\CaptchaGeetest;
    class AuthController extends Controller {
        use CaptchaGeetest;
    }

    使用了这个 Trait 就是增加了一个后台方法。

    你可以配置到其他任何你想要的 Controller 中,这样URL就变了,在配置文件中配置一下地址就好了。

    'geetest_url' => '/auth/geetest'

    如果配置到其他控制器,那么改下这个地址就好了,总之保证可以访问到即可。

    最后,在任意的视图里,我们只需要调用

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

    就可以得到验证码了。

    比如我们最常用的表单里

    <form action="/" method="post">
        <input name="_token" type="hidden" value="{{ csrf_token() }}">
        <input type="text" name="name">
        {!! Geetest::render() !!}
        <input type="submit" value="submit">
    </form>

    通过如上代码就可以完成验证码的生成了。

    另外还可以指定验证码的另外两种样式。

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

    以上两个方法分别会生成嵌入式和弹出式验证码。如果没有参数,默认是浮动式。

    关于这几种样式,可以参考

    官网

    这样,就能保证必须完成验证码操作才能提交表单。

    好,至此,你就可以完成最基础的验证码配置了。

    服务端验证

    如果你完成了上面的部分,那么恭喜你已经成功了一大半了,可以到此为止,不过如果想更加安全,请继续往下看。

    在此是服务端二次验证,在上面讲的方法是客户端的验证,但是这并不能代表绝对安全,一些恶意用户依然可以通过操作JS完成表单的提交,所以服务端我们需要再次验证一下。

    在表单提交的时候,如果你用了极验,那么就会额外提交三个字段,分别是 geetest_challenge, geetest_validate, geetest_seccode, 利用这三个字段,我们可以重新核对操作是否合法。

    在这里这个包又做了封装,提供了一条验证规则。

    所以验证时我们只需要利用验证规则即可。

    use Illuminate\Support\Facades\Config;
    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::get('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 设置。

    关于作者

    静觅(崔庆才)

    个人主页:http://cuiqingcai.com

    转载请注明:静觅 » 极验(Geetest) Laravel 5 集成开发包, 滑动二维码让验证更安全



沪ICP备19023445号-2号
友情链接