百度了一遍,基本都是千篇一概,都是从 captchapang 扣的,我固然也是。
但前端与后台的接口基本没有怎么实现,wtf前端
后端代码git
import captchapng from 'captchapng'; class Captchas { constructor() { } //验证码 static async getCaptchas(ctx) { const cap = parseInt(Math.random() * 9000 + 1000); const p = new captchapng(80, 30, cap); p.color(0, 0, 0, 0); p.color(80, 80, 80, 255); const base64 = p.getBase64(); //官网少了这一步 ctx.cookies.set('captcha', cap, {maxAge: 360000, httpOnly: true}); ctx.status = 200 ctx.body = { code: 'data:image/png;base64,' + base64 } } } export default Captchas
//官网少了这一步
ctx.cookies.set('captcha', cap, {maxAge: 360000, httpOnly: true});
这样子你生成的img验证图片包含的数字就放在你的cookies了,在提交的时候,从前台的传参,跟cookies作个对比github
async Login(ctx) { let cap = ctx.cookies.get('captcha') let {username, password,captcha} = ctx.request.body console.log(cap); console.log(captcha); if (cap!=captcha){ ctx.status = 401; ctx.body = { message: '验证码错误' } return }