NodeJS 后端开发10 生成图片验证码并实现校验

很多时间我们会在登录或者比如一些抽奖报名页面放一个验证码。

然后在后台进行校验。通过放置图片验证码，这样可以防止机器人暴力扫描重试系统接口。

当然也有些网站验证码设计的像是防止正常用户使用似的（像之前某车票网站一样。。。）

我们直接来看效果

如上图，登录表单提交一个用户名字和验证码。

后台获取输入验证码，并进行校验。

如果校验失败需要用户点击图片生成新验证码图片，然后继续提交表单校验。

输入错误图片验证码

如下图，这个例子就禁止用户继续登录，打印提示信息。

原理

某用户小白刷新登录页面，后台根据一个给定的文本来生成验证码，并把这个文本记录起来。（存储在服务器会话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.captchaconsole.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="" />&nbsp;<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表单：

对了，学委还有这个可以关注长期阅读 =>雷学委趣味编程故事汇编
或者=> 雷学委NodeJS系列

持续学习持续开发，我是雷学委！
编程很有趣，关键是把技术搞透彻讲明白。
创作不易，请多多支持，点赞收藏支持学委吧！

更多代码可以查看/Star： LearnNodeJS代码下载

参考链接

https://www.npmjs.com/package/svg-captcha

机器人恶意刷接口？加个验证码几分钟搞定！相关推荐

逗号后面统一加空格_十分钟搞定字幕，教你做加字幕的“快手菜”
平台上许多同学有疑问:做视频是否有加字幕的必要呢? 其实除了外语需要翻译.语速过快加字幕方便理解.普通话不标准等情况之外,还是建议有余力的同学可以加上字幕,提升用户的观看体验. 那么问题来了,存在以下 ...
验证码 html 自动验证码,15分钟搞定自动识别网站验证码
概述很多开发者都讨厌网站的验证码,特别是写网络爬虫的程序员,而网站之所以设置验证码,是为了防止机器人访问网站,造成不必要的损失.现在好了,随着机器学习技术的发展,机器识别验证码的问题比较好解决了. ...
正则表达式里转义字符_五分钟搞定正则表达式，如果没搞定，再加两分钟
五分钟搞定正则表达式,如果没搞定,再加两分钟 [这是 ZY 第 18 篇原创文章] 文章概览一.正则表达式介绍正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简 ...
api接口限流防止恶意刷接口
api限流的场景限流的需求出现在许多常见的场景中 1.秒杀活动,有人使用软件恶意刷单抢货,需要限流防止机器参与活动 2.某api被各式各样系统广泛调用,严重消耗网络.内存等资源,需要合理限流 3.淘 ...
网站被恶意镜像怎么办 php一段代码轻松搞定（全面版）
有时候你会发现,你在搜索引擎输入网站名称的时候,出来的网站信息是你们的,但是域名却是一个陌生的,这种情况可以基本确定网站被镜像了,那么究竟什么叫网站被镜像? 恶意镜像,也叫恶意克隆,恶意解析,是指有人 ...
扫拖地机器人预留_米家扫拖机器人评测：能扫能拖，一次性搞定
现如今,年轻人的生活压力越来越大,在经历了一天的繁忙工作之后,已经没有多余的精力应对家务劳动.特别是扫地这类看似简单却费时费力的家务活,令人十分烦恼,于是很多消费者都选择扫地机器人以改善这一问题.然而 ...
php镜像网页,网站被恶意镜像怎么办 php一段代码轻松搞定（全面版）
有时候你会发现,你在搜索引擎输入网站名称的时候,出来的网站信息是你们的,但是域名却是一个陌生的,这种情况可以基本确定网站被镜像了,那么究竟什么叫网站被镜像? 恶意镜像,也叫恶意克隆,恶意解析,是指有人 ...
机器人画家，三分钟搞定一幅人物黑白肖像
逆天的机器人,现在要进军艺术圈了. 小编曾经去过一次科技馆,看见过一种可以为人类画像的机器人,当时不少人为之一振,惊呼神奇. 在此次MWC 2016大会上,也出现了一款类似的机器人,在画画上面的天赋还 ...
php微信sdk接口文档,php一个文件搞定微信jssdk配置
学习PHP的小伙伴在处理微信jssdk配置的时候可能会遇到一些问题.以下是百分网小编精心为大家整理的php一个文件搞定微信jssdk配置,希望对大家有所帮助!更多内容请关注应届毕业生网! 包括缓存,包 ...

机器人恶意刷接口？加个验证码几分钟搞定！

NodeJS 后端开发10 生成图片验证码并实现校验

我们直接来看效果

输入错误图片验证码

原理

参考链接

机器人恶意刷接口？加个验证码几分钟搞定！相关推荐

最新文章

热门文章