koa2实现简单的验证码

//首先引入svg-captcha,https://www.npmjs.com/package/svg-captcha
const svgCaptcha = require('svg-captcha);
const koa = require('koa');
const router = require('koa-router')();
const bodyparser = require('koa-bodyParser');
var session = require('koa-session');
var app = new koa();
app.use(bodyparser());

router.get('/code',async(ctx)=>{
    var captcha = svgCaptcha.create({
           size:6,//验证码个数
           fontSize:50,//验证码字体大小
           width:100,//宽度
           heigth:40,//高度
           background:'#cc9966'//背景大小
    });

    ctx.response.type="image/svg+xml";//设置返回的数据格式
    ctx.body = captcha.data;
    
});
app.use(router.routes());
app.use(router.allowedMethods());
app.use(session({
　　keys:'koa:sess',
　　maxAge:10000
},app));
app.listen(80);

访问localhost/code，效果如下：

 

在html中，可以插入如下代码：

<img id="code" src=“localhost/code”/>

实际上我们要实现的效果是点击一次图片即可刷新一次验证码,具体实现机制是利用随机函数作为随机参数访问该地址，并且为该元素添加绑定事件

所以实际的html代码如下行：

<img id="code" src="localhost/code?t="+Math.random()*1000 />

JS代码如下：

var code = document.getElementById("code");
code.onclick = ()=>{
    code.getAttribute('src','localhost/code');
};

那么如何在提交表单之后实现验证呢，实现原理是在访问localhost/code之后，后端将验证码设置到session中即可，

router.get('/code',async(ctx)=>{
    var captcha = svgCaptcha.create({
           size:6,//验证码个数
           fontSize:50,//验证码字体大小
           width:100,//宽度
           heigth:40,//高度
           background:'#cc9966'//背景大小
    });

    ctx.response.type="image/svg+xml";//设置返回的数据格式
    ctx.session.code = captcha.text;//把验证码赋值给session
    ctx.body = captcha.data;
    
});