generateVerifyImg: function() { var _verify = { code: '', img: '' }; // 生成四位数字和字母的数字作为验证码 _verify.code = Math.random().toString(16).slice(2, 6); var Image = Canvas.Image, canvas = new Canvas(60, 30), ctx = canvas.getContext('2d'); var _rotate = (Math.random()).toFixed(2); ctx.fillStyle = '#ffcc99'; ctx.fillRect(0, 0, 60, 30); ctx.rotate(_rotate); ctx.font = 'italic 20px serif'; ctx.strokeStyle = '#424952'; // 将验证码绘制进canvas ctx.strokeText(_verify.code, 10, 20); // 生成验证码图片 _verify.img = canvas.toDataURL('image/png'); return _verify; }
然后在登录&注册的API中生成验证码图片并渲染进模板文件：
/** * @desc 登录、注册的统一入口，由前端Backbone的hash路由判断展示表单 * @param req * @param res */ toAuth: function(req, res) { var _verify = this.generateVerifyImg(); req.session.verifycode = _verify.code; var view = swig.renderFile('./views/passport/main.swig', { verify_img: _verify.img }); return res.send(view); }
其中非常关键的一步是将验证码通过session保存，以便进行验证。
随后，在接受表单post的API中加入验证码过滤逻辑：
if (!req.param('verifycode') || req.param('verifycode') !== req.session .verifycode) { return res.json({ err: rescode.invalidVerifycode, msg: "验证码不正确" }); }
项目至此已经具备了基本的验证码功能。验证码的一个重要需求是用户手动刷新验证码，下面简单讲述实现过程。
3.3 实现验证刷新功能
1.首先在前端js代码中添加验证码图片刷新事件监听：
$('.hc_container').on('click', '.form_img_verifycode', function() { console.log('换一换'); var $img = $(this); $.ajax({ url: '/getverifycode', type: 'get', dataType: 'json' }).done(function(res) { console.log('getverifycode success'); $img.attr('src', res.img); }).fail(function(res) { console.log('getverifycode failed'); }); });
2.然后配置sails的config/route.js：
// 刷新验证码 'get /getverifycode': 'Auth/AuthController.getVerifyImg'
3.在Auth/AuthController中添加getVerifyImg()API接受前端的验证码刷新请求：
getVerifyImg: function(req, res) { var _verify = this.generateVerifyImg(); req.session.verifycode = _verify.code; return res.json({ 'img': _verify.img }); }
这个API功能非常简单，获取新的验证码图片并返回给前端，但是必须谨记将验证码通过session记录。
前端通过ajax获取到新的验证码图片url替换旧图即可。