node.js验证码

前言

验证码在各大网站中随处可见,它实际的作用就是为了防止机器提交,从而提高安全性。验证码的类型可以分为三类:普通验证码,行为验证码以及短信验证码。普通验证码是比较早出现的,比如一张模糊的图片,里面由数字或者字母组成,通过用户输入的值进行比对。而随着技术的发展,现在更多的则是行为验证码和短信验证码,行为验证码比如拖动一个滑动以拼成一个完整的图片,或者是把一个角度错误的图片旋转成正确的角度等。而短信验证码,则是给本人手机号码以短信的方式发送验证码。在这几种类型的验证码中,行为验证码实现起来的话,相对繁琐,虽然也有许多的第三方库,但也大多是需要付费的,短信验证码也是一样需要付费。所以今天咱们就讲讲普通验证码的实现与应用,虽说普通验证码没有另外两个验证码那么安全,但是对安全性的保障还是能起作用的。

一、验证码的具体流程
首先在实现它之前,我们先来了解验证码的具体操作流程是怎么样的。在这里,可以分为两个步骤:

1.获取验证码图片

服务端生成随机的验证码图片并保存图片中的文字内容
客户端通过img元素的src地址获取验证码图片


2.进行验证
服务端判断是否对验证码进行验证
是则验证客户端传递过来的验证码是否和服务端保存的验证码一致

二、验证码的实现

通过上述,我们知道了验证码的具体操作流程,那么接下来就进行验证码的实现。

这里我们使用 svg-captcha 这个库来实现。

1. 安装

npm install --save svg-captcha
1.1引入
const svgCaptcha = require("svg-captcha")

2.创建一个验证码

/全局变量  保存验证码
let myCode;

app.get("/code", (req, res) => {
    const captcha = svgCaptcha.create({
        size: 5, //验证码字符个数
        ignoreChars: "0oi1l",//忽略字符
        noise: 3,//干扰线
        color: true,//字符是否有颜色
        // width: 100,//宽
        // height: 35,//高
    });


    // console.log(captcha.text);
    myCode = captcha.text;//保存在全局变量中
    console.log(myCode);

    res.type("svg");
    res.send(captcha.data)
})

3.判断验证码

app.post('/login', (req, res) => {
    //解析数据
    let { username, pwd, code } = req.body;
    console.log(username, pwd);
    console.log("验证码:", code);

    //校验验证码
    if (code.toLowerCase() != myCode.toLowerCase()) {
        res.send({ code: 500, msg: "验证码错误" })
        return;
    }

    //表单校验
    if (!username || !pwd) {
        res.send({ code: 500, msg: "用户名、密码均不能为空" })
        return;
    }

    //..
    res.send({ code: 200, msg: "登录成功", username })
})

4.html代码



    

登录




你可能感兴趣的:(node.js)