分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

NodeJs生成SVG图形验证码

发布时间:2023-09-06 01:49责任编辑:沈小雨关键词:Node验证码

背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求:

1)不能使用文本式的验证码,很简单就能拿到

2)所有验证逻辑要在服务端进行,不然很容易被绕过

解决方法:使用svg-captcha插件在node.js中生成svg格式的验证码。

1、安装

npm install --save svg-captcha

2、使用方法

var svgCaptcha = require(‘svg-captcha‘);var data = svgCaptcha.create({ ??//options })console.log(data)//{data: ‘<svg>......</svg>‘, text: ‘fdsafasdf‘}

在express中使用

var svgCaptcha = require(‘svg-captcha‘);var router = require(‘express‘).Router();router.get(‘/get-img-verify‘, function (req, res) { ???console.log(req.query); ???var option = req.query; ???// 验证码,有两个属性,text是字符,data是svg代码 ???var code = svgCaptcha.create(option); ???// 保存到session,忽略大小写 ???req.session["randomcode"] = code.text.toLowerCase(); ???// 返回数据直接放入页面元素展示即可 ???res.send({ ???????img: code.data ???});});

客户端获取验证码

/* ????* 获取图片验证码 ????*/ ???getImageCode: function () { ???????var _this = this; ???????$("#image_code").val(""); ???????$.ajax({ ???????????type:"get", ???????????url: "/get-img-verify", ???????????data: {   ???  ?????????????????size: 6, ?//验证码长度 ???????????????width: 200, ???????????????height: 150, ???????????????background: "#f4f3f2",//干扰线条数 ???????????????noise: 2, ???????????????fontSize: 32, ???????????????ignoreChars: ‘0o1i‘, ??//验证码字符中排除‘0o1i‘ ???????????????color: true // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有 ??????????????????????}, ???????????dataType: ‘json‘ ???????}).done(function (data) { ???????????$(".getImageCode").html(data.img); ???????????$(".getImageCode").off("click").on("click", function () { ???????????????_this.getImageCode(); ???????????}); ???????}); ???} ???????????????????????????

3、验证方法

所有的验证逻辑都要在服务端进行,不然这个验证码就没什么卵用了,所以正确的逻辑应该是,当去请求敏感接口的时候,把客户端输入的验证码连同接口需要的参数一块传给node层,在node里判断用户输入的验证码是不是跟之前存到session里的验证码一致,如果不一致,则验证不通过,直接返回数据,不请求后台;如果一致,则验证通过,再由node发起请求,去调用后台接口。

router.get(‘/cerification-codeService/send-verification-code‘, function (req, res, next) { ???var url = urlMap.useraccountserver + ‘/cerification-codeService/new-send-verification-code‘; ???var imageCode = req.query.imageCode.toLowerCase(); ???var qs = req.query; ???for (let key in qs) { ???????if (key === ‘imageCode‘) { ???????????delete qs[key]; ???????} ???} ???if (imageCode !== req.session["randomcode"]) { ???????res.send({ ???????????code: 4 ???????}); ???????return false; ???} ???var options = { ???????url: url, ???????method: ‘GET‘, ???????json: true, ???????qs: qs ???}; ???clusterUtility.API.optionsFilter(req, options); ???request(options, function (error, response, body) { ???????res.send(body); ???});});

插件还有一些其他的配置项及API,具体可见  https://github.com/lemonce/svg-captcha

NodeJs生成SVG图形验证码

原文地址:https://www.cnblogs.com/kakayang/p/8794546.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved