史上最简便的可以直接用的登录验证码攻略（前后端都有）

首先，我们要知道为什么要设置验证码、

原因很简单：

加验证码的目的是：必须要人工操作，防止提交错误登录信息，暴力破解密码，如果有人恶意登录，服务器压力会很大，甚至宕机。

为了防止我们用的别人的验证码图片，各个页面的验证码串通。所以每个页面的验证码图片都需要带一个图片的token，验证码登录一旦匹配成功之后，服务器验证码信息需要删掉的，防止下次匹配还能使用。验证码不能存到数据库中，因为做验证吗的目的就是必须先通过了验证码信息，才去数据库匹配账号密码。

说人话就是：防止数据库被恶意频繁发送请求，必须人工操作才能走到查询数据库那一步

这里要注意的是：最好用后端验证码，前端验证码验证还是可能会受到ajax请求攻击的，可以说前端验证码起不到防止直接请求数据库的作用

后端验证码代码实现（是一个servlet页面）

package com.qcby.servlet;import java.awt.Color;
import java.awt.Font;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class CodeServlet*/
@WebServlet("/code")
public class CodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)*/protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//创建空白图片BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB);//获取图片画笔java.awt.Graphics g = image.getGraphics();Random r = new Random();//设置画笔颜色g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));//绘制矩形背景g.fillRect(0, 0, 100, 30);//绘制n条干扰线for(int i=0;i<10;i++) {g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));g.drawLine(r.nextInt(100),r.nextInt(30),r.nextInt(100), r.nextInt(30));}//调用方法，获取长度为n的随机字符串String number = getNumbers(5);g.setFont(new Font(null,Font.ITALIC+Font.BOLD,24));g.drawString(number,5,25);response.setContentType("image/jpeg");OutputStream out = response.getOutputStream();ImageIO.write(image, "jpeg", out);out.close();}public String getNumbers(int size) {String string = "QWERTYUIOPASDFGHJKLZXCVBNM0123456789";String number="";Random r=new Random();for(int i=0;i<size;i++) {char c=string.charAt(r.nextInt(string.length()));number=number+c;}return number;}
}直接发送code请求进行测试放前端页面查看<img src="code">

前端代码写的验证码：

 var show_num = [];draw(show_num);function dj(){draw(show_num);   }function draw(show_num) {var canvas_width=document.getElementById('canvas').clientWidth;var canvas_height=document.getElementById('canvas').clientHeight;var canvas = document.getElementById("canvas");//获取到canvas的对象，演员var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台canvas.width = canvas_width;canvas.height = canvas_height;var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";var aCode = sCode.split(",");var aLength = aCode.length;//获取到数组的长度for (var i = 0; i <= 3; i++) {var j = Math.floor(Math.random() * aLength);//获取到随机的索引值var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度var txt = aCode[j];//得到随机的一个内容show_num[i] = txt;var x = 10 + i * 20;//文字在canvas上的x坐标var y = 20 + Math.random() * 8;//文字在canvas上的y坐标context.font = "bold 23px 微软雅黑";context.translate(x, y);context.rotate(deg);context.fillStyle = randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}for (var i = 0; i <= 5; i++) { //验证码上显示线条context.strokeStyle = randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);context.stroke();}for (var i = 0; i <= 30; i++) { //验证码上显示小点context.strokeStyle = randomColor();context.beginPath();var x = Math.random() * canvas_width;var y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}}function randomColor() {//得到随机的颜色值var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";}//定义加载数据函数function loadData(){//发起请求var account = $(".account").val();var password = $(".password").val();var code = $("#text").val();var num = show_num.join("");console.log(code);$.cookie("tea_phone",account);if(code==''){alert('请输入验证码！');}else if(code == num){//document.getElementById(".input-val").val('');// draw(show_num);$.ajax({url:"login?action=teacher",type:"get",data:{"account":account,"password":password,},success:function(data){console.log(data);if(data.backcode==1){layer.msg(data.msg,{time:1000},function(){location.href = "router?path=教师框"});}else{layer.msg("账号不存在，请注册后登录");}},error:function(data){alert("登陆失败");}})}else{layer.alert("验证码错误，请重新输入");//layer.alert('验证码错误！\n你输入的是:  '+code+"\n正确的是:  "+num+'\n请重新输入！');$(".code").value='';draw(show_num);}}<canvas id="canvas" onclick="dj()" ></canvas>  （标签显示二维码）

史上最简便的可以直接用的登录验证码攻略（前后端都有）相关推荐

坑爹大冒险html5游戏在线玩,《史上最坑爹的大冒险》图文全通关攻略
<史上最坑爹的大冒险>是一款趣味解谜小游戏,目前已经登录了iOS平台.让我们一起来解密这款游戏吧. 这是一款很虐心的游戏,总共只能点击游戏150下.超过就需要重来.或者是去appStore ...
史上最全面的苏州工业园区虚拟住房补贴申请攻略
史上最全面的苏州工业园区虚拟住房补贴申请攻略一.前言 1.申请条件 2.申请流程 3.资格自测二.公司方面需要提供的东西三.申请时需要的信息 1.申请人信息 2.房东信息四.这个是申请办理虚拟 ...
史上最完美的Android沉浸式状态导航栏攻略
前言最近我在小破站开发一款新App,叫高能链.我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的.这次我将我踩坑,适配各机 ...
c语言gaokao题目,史上最全！高考语文各题型满分答题攻略，高一高二高三的都看看！...
原标题:史上最全!高考语文各题型满分答题攻略,高一高二高三的都看看! ==== 这几天各地学校陆续开始期中考试,今天小编就给大家整理了各题型的答题攻略,高一到高三的小伙伴都可以看一看. 高考目标:中等 ...
深度干货：史上最全的市场推广渠道大全（附攻略和技巧）
我相信,这或许是史上最全的推广渠道文章.如果你的企业正需要扩张,不妨看一看,或能有所帮助. 在开始推广之前,有一件重要的事要做,那就是市场定位,因为在后面的推广策略,渠道选择,营销诉求等都要围绕这个来 ...
史上最恐怖FLASH游戏咒怨（附通关攻略)
这个游戏被我评为恐怖游戏之最,恐怖感巳远超PS2上的零系列,我冒着被吓死的危险终于把这个游戏通了,下面是全攻略: 游戏要输入名字时,要在两个横杠上都输入字母,这游戏音效绝赞,建议开 ...
史上最详细阿里云服务器搭建及域名申请攻略
摘要:本文是用阿里云虚拟主机搭建服务器和测试的攻略,如果你想要的服务器是用来做:个人网站.微信开发.接口开发.小型数据库.毕业设计,那么你应该是找对了. 本文包含:阿里云虚拟主机搭建.万网域名申请和解 ...
【Python抽奖系统】好消息：史上最强商场抽奖活动来啦，超优惠，攻略快拿好啦~（超牛）
导语嘿!下午好,木子来上新啦~ 期待今天的内容嘛?挠头.jpg 日常等更新的小可爱们我来了.看看给大家带来了什么好东西
百度品牌全知道html,史上最全！百度SEM系数大合辑，我不信你都知道~~
原标题:史上最全!百度SEM系数大合辑,我不信你都知道~~ 作者:耿冰洋来源:www.27sem.com 目前中国网络搜索推广系统最完善的就是百度凤巢系统,百度也在不断地完善自己系统产品分类,我们从 ...
史上最短命 Windows 系统！比尔盖茨研发，用过几乎都是差评...
上一篇:3600万中国人在抖音"上清华" 来源:快科技地址:https://news.mydrivers.com/1/725/725357.htm35 年前,Windows 1. ...

史上最简便的可以直接用的登录验证码攻略（前后端都有）

史上最简便的可以直接用的登录验证码攻略（前后端都有）相关推荐

最新文章

热门文章