Egg框架搭建后台服务【3】- 验证码

李剑一

于 2024-01-13 19:14:41 发布

阅读量483

点赞数 9

分类专栏： Egg 文章标签： egg

本文链接：https://blog.csdn.net/Feng_ye__/article/details/135574253

版权

Egg 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Egg框架中使用svg-captcha插件实现动态SVG验证码，并详细说明了如何配置session以确保验证码的有效性和安全性。同时强调了在考虑用户体验时，对视障用户的影响和避免过度使用验证码的建议。

摘要由CSDN通过智能技术生成

需求

登录页面需要一个验证码，防止出现频繁“撞库”情况。

开发

安装

安装 svg-captcha 插件，实现 SVG 图片动态验证码。

npm i --save svg-captcha

配置

svg-captcha 不需要配置，但是因为牵扯到验证码校验时，需要将验证码共享到全局，方便其他位置的方法调用。

所以这里启用 session。（Ps：egg 框架自带 session，不需要额外安装）

// config.default.js
config.session = {
    key: 'EGG_SESSION_KEY',
    maxAge: 24 * 3600 * 1000, // 过期时间24小时
    httpOnly: true, // 默认就是 true
    encrypt: true, // 加密传输
    renew: true  //每次访问页面都会给session会话延长时间
}

后台

const {Service} = require('egg');
const svgCaptcha = require('svg-captcha');

class SystemService extends Service {
    async login(params) {
        const {ctx, app} = this;
		// 校验验证码
        if (params.verifyCode === ctx.session.verifyCode) {
            ctx.state = 200;
            ctx.body = {
                code: 200,
                success: true,
                data: {token: 123},
                msg: '登录成功',
                show: true
            }
        } else {
            ctx.body = {
                code: 400,
                success: false,
                msg: '验证码错误',
                show: true
            }
        }
    }

    async verifyCode() {
        const {ctx, app} = this;
        const verifyConfig = {
            size: 5,
            ignoreChars: '0oO1ilI', // 验证码字符中排除 0oO1ilI
            noise: 3, // 干扰线条的数量
            width: 176,
            height: 40,
            fontSize: 50,
            color: true, // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
            background: '#fff',
        }
        // 生成二维码svg
        const captcha = svgCaptcha.create(verifyConfig);
        // 验证码文字存放在 session 中(不区分大小写)
        ctx.session.verifyCode = captcha.text.toLowerCase();
        ctx.response.type = 'image/svg+xml';
        ctx.body = {
            code: 200,
            success: true,
            data: captcha.data,
            msg: '验证码获取成功',
            show: false
        }
    }
}

module.exports = SystemService;

前台

/** 刷新验证码 */
const reloadCaptcha = () => {
    captcha().then(res => {
        verifyImg.value = res.data;
    });
}

<div class="verify-code" @click="reloadCaptcha">
     <a-tooltip placement="right">
            <template #title>点击刷新验证码</template>
            <div v-html="verifyImg"></div>
     </a-tooltip>
</div>