給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: [e-mail]
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: [e-mail]
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.         }