【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码

     

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的视图框架中，又是第一次写这样的代码，花了近一天的时间才完全的搞定，走了不少弯路，在这里写出来，也给要用的朋友一点参考或建议。