1.目的：
采用phpGrace中的图片验证码，在用户名+密码登录时使用图片验证码进行验证。
2.文档地址：
图片验证码的文档地址：http://www.phpgrace.com/tools/info/5.html
3.代码文件放置：
将下载verifyCode.php的文件，放入grace/tools文件夹中即可，该文件主要是产生图片验证码，并且写入到session中。
4.访问地址方法：
将客户端访问的方法放在app/index控制器中，代码如下：
//绘制验证码 public function vcode(){ //绘制验证码 /* * verifyCode 参数 * 1、图片宽度 * 2、图片高度 * 3、字符总数 * 4、包含数字的数量 * 5、字体【可省参数 默认：AMBROSIA.ttf，如需更换请将字体文件部署到 phpGrace/fonts 文件夹下】 */ $vcode = new phpGrace oolsverifyCode(88, 32, 4, 1); /* * 可修改属性 $vcode->bgcolor = array(255, 0, 0); //验证码背景颜色 $vcode->codeColor = array(0, 255, 0); //验证码文本颜色 $vcode->fontSize = 30; //验证码文字大小 $vcode->noise = false; //是否绘制干扰字符 $vcode->noiseNumber = 10; //干扰字符数量 $vcode->sessionName = 'yourname'; //保存验证码的 session 名称 */ //绘制验证码 $vcode->draw(); }
该代码放入后，客户端访问该地址为： http:// 域名或IP地址 /index/vcode ，通过该地址，可得到图片验证码。
5.视图：
在uniApp中添加验证码输入和显示功能。由于uniApp是基于Vue的视图架构，所以该代码如下：
<view > <text >验证码：</text> <input type="text" v-model="yzm" placeholder="请输入验证码"/> <img v-bind:src="yzmimg" @tap="changeVcode" /><br /> </view>
网站的源程序是基于HTML的，代码如下：
<form action="" method="post"> 验证码 : <br /> <input type="text" name="yzm" /><img src="/index/vcode" onclick="changeVcode(this);" /><br /> <input type="submit" id="" value="提交" /> </form>
在Vue中要注意的事数值的绑定，用“yzm”绑定输入的验证码，用yzmimg绑定图片的连接地址。
同时这里的点击也和js代码有所区别。Vue中的事件，需要写在methods代码块中。
所以这里的代码综合如下：
data模块中：
data() { return { yzm: '', yzmimg:this.apiServer+'index/vcode/', } },
methods:
methods: { changeVcode(){ this.yzmimg =this.apiServer+'index/vcode/' + Math.random(); },
6.服务器端验证：
注意：在客户端发送验证码到后台后，后台在验证时，需要打开Session才行，即增加如下语句：session_start(); 如果不加该语句，将会使得服务器端在下面代码验证时无法获取session中的值。
function checkYZM(){ //在验证时，需要加入session_start开启session，否则拿不到session值！！！ session_start(); //必须要加该语句，phpgrace的说明中没写，导致验证失败。 //提交比对 if(PG_POST){ //比对验证码 if($_POST['yzm'] != getSession('pgVcode')){ exit(jsonCode('vcodeerror', '验证码错误！')); } // else{ // exit(jsonCode('ok', '验证码正确！')); // } } };
7.客户端反馈结果：
客户端部分代码如下：
success:res=>{ var info = res.data; //首先进行验证码的验证 if(info.status=='vcodeerror'){ uni.showToast({ title:'验证码错误，请重试！', icon:'none', }) return; } }
总结：
本次基于phpGrace的后台框架，添加了官方提供的图形验证码代码。由于需要将其迁移到基于Vue的视图框架中，又是第一次写这样的代码，花了近一天的时间才完全的搞定，走了不少弯路，在这里写出来，也给要用的朋友一点参考或建议。