// 获取图片验证码，刷新图片验证码 public function getPicCode(){ $config = array( 'fontSize'=>30, // 验证码字体大小 'length'=>4, // 验证码位数 'useNoise'=>false, // 关闭验证码杂点 'expire'=>600 ); $Verify = new \Think\Verify($config); $Verify->entry(2333);//2333是验证码标志 }
假设，该函数的对应url为，那么，图片验证码的地址就是这个url，放入页面图片标签的src属性即可。
验证图片验证码
// 验证验证码是否正确 public function checkPicCode($code){ $verify = new \Think\Verify(); if($verify->check($code, 2333)){ $result = array( 'code' => '0', 'ext' => '验证通过' ); echo json_encode($result,JSON_UNESCAPED_UNICODE); }else{ $result = array( 'code' => '1', 'ext' => '验证码错误，请重新输入' ); echo json_encode($result,JSON_UNESCAPED_UNICODE); }; }
以上方法，我们利用了thinkphp提供的check方法，实现起来很简单。但是，如果想要得到验证细节，就没有办法了。比如，验证码错误，可能验证码超时，可能因为输入验证码错误，可能因为验证码已经使用过等等。必要的时候，可以重写thinkphp的验证码类，或者重写thinkphp的check方法。
跑通前后端
后端修改
验证图片验证码函数，改为被调用函数：
public function checkPicCode($picCode){ $verify = new \Think\Verify(); if($verify->check($picCode, 2333)){ return true; }else{ return false; }; }
在获取短信验证码函数的最顶部，添加调用图片验证码函数，只有通过验证，才发送请求给云片。
// 获取短信验证码 public function getSMSCode(){ $picCode = $_POST['picCode']; if(!$this->checkPicCode($picCode)){ $result = array( 'code' => '1', 'ext' => '验证码错误，请重新输入' ); echo json_encode($result,JSON_UNESCAPED_UNICODE); return; } /*省略*/ }
前端核心代码
<!--register.html--> <!DOCTYPE html> <html lang="zh" ng-app="sunApp"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body ng-controller="registerController"> <form action="" ng-show="isShow1"> <div> <input type="text" ng-model="mobile" placeholder="手机号"> </div> <div> <input type="text" ng-model="picCode" placeholder="图片验证码"> <img src="https://www.jb51.net/{{picCodeUrl}}" alt="" ng-click="refresh()"> </div> <div> <input type="text" ng-model="SMSCode" placeholder="短信验证码"> <button ng-click="getSMSCode()" ng-disabled="btnSMSDisabled">{{btnSMSText}}</button> </div> <button ng-click="next()">下一步</button> </form> <form action="" ng-show="isShow2"> <div> <input type="text" ng-model="mobile" placeholder="手机号" disabled="true"> </div> <div> <input type="password" ng-model="password" placeholder="请输入密码"> <input type="password" ng-model="password2" placeholder="请再次输入密码"> </div> <button ng-click="getSMSCode()">注册</button> </form> </body> </html> // register.js angular.module('sunApp').controller('registerController', function ($scope,$http,$httpParamSerializer,$state,$interval) { $scope.picCodeUrl = '/owner-bd/index.php/Home/CheckCode/getPicCode'; $scope.isShow1 = true; $scope.isShow2 = false; $scope.btnSMSText = '获取验证码'; $scope.btnSMSDisabled = false; $scope.checkOver = false; // 获取短信验证码 $scope.getSMSCode = function(){ var param = { mobile: $scope.mobile, picCode: $scope.picCode }; $http({ method:'POST', url:'/owner-bd/index.php/Home/SMS/getSMSCode', //url: '/owner-fd/mock/common.json', headers:{ 'Content-Type':'application/x-www-form-urlencoded' }, dataType: 'json', data: $httpParamSerializer(param) }).then(function successCallback(response) { console.log(response.data); if(response.data.code == '0'){ $scope.checkOver = true; $scope.btnSMSDisabled = true; var time = 60; var timer = null; timer = $interval(function(){ time = time - 1; $scope.btnSMSText = time+'秒'; if(time == 0) { $interval.cancel(timer); $scope.btnSMSDisabled = false; $scope.btnSMSText = '重新获取'; } }, 1000); } }, function errorCallback(response) { console.log(response.data); }); } // 验证短信验证码 $scope.next = function(){ if(!$scope.checkOver){ console.log('未通过验证'); return; } var param = { mobile: $scope.mobile, code: $scope.SMSCode }; $http({ method:'POST', url:'/owner-bd/index.php/Home/SMS/checkSMSCode', //url: '/owner-fd/mock/common.json', headers:{ 'Content-Type':'application/x-www-form-urlencoded' }, dataType: 'json', data: $httpParamSerializer(param) }).then(function successCallback(response) { console.log(response.data); if(response.data.code == '0'){ $scope.isShow1 = false; $scope.isShow2 = true; } }, function errorCallback(response) { console.log(response.data); }); } // 刷新图片验证码 $scope.refresh = function(){ $scope.picCodeUrl = '/owner-bd/index.php/Home/CheckCode/getPicCode?'+Math.random(); } });
优化
以上代码，安全性不是很好，我们可以利用工具绕过前端验证。为了避免这个问题，可以在checkPicCode和checkSMSCode函数中添加session值来标记。
$_SESSION['checkPicCode'] = true; $_SESSION['checkSMSCode'] = true;
在最后一步，向数据库中添加用户时，先验证一下两个session值是否都为true，都为true时再添加。
成果
后记
以后也许有用的代码：
echo json_encode($_SESSION);// 打印出session中的数据 echo session_id();// 打印当前session的id