网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
很多时间我们会在登录或者比如一些抽奖报名页面放一个验证码。
然后在后台进行校验。通过放置图片验证码,这样可以防止机器人暴力扫描重试系统接口。
当然也有些网站验证码设计的像是防止正常用户使用似的(像之前某车票网站一样。。。)
我们直接来看效果
如上图,登录表单提交一个用户名字和验证码。
后台获取输入验证码,并进行校验。
如果校验失败需要用户点击图片生成新验证码图片,然后继续提交表单校验。
输入错误图片验证码
如下图,这个例子就禁止用户继续登录,打印提示信息。
原理
某用户小白刷新登录页面,后台根据一个给定的文本来生成验证码,并把这个文本记录起来。(存储在服务器会话session)
当接受这个数字对应的图片验证码的用户,提交表单的时候。(小白需要提交验证码图片一致的文字)。
后台从会话获取对应小白的文本,进行校验。
校验成功,则认为是小白的人工操作,继续放行后续操作。
npm install -S svg-captcha
核心代码如下:
const express = require('express');
const session = require('express-session');
const serveStatic = require('serve-static');
const bodyParser = require('body-parser');
const app = express();
// parse application/x-www-form-urlencoded so that req will has a body attribute
app.use(bodyParser.urlencoded({ extended: false }))
app.use(serveStatic('./public'));
const port = 12024;
app.use(session({
secret: '雷学委mySecret2021',
resave: false,
saveUninitialized: true,
cookie: { secure: false}
}))
const svgCaptcha = require('svg-captcha');
// a function to generate captcha and display on user screen
const captChaHandler = function(req, res){
var captcha = svgCaptcha.create();
req.session.captcha = captcha.text;
res.type('svg');
res.status(200).send(captcha.data);
}
app.get('/captcha',captChaHandler);
//user will submit form with code in request body and login handler will get captcha from session and check it with given code
app.post('/login', function(req, res){
console.log('[雷学委] try login');
console.log('[雷学委] body:', req.body);
var captchaCode = req.session.captcha
console.log('[雷学委] captchaCode:', captchaCode)
if(req.body && req.body.code == captchaCode){
res.status(200).send(req.body.user + " 登录验证成功!");
}else{
console.log('[雷学委] 验证码校验失败');
res.status(400).send("BadRequest, 验证码不对!");
}
});
console.log('listening port ' + port);
app.listen(port);
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
/topics/618545628)**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!