【原創】基於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\tools\verifyCode(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的視圖框架中，又是第一次寫這樣的代碼，花了近一天的時間才完全的搞定，走了不少彎路，在這里寫出來，也給要用的朋友一點參考或建議。