eggor验证码是啥

Posted 2023-02-23

参考技术A 首先在router.js中注册路由
router.get('/util', controller.util.captcha); //前台显示图片验证码
router.post('/util', controller.util.verify); //后台比对验证码
登录后复制
然后写对应的controller文件
'use strict';
const Controller = require('egg').Controller;

class UtilController extends Controller
async captcha()
const ctx = this.ctx;
let captcha = await ctx.service.captcha.captcha();
ctx.response.type = 'image/svg+xml'; // 知道你个返回的类型
ctx.body = captcha.data; // 返回一张图片
ctx.session.login_code = captcha.text.toLowerCase();
ctx.session.maxAge = 1000 * 60 * 10;


async verify()
const type, code = ctx.query // 获取客户端发送的类型和验证码
const login_code, register_code = ctx.session // 获取session保存的验证码
let result_success = status: 0, message: 'success' // 定义返回结果
let result_error = status: 1, message: '验证码错误'
// 登陆验证码验证
if (type === '1') //进行验证并返回结果
ctx.body = code === login_code ? result_success : result_error
else
// 注册验证码验证
ctx.body = code === register_code ? result_success : result_error




module.exports = UtilController;
编写Service文件
const Service = require('egg').Service;
const svgCaptcha = require('svg-captcha');

class ToolsService extends Service
// 产生验证码
async captcha()
const captcha = svgCaptcha.create(
size: 4,
fontSize: 40,
width: 100,
ignoreChars: 'OoLi',
height: 40,
noise: 4,
background: '#cc9966'
);
this.ctx.session.code = captcha.text;
return captcha;



module.exports = ToolsService;
登录后复制

配置相应的插件
可以使用以下的npm install svg-captcha --save ; npm install egg-session --save就可以安装插件

module.exports.captcha =
enable: true,
package: 'svg-captcha',
;//添加svg插件并开启插件

module.exports.session =
enable: true,
package: 'egg-session',
;//使用session
登录后复制
前端点击图片实时刷新图片验证码
下面的js中在路由后面生成随机的字符串是为了清除浏览器缓存，可以刷新出新的验证码图片，"？"的作用就是加上一个参数，也就是随机字符串

<div>
<img src="/captcha" alt="验证码图片" onclick="this.src = this.src + '?' +Math.random()">
</div>
登录后复制
最后要强调的就是在前端使用img标签接收验证码，就是上面的html文件。

将验证码存入session中，在后台判断（session安全）