给ThinkPHP5增加验证码功能

就在这几天，TP5进行的RC3的大规模更新，虽然我们都狠狠地骂了一百遍，但是我的内心是无比的激动，TP终于走上了“上流社会”的模式：composer！
为什么说composer是上流社会呢？因为 自己去 Bing 一下，为什么不是百度呢？

废话不多说了，今天要为大家讲的是如果给TP5加上图片验证码。

首先我在GITHUB上面找了一个看似还可以的图片验证码 https://github.com/Gregwar/Captcha，然后我们把她安装到我们TP5框架中去

1. composer require gregwar/captcha

然后，我再 application\common\helper 下面创建了一个 VerifyHelper.php 我们的验证码助手类（为什么我的目录这么自由，因为我是主流，O(∩_∩)O~）

然后我们根据这个图片验证码的说明为verifyHelper.php 填充了两个方法

1. <?php
2. /**
3.  * Created by PhpStorm.
4.  * User: 申法宽
5.  * Date: 16/4/25
6.  * Time: 13:19
7.  * Email: sfk@live.cn
8.  * File: VerifyHelper.php
9.  */
11. namespace app\common\helper;
13. use Gregwar\Captcha\CaptchaBuilder;
15. class VerifyHelper
16. {
17.     /**
18.      * 生成验证码
19.      */
20.     public static function verify()
21.     {
22.         $builder = new CaptchaBuilder();
23.         $builder->build()->output();
24.         session('verify_code', $builder->getPhrase());
25.     }
27.     /**
28.      * 检测验证码是否正确
29.      * @param $code
30.      * @return bool
31.      */
32.     public static function check($code)
33.     {
34.         return ($code == session('verify_code') && $code != '') ? true : false;
35.     }
36. }

 

好了，大家需要的验证码类已经搞定了！额~~~ 抱歉，没有给大家演示前端效果呢

--------------------------------------------------------------------------------------------------------------
接下来我们在控制器中重建一个verify的方法( 注意，这里VerifyHelper的命名空间PHPstorm在上面已经给我use 过了，如果你要纯手工的去敲代码，那么你可不要弄错哦 )

1.     /**
2.      * 显示验证码图片
3.      */
4.     public function verify()
5.     {
6.         VerifyHelper::verify();
7.     }

我们在页面中添加如下代码(注意，我的src是经过路由的，你需要自己对应到刚刚verify方法的控制器，或者自己写路由吧)

1. {extend name="base" /}
2. {block name="title"}图片验证码{/block}
3. {block name="main"}
5. <div class="row">
6.     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 center-block">
7.         <form class="form-horizontal" id="tg-register-form" data-toggle="validator" action="{:url('/do_register')}"
8.               method="post">
9.             <div class="form-group">
10.                 <label for="inputVerify" class="col-xs-2 control-label">验证码</label>
11.                 <div class="col-xs-10">
12.                     <input class="form-control" id="inputVerify" name="verify" placeholder="验证码" type="text"
13.                            data-error="验证码错误" required>
14.                     <img class="verifyimg reloadverify" src="{:url('/verify')}" alt="">
15.                 </div>
16.                 <div class="col-xs-offset-2 col-xs-10 help-block with-errors"></div>
17.             </div>
18.         </form>
19.     </div>
20. </div>
21. {/block}

 

好啦，前端工作做完，那么现在展示效果的时候到了





怎么样，还不错吧，你想点击图片就更换验证码？好的下面贴出代码来

1. <script>
2.     $(function(){
3.         // 刷新验证码
4.         var verifyimg = $(".verifyimg").attr("src");
5.         $(".reloadverify").click(function(){
6.             if( verifyimg.indexOf('?')>0){
7.                 $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
8.             }else{
9.                 $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
10.             }
11.         });
12.     })
13. </script>

 

额，貌似又忘了，那么我怎么去验证用户输入的验证码是否正确呢？还记得我们在填充VerifyHelper.php类的时候有一个check 方法吗？没错，就是这个方法用来检测用户输入的验证码和session中存在的验证码是否一致了！

好，现在我们就说说这个验证，我们在使用TP5的时候，会发现手册中有一个验证，没错这个东西在3.2时候我们还是纯纯的在model验证（我没说错吧？其实那时候我几乎不写验证的，呵呵是不是很不负责呢），那么现在我就教大家写一个验证器

假设我们刚刚在写验证码的时候的场景是用户注册，我们现在就写一个用户注册的验证器（ps：如果你看不懂我写的什么，那么就去看看手册吧）！

1. <?php
2. /**
3.  * Created by PhpStorm.
4.  * User: 申法宽
5.  * Date: 16/4/21
6.  * Time: 16:26
7.  * Email: sfk@live.cn
8.  * File: UserValidate.php
9.  */
11. namespace app\common\validate;
13. use app\common\helper\VerifyHelper;
15. class UserValidate extends BaseValidate
16. {
18.     // 验证规则
19.     protected $rule = [
20.         ['email', 'require|email', '邮箱必须|邮箱格式不正确'],
21.         ['password', 'require|min:6', '密码必须|密码长度至少6位'],
22.         ['verify', 'check_verify:thinkphp', '验证码错误']
23.     ];
24.     protected $scene = [
25.         'register' => ['email', 'password','verify'],
26.         'login' => ['email', 'password'],
27.     ];
29.     // 自定义规则
30.     public function check_verify($value)
31.     {
32.         return VerifyHelper::check($value) ? true : false;
33.     }
34. }

 

上面代码中的check_verify就是我们要做的自定义验证：验证码验证（还是那就话，我这里phpstorm已经给我写好了命名空间了）


我们上面说了，我们假设的是用户注册场景，我们需要一个用户注册的方法（下面代码中succ 和 err 就是一个返回js的方法，你可不要说我的代码你不能用，就开始咒我啊）

1. public function register()
2.     {
3.         if(IS_POST) {
4.             $data = input('post.');
6.             $result = $this->validate($data, 'UserValidate.register');
8.             if(is_array($result)) {
9.                 return $this->err('注册失败', ['valid' => $result]);
10.             }
11.             // 判断验证码
13.             $user_model = new UserModel();
15.             if($user_model->register($data)){
16.                 return $this->succ('注册成功', ['url' => url('/login')]);
17.             } else {
18.                 return $this->err('注册失败, 邮箱已注册', ['valid' => ['email' => '该邮箱已经注册,请更换或登录']]);
19.             }
20.         }
21.     }

这里我就简单说一下吧， $this->validate($data, 'UserValidate.register'); 意思是告诉我们 加载了 UserValidate的注册场景！

其实到这里，我们的工作已经写完了


流程：
用户打开注册页面
显示页面的验证码

用户点击提交

提交到我们 注册方法

注册方法加载用户验证器

验证器验证 email password 和 verify 是否符合要求

然后进行数据的写入

Done !



是不是很懵，从 TP5开始 我们就要开始 自己组装我们的框架了，不管你需要什么，去 GITHUB上面找，composer 安装，然后开始肆意的放纵吧！




对了 这里有一个问题，在我写这篇分享的时候，Model.php 的 save 方法有一个bug，在上面 注册方法中我们可以看到，我在UserModel中又写了一个注册方法到model中

1.     /**
2.      * 注册
3.      * @param $data
4.      * @return int|string
5.      */
6.     public function register($data)
7.     {
8.         $user = self::db()->getByEmail($data['email']);
9.         if ($user) return false; //用户已经存在
11.         if ($this->allowField(['email', 'password'])->save($data)) {
12.             return $this->id;
13.         }
14.     }

代码中使用了 allowField方法过滤了 verify 字段，不然在我们save的时候tp就要去判断verify字段不存在报错了

那么 这个bug 在哪呢？（Model.php 约 223行）

1.         // 检测字段
2.         if (!empty($this->field)) {
3.             foreach ($data as $key => $val) {
4.                 if (!in_array($key, $this->field)) {
5.                     unset($data[$key]);
6.                 }
7.             }
8.         }

我们需要改为$this->data，为什么？仔细研究一下save方法你就知道啦！

1.         // 检测字段
2.         if (!empty($this->field)) {
3.             foreach ($this->data as $key => $val) {
4.                 if (!in_array($key, $this->field)) {
5.                     unset($this->data[$key]);
6.                 }
7.             }
8.         }