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;
    
});