给ThinkPHP5增长验证码功能

时间 2019-11-17

原文原文链接

就在这几天，TP5进行的RC3的大规模更新，虽然咱们都狠狠地骂了一百遍，可是个人心里是无比的激动，TP终于走上了“上流社会”的模式：composer！
为何说composer是上流社会呢？由于本身去 Bing 一下，为何不是百度呢？

废话很少说了，今天要为你们讲的是若是给TP5加上图片验证码。

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

composer require gregwar/captcha

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

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

<?php
/**
* Created by PhpStorm.
* User: 申法宽
* Date: 16/4/25
* Time: 13:19
* Email: sfk@live.cn
* File: VerifyHelper.php
*/
namespace app\common\helper;
use Gregwar\Captcha\CaptchaBuilder;
class VerifyHelper
{
/**
* 生成验证码
*/
public static function verify()
{
$builder = new CaptchaBuilder();
$builder->build()->output();
session('verify_code', $builder->getPhrase());
}
/**
* 检测验证码是否正确
* @param $code
* @return bool
*/
public static function check($code)
{
return ($code == session('verify_code') && $code != '') ? true : false;
}
}

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

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

/**
* 显示验证码图片
*/
public function verify()
{
VerifyHelper::verify();
}

咱们在页面中添加以下代码(注意，个人src是通过路由的，你须要本身对应到刚刚verify方法的控制器，或者本身写路由吧)github

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

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

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

<script>
$(function(){
// 刷新验证码
var verifyimg = $(".verifyimg").attr("src");
$(".reloadverify").click(function(){
if( verifyimg.indexOf('?')>0){
$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
}else{
$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
}
});
})
</script>

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

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

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

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

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

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

public function register()
{
if(IS_POST) {
$data = input('post.');
$result = $this->validate($data, 'UserValidate.register');
if(is_array($result)) {
return $this->err('注册失败', ['valid' => $result]);
}
// 判断验证码
$user_model = new UserModel();
if($user_model->register($data)){
return $this->succ('注册成功', ['url' => url('/login')]);
} else {
return $this->err('注册失败, 邮箱已注册', ['valid' => ['email' => '该邮箱已经注册,请更换或登陆']]);
}
}
}

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

其实到这里，咱们的工做已经写完了

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

用户点击提交

提交到咱们注册方法

注册方法加载用户验证器

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

而后进行数据的写入

Done !

是否是很懵，从 TP5开始咱们就要开始本身组装咱们的框架了，无论你须要什么，去 GITHUB上面找，composer 安装，而后开始肆意的放纵吧！

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

/**
* 注册
* @param $data
* @return int|string
*/
public function register($data)
{
$user = self::db()->getByEmail($data['email']);
if ($user) return false; //用户已经存在
if ($this->allowField(['email', 'password'])->save($data)) {
return $this->id;
}
}

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

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

// 检测字段
if (!empty($this->field)) {
foreach ($data as $key => $val) {
if (!in_array($key, $this->field)) {
unset($data[$key]);
}
}
}

咱们须要改成$this->data，为何？仔细研究一下save方法你就知道啦！dom

// 检测字段
if (!empty($this->field)) {
foreach ($this->data as $key => $val) {
if (!in_array($key, $this->field)) {
unset($this->data[$key]);
}
}
}