很多时间我们会在登录或者比如一些抽奖报名页面放一个验证码。
然后在后台进行校验。通过放置图片验证码，这样可以防止机器人暴力扫描重试系统接口。
当然也有些网站验证码设计的像是防止正常用户使用似的（像之前某车票网站一样。。。）
我们直接来看效果
如上图，登录表单提交一个用户名字和验证码。
后台获取输入验证码，并进行校验。
如果校验失败需要用户点击图片生成新验证码图片，然后继续提交表单校验。
输入错误图片验证码
如下图，这个例子就禁止用户继续登录，打印提示信息。
原理
某用户小白刷新登录页面，后台根据一个给定的文本来生成验证码，并把这个文本记录起来。（存储在服务器会话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);
对应的我们在页面可以编写类似下面的代码（非完整，仅重点展示核心实现）
<form> 姓名: <input type="text" id="username" value="雷学委" /><br/> 验证码：<input type="text" id="code" value="" /> <img class="captcha" src="/captcha" οnclick={$(event.target).attr('src','/captcha?'+Math.random())} /> <br/> <input type="submit" value="Submit" /> </form> <br/><div id="result"></div> <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script> <script> $(document).ready(function() { $("form").submit(function(e){ e.preventDefault(); var userName = $("#username").val(); var code = $("#code").val(); $.ajax({ type: 'post', data: {user:userName, code: code}, url: "http://localhost:12024/login/", success:function(data){$('#result').html(JSON.stringify(data));}, error:function(error){$("#result").html(JSON.stringify(error));} }) }); }
主要是为了实现下面的form表单：
