web登录：随机验证码的设计和实现

最新推荐文章于 2024-07-08 10:08:29 发布
最新推荐文章于 2024-07-08 10:08:29 发布
阅读量2.4w 收藏 36
点赞数 12
分类专栏： 精品 Java Web 开发 前端开发 文章标签： 验证码 优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clementad/article/details/48788361
版权
本文特点： 针对验证码的生成做了很多算法优化和调整，支持一个典型的验证码生成和验证流程，利用缓存服务器解决聚群部署架构中数据同步的问题。

基本需求：
  • 登录页面显示一个随机验证码图片、有背景干扰
  • 用户输入验证码大于3位之后，开始实时验证正确性，如果正确则在输入框后面提示（比如“√”）
  • 登录时，后台检查验证码是否正确
  • 支持服务器集群部署的架构

（绝对原创，转载请注明转自Clement-Xu的博客： http://blog.csdn.net/clementad/article/details/48788361）

交互过程和设计思路：
  1. 前端打开login页面时，向后端请求一个验证码图片；login页面点击验证码图片时，重新请求一个新图片
  2. 后端处理验证码图片请求：
    1. 随机生成一个字符串
    2. 随机生成一个UUID作为cookie的值，放进HttpServletResponse中送给前端
    3. 把cookie的值作为key、随机字符串作为value存进Redis中，设置过期时间（比如2分钟）
    4. 根据字符串生成一个图片：
      1. 随机打印一些小字母或数字作为图片的背景
      2. 把字符串拆成独立的字母，每个字母在一定范围内随机上下左右偏移，并旋转一个角度
      3. 通过调整偏移量和角度防止字符位置超出图片范围
    5. 把图片通过HttpServletResponse发送给前端
  3. 前端监控用户的输入，当验证码输入框中的文本长度大于3的时候，通过Ajax发送给后端校验
  4. 后端处理校验请求：
    1. 通过HttpServletRequest获取之前设置的cookie的值，把它作为key去Redis中获取value
    2. 比较Redis中获取的value和前端发送来的字符串，如果匹配，则同样以cookie的值作为key在Redis中写入验证通过的标识（比如"1"，同时设置过期时间，比如2分钟），否则写入或清空Redis中之前写入的标识
    3. 返回成功或失败的结果给前端
  5. 前端根据校验结果设置输入框后面的提示标识（比如“√”）
  6. 前端提交登录表单，此时不需要提交用户输入的验证码，因为后端已经根据cookie记录验证码是否正确
  7. 后端处理用户的登录表单：从cookie中取出值后，去Redis查找是否通过的标识（4.2中设置的），如果找不到成功的标识，则提示用户“验证码错误或已经过期”
  8. 前端判断登录是否成功，如果失败则重新向后端请求一个验证码图片、自动刷新验证码

效果图：

单独的验证码大图：


代码实现：
  • 前端页面
<html>
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	
	<script src="./resources/js/jquery-1.11.3.js" charset="UTF-8" type="text/javascript"></script>
	<script src="./resources/js/sys.js" charset="UTF-8" type="text/javascript"></script>
	<script src="./resources/js/md5.js" charset="UTF-8" type="text/javascript"></script>
	
	<link href="./resources/css/common.css" type="text/css" rel="stylesheet" />
	
	<style>
		.captcha_img{cursor:pointer;height:40px; width:173px;}
	</style>
	
</head>
<body>
	<form name="loginForm">
		<div>
			<div>请登录：</div>
			<div>
				<input type="text" maxlength="20" name="userAccount" placeholder="用户名" />
			</div>
			<div>
				<input type="password" name="password" placeholder="密码" />
			</div>
			<div>
				<input type="text" id="captcha" placeholder="验证码"/>
				<span id="captchaChecked" style="display:none;color:green;font-weight:bold">√</span>
			</div>
			<div>
				<img class="captcha_img" id="captchaImg" alt="点击刷新验证码">
			</div>
			<div>
				<button type="button" id="submit">登录</button>
			</div>
		</div>
	</form>
	
	<script>
		var captchaChecked = false;
		
		$(function() {
			refreshCaptcha();
			
			$("#captcha").on("keyup", checkCaptchaInput);
			$("#captchaImg").on("click", refreshCaptcha);
			$("#submit").on("click", goLogin);
		});

		function checkCaptchaInput(){
			var captchaText =$(this).val() 
			if(captchaText.length <=3 ){ //验证码一般大于三位
				$("#captchaChecked").hide();
				return;
			}
			
			ajaxRequest("/servlet/auth/verifyCaptcha", {captcha : captchaText},
				function callback(result) {
					if(result.code == "40001"){
						if(result.data==true){
							$("#captchaChecked").show();
							captchaChecked = true;
						}else{
							$("#captchaChecked").hide();
							captchaChecked = false;
						}
					}else{
						alert(result.message);
					}
				});
				
				if(event.keyCode==13){
					goLogin();
				}
		}

		function goLogin() {
			if(!captchaChecked){
				alert("请输入正确的验证码！");
				return;
			}
		
			var params = $("form").serializeObject();
			params.password = md5(params.password);
			ajaxRequest("/servlet/auth/webLogin", params,
				function callback(result) {
					if(result.code == "40001"){
						alert("登录成功");
						history.go(-1);
					}
				},
				function errorCallback(){ //发生错误，刷新验证码
					refreshCaptcha();
				});
		}

		function refreshCaptcha() {
			//重载验证码
			$('#captchaImg').attr('src', getApiRoot()+'/servlet/auth/captcha?' + Math.random());
		}
	</script>
</body>
</html>

  • 生成随机验证码和图片的工具类
	static char[] chars = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 
            'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

	/**
	 * 生成一个位数为count的随机验证码
	 * @param count
	 * @return
	 */
	public static String genCaptcha(int count) {
		StringBuilder captcha = new StringBuilder();
		
		for(int i=0; i<count; i++){
			char c = chars[ThreadLocalRandom.current().nextInt(chars.length)];//随机选取一个字母或数字
			captcha.append(c);
		}
		return captcha.toString();
	}
	
	/**
	 * 为一个验证码生成一个图片
	 * 
	 * 特性：
	 * - 颜色随机
	 * - 上下位置随机
	 * - 左右位置随机，但字符之间不会重叠
	 * - 左右随机旋转一个角度
	 * - 避免字符出界
	 * - 随机颜色的小字符做背景干扰
	 * - 根据字符大小自动调整图片大小、自动计算干扰字符的个数
	 * 
	 * @author XuJijun
	 *  
	 * @param captcha
	 * @return
	 */
	public static BufferedImage genCaptchaImg(String captcha){
		ThreadLocalRandom r = ThreadLocalRandom.current();

		int count = captcha.length();
		int fontSize = 80; //code的字体大小
		int fontMargin = fontSize/4; //字符间隔
		int width = (fontSize+fontMargin)*count+fontMargin; //图片长度
		int height = (int) (fontSize*1.2); //图片高度，根据字体大小自动调整；调整这个系数可以调整字体占图片的比例
		int avgWidth = width/count;	//字符平均占位宽度
		int maxDegree = 26;	//最大旋转度数
		
		//背景颜色
		Color bkColor = Color.WHITE;
		//验证码的颜色
		Color[] catchaColor = {Color.MAGENTA, Color.BLACK, Color.BLUE, Color.CYAN, Color.GREEN, Color.ORANGE, Color.PINK};
		
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g = image.createGraphics();
		
		//填充底色为灰白
		g.setColor(bkColor);
		g.fillRect(0, 0, width, height);
		
		//画边框
		g.setColor(Color.BLACK);
		g.drawRect(0, 0, width-1, height-1);
		
		//画干扰字母、数字
		int dSize = fontSize/3; //调整分母大小以调整干扰字符大小
		Font font = new Font("Fixedsys", Font.PLAIN, dSize);
		g.setFont(font);
		int dNumber = width*height/dSize/dSize;//根据面积计算干扰字母的个数
		for(int i=0; i<dNumber; i++){
			char d_code = chars[r.nextInt(chars.length)];
			g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
			g.drawString(String.valueOf(d_code), r.nextInt(width), r.nextInt(height));
		}
		
		//开始画验证码：
		
		// 创建字体   
		font = new Font(Font.MONOSPACED, Font.ITALIC|Font.BOLD, fontSize);
		// 设置字体     
		g.setFont(font);

		for(int i=0; i<count; i++){
			char c = captcha.charAt(i);
			g.setColor(catchaColor[r.nextInt(catchaColor.length)]);//随机选取一种颜色
			
			//随机旋转一个角度[-maxDegre, maxDegree]
			int degree = r.nextInt(-maxDegree, maxDegree+1);
			
			//偏移系数，和旋转角度成反比，以避免字符在图片中越出边框
			double offsetFactor = 1-(Math.abs(degree)/(maxDegree+1.0));//加上1，避免出现结果为0
			
			g.rotate(degree * Math.PI / 180); //旋转一个角度
			int x = (int) (fontMargin + r.nextInt(avgWidth-fontSize)*offsetFactor); //横向偏移的距离
			int y = (int) (fontSize + r.nextInt(height-fontSize)*offsetFactor); //上下偏移的距离
			
			g.drawString(String.valueOf(c), x, y); //x,y是字符的左下角，偏离原点的距离！！！
			
			g.rotate(-degree * Math.PI / 180); //画完一个字符之后，旋转回原来的角度
			g.translate(avgWidth, 0);//移动到下一个画画的原点
			//System.out.println(c+": x="+x+" y="+y+" degree="+degree+" offset="+offsetFactor);
			
			//X、Y坐标在合适的范围内随机，不旋转：
			//g.drawString(String.valueOf(c), width/count*i+r.nextInt(width/count-fontSize), fontSize+r.nextInt(height-fontSize));
		}
		
		g.dispose();
		
		return image;
	}


  • 后端常量定义
	//web登录相关：
	/** 验证码，Hash类型， 后面跟着cookie Id */
	public static final String CAPTCHA = "captcha:";
	/** 验证码，field，验证码内容*/
	public static final String CAPTCHA_CODE = "code";
	/** 验证码，field，验证码是否已经验证过 */
	public static final String CAPTCHA_CHECKED = "checked";
	/** 验证码失效时间，分钟 */
	public static final int CAPTCHA_EXPIRED = 2;

  • 后端Controller代码
@RestController
@RequestMapping("/servlet/auth")
public class AuthController {
	@RequestMapping(value = "/captcha")
	public void captcha(HttpServletRequest request, HttpServletResponse response){
		try {
			//把校验码转为图像
			BufferedImage image = authService.genCaptcha(response);
			
			response.setContentType("image/jpeg");
	        
	        //输出图像
			ServletOutputStream outStream = response.getOutputStream();
			ImageIO.write(image, "jpeg", outStream);
			outStream.close();
		} catch (Exception ex) {
			logger.error(ex.getMessage(), ex);
		}
	}

	/**
	 * 检查验证码是否正确
	 * @param request
	 * @param map
	 * @return
	 */
	@RequestMapping(value = "/verifyCaptcha", method = RequestMethod.POST)
	public JsonResult verifyCaptcha(HttpServletRequest request, @RequestBody Map<String, String> map) {
		try {
			return authService.verifyCaptcha(request, map);
		} catch (Exception ex) {
			logger.error(ex.getMessage(), ex);
			return new JsonResult(ReturnCode.EXCEPTION, "检查验证码失败！", null);
		}
	}
	
	/**
	 * 用户登录（web）
	 * 
	 * @param map（userName, password）
	 * @return
	 */
	@RequestMapping(value = "/webLogin", method = RequestMethod.POST)
	public JsonResult webLogin(HttpServletRequest request, HttpServletResponse response, @RequestBody Map<String, String> map) {
		try {
			//获取验证码的cookie id
			String captchaCookie = WebUtils.getCookieByName(request, "YsbCaptcha");
			map.put("captchaCookie", captchaCookie);
			
			return authService.webLogin(map, response, true);
		} catch (Exception ex) {
			logger.error(ex.getMessage(), ex);
			return new JsonResult(ReturnCode.EXCEPTION, "用户登录失败！", null);
		}
	}
}

  • 后端Service代码
	/**
	 * 用户web登录，response用于写入token到cookie中
	 */
	@Override
	public JsonResult webLogin(Map<String, String> map,	HttpServletResponse response, boolean captchaRequired) {
		
		//检查验证码是否已经被验证过
		if(captchaRequired){
			String cookieId = map.get("captchaCookie");
			String storedCaptcha = redisOperator.hget(RedisConstants.CAPTCHA+cookieId, RedisConstants.CAPTCHA_CHECKED);
			if(!"1".equals(storedCaptcha)){
				return new JsonResult(ReturnCode.ERROR, "验证码错误或已经过期！", null);
			}
		}
		
		// 验证用户名密码
		String userAccount = map.get("userAccount");
		String pw = map.get("password");
		
		if(StringUtils.isEmpty(userAccount) || StringUtils.isEmpty(pw)){
			return new JsonResult(ReturnCode.PARAMSERROR, "用户名或密码不能为空！", null);
		}
		
		TabUser user = checkUserExist(userAccount, 1);
		
		if(user==null || !user.getPassword().equals(EncryptUtils.MD5Str(pw + user.getLoginSalt()))){//前端送过来的是md5编码后的密码，小写
			return new JsonResult(ReturnCode.ERROR, "用户名或密码错误！", null);
		}
		
		
		// TODO 生成token，
		
		// TODO token存进redis，过期时间为24小时（不可能有人连续24小时不关浏览器的吧？）
		
		// TODO token放进response的cookie中，maxAge=0表示关闭浏览器后cookie就失效
		
		// TODO 记录登录日志
		
		return new JsonResult(ReturnCode.SUCCESS, "登录成功", null);
	}

	
	/**
	 * 生成一个验证码并保存到redis中
	 */
	@Override
	public BufferedImage genCaptcha(HttpServletResponse response) {
	
		//生成一个校验码
		String captcha = WebUtils.genCaptcha(5);
		
		//生成一个cookie ID，并塞进response里面
		String cookieId = UUID.randomUUID().toString().replace("-", "").toUpperCase();
		WebUtils.addCookie(response, "YsbCaptcha", cookieId, RedisConstants.CAPTCHA_EXPIRED);
		
		//把校验码、是否已经通过校验（缺省不设置为0）保存到redis中，以cookie ID 为key
		redisOperator.hset(RedisConstants.CAPTCHA+cookieId, RedisConstants.CAPTCHA_CODE, captcha, RedisConstants.CAPTCHA_EXPIRED*60);
		
		//把校验码转为图像
		BufferedImage image = WebUtils.genCaptchaImg(captcha);
		return image;
	}

	/**
	 * 检查验证码是否正确，并把结果写入redis中
	 */
	@Override
	public JsonResult verifyCaptcha(HttpServletRequest request, Map<String, String> map) {
		
		String receivedCaptcha = map.get("captcha"); 
		
		if(!StringUtils.isEmpty(receivedCaptcha)){
			String cookieId = WebUtils.getCookieByName(request, "YsbCaptcha");
			String storedCaptcha = redisOperator.hget(RedisConstants.CAPTCHA+cookieId, RedisConstants.CAPTCHA_CODE);
			if(receivedCaptcha.toUpperCase().equals(storedCaptcha)){
				redisOperator.hset(RedisConstants.CAPTCHA+cookieId, RedisConstants.CAPTCHA_CHECKED, "1", RedisConstants.CAPTCHA_EXPIRED*60);
				return new JsonResult(ReturnCode.SUCCESS, "有效的验证码。", true);
			}else{
				redisOperator.hset(RedisConstants.CAPTCHA+cookieId, RedisConstants.CAPTCHA_CHECKED, "0", RedisConstants.CAPTCHA_EXPIRED*60);
			}
		}
		
		return new JsonResult(ReturnCode.SUCCESS, "无效的验证码。", false);
	}




Clement-Xu
关注
  • 12
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
史上最简便的可以直接用的登录验证码攻略（前后端都有）
qq_52357485的博客
07-09 2386
史上最好用的可以直接复制粘贴的验证码实现攻略
为什么Web端登录需要验证码？
DX_TECH2022的博客
04-21 2775
很多朋友们对于登录必然遇到的验证码这个事情很不理解，增加用户操作的冗余性，直接登录很方便，为什么web端登录要添加个验证码？直到上周，一家做业务安全的公司给出我们现在Web网站的安全报告，我才意识到：验证码的本质属性安全性，除了防止恶意破解密码、刷票、羊毛党、论坛灌水、爬虫等行为外，还是用户与网站信息安全的有力保障。 下面是我们技术人员给的从安全角度看，为什么Web登录需要验证码？ 因为你的WEB站有时会碰到客户机恶意攻击。其中一种很常见的攻击手段就是身份欺骗，它通过在客户端脚本写入一些代码，然后利用其
登录验证码
m0_74958046的博客
11-12 1047
登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。
SpringBoot后端验证码-防止密码爆破功能
最新发布
Alphamilk的博客
07-08 416
本文描述了一个结合Java后端与Vue.js前端的验证码系统实现方案，涵盖随机验证码生成、Base64编码传输及用户界面动态显示等关键环节。
Java实现登录验证码的功能
沐雨橙风ιε的博客
09-16 6370
Java实现登录验证码的功能
【验证码】登录界面生成随机验证图片
qq_37634156的博客
02-16 1258
在登录界面生成验证码用于校验登录，如下图所示 生成验证码 生成验证码的类，用的是@WebServlet注解的servlet. 生成的验证码会先放到session中，然后再传到前端显示，用于登录的时候验证。 package com.sed.zuul.base.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet.
简单的Web登录带验证码
Drama55的博客
04-12 449
简单的web登录带验证码 验证码的生成 为何会有验证码的存在呢？或者说验证码存在的意义，黑格尔曾经在《法哲学原理》提出存在即合理是客观唯心主义的理论，意思是凡是合乎理性的东西都是现实的；凡是现实的东西都是合乎理性的。验证码的存在是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用...
如何实现WEB界面的随机生成验证码功能
qq_54393060的博客
02-26 427
为了提高网站的效率对数组strs中的元素设定去掉了1和l还有0和o这些容易混淆的元素，代码中strs数组的元素并没写全，大家参考的时候可以根据自己的需求来。 import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.util.Random; import static java.awt.Color.*; ...
JS实现随机验证码登录
weixin_62765236的博客
10-10 293
JS实现随机验证码登录
Django实现登录随机验证码的示例代码
09-20
本篇文章将介绍如何在Django中实现一个简单的登录随机验证码功能。 首先，我们需要生成随机验证码。在给出的代码中，生成验证码的过程包括以下步骤： 1. **定义字体路径**：`font_path` 变量用于指定字体文件的...
Vue 实现登录界面验证码功能
10-15
在Vue中实现登录界面的验证码功能可以通过创建一个专门的组件来完成，这个组件可以生成并显示一个随机的、复杂的图片验证码。 #### 1. 创建验证码组件 在Vue项目中，创建一个新的组件`SIdentify`，它将负责生成...
js实现网页随机验证码
01-18
本文实例为大家分享了js实现网页随机验证码的具体代码，供大家参考，具体内容如下 1、现在全选网站为了防止用户利用机器人自动注册、登录、灌水，采用了验证码技术。所谓验证码，就是系统将一串随机产生的数字或符号...
Java Web实现登录页面验证码验证功能
08-25
Java Web实现登录页面验证码验证功能 本文主要介绍了Java Web登录页面验证码验证功能的实现，通过实例代码详细地演示了验证码的生成、验证和应用。验证码是防止应用恶意发送数据的一种重要手段，通过在登录页面添加...
java如何生成登录随机验证码
08-25
在java中，生成登录随机验证码可以通过多种方式实现，本文将详细介绍java如何生成登录随机验证码。 首先，需要了解验证码的基本原理。验证码是一种图像识别验证码，通过生成随机字符然后将其渲染到图片中，用户需要...
web登录验证码生成
weixin_42132143的博客
03-01 470
目的：实现在登录表单验证码的生成 声明：我是参考别人的例子，代码大部分也是引用的 原理：是在要显示验证码的地方用&lt;img&gt;，它的src指向了另一个生成验证码的jsp页面（用controller的url指向一个jsp页面），在生成验证码jsp页面的java代码里生成一张验证码图片 代码里注释已经非常详情，这里就不做多说了！ 提交表单的登录页面 login.jsp ...
Web登录常用验证码功能
05-05 7300
目前大多网站登录时要么是回答一个问题，要么是输入验证码，主要是基于安全性方面的考虑，至于怎样使用验证码，我觉得有必要说一下，很多人上网一搜很多程序却不知道怎么用，为此我要详细讲解一下 先说第一种，就是页面输入后到后端验证验证码是否是正确的  像上图这样各种各样的验证码大家估计都遇到过，一般来说验证码从内容来分主要有纯数字的例如最后两个，字母数字混合的例如前三个或者是纯中文的例如
web实现验证码和简单的登录注册
洋葱专栏-有灵魂的程序员
07-24 544
1、注册对应的servlet package outservlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpSe
Web登录其实没那么简单
weixin_34050389的博客
11-16 73
01 一个例子描述信息安全 标准的HTML语法中，支持在form表单中使用<input></input>标签来创建一个HTTP提交的属性，现代的WEB登录中，常见的是下面这样的表单： <form action = "http://localhost:8080/Application/login" method = "POS...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值