后台系统通用验证码方案

落日映苍穹つ 2022-06-02 11:44 264阅读 0赞

1.style.css

@import url('reset.css');
    @import url('plug-ins/customScrollbar.min.css');
    .activeNav{
    	background-color: #333e48 ;
    }
    .panel-ft{
    	 margin-top: -20px;
    }
    
    .login-page {
      background: url(../imgs/bg9.png) no-repeat fixed;
      overflow: hidden;
      background-size: cover;
      height: 100%;
    }
    .authCardImg{
    	width:200px;height:120px;
    }
    
    .login-contain {
      width: 340px;
      height: auto;
      position: relative;
      left: 77%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(19, 32, 48, 0.25);
      background: #ffffff;
    /*   border-bottom: 5px #4bcf99 solid;
     */  border-radius: 2px;
    }
    .login-contain header {
      padding: 10px 0;
      text-align: center;
      color: #97a4b1;
      font-size: 14px;
      border-bottom: 1px #4bcf99 solid;
      letter-spacing: 5px;
    }
    .login-contain header h1 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #4f5f6f;
    }
    .login-contain header p {
      text-transform: uppercase;
      font-size: 12px;
      color: #d7dde4;
    }
    .login-contain .form-content {
      margin: 40px 50px;
    }
    .login-contain .form-content li {
      margin-bottom: 15px;
      overflow: hidden;
    }
    .login-contain .form-content li:last-child {
      margin: 0;
    }
    .login-contain .form-content li .form-control {
      background: none;
      border-color: #d7dde4;
    }
    .login-contain .form-content li .btm-info {
      font-size: 12px;
      text-align: center;
      color: #d7dde4;
    }
    .login-contain .form-content li .tips {
      display: none;
      margin-top: 5px;
      font-size: 12px;
      color: #9ca2a8;
    }
    .login-contain .form-content li .tips mark {
      color: inherit;
    }
    a {
      color: #969696;
    }
    a:hover {
      color: #33be85;
    }
    a:active {
      color: #33be85;
    }

2.login.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>验证码demo</title>
    <meta name="keywords"  content="设置关键词..." />
    <meta name="description" content="设置描述..." />
    <meta name="author" content="DeathGhost" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="icon" href="../static/base/images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../static/base/javascript/plug-ins/layerUi/mobile/need/layer.css" />
    <link rel="stylesheet" type="text/css" href="../static/base/css/style.css" />
    <script src="../static/base/javascript/jquery.js"></script>
    <script src="../static/js/tools.js"></script>
    <script src="../static/base/javascript/plug-ins/customScrollbar.min.js"></script>
    <script src="../static/base/javascript/pages/login.js"></script>
    
    <style type="text/css">
      .input1 {
       	 	padding: 7px 15px;
            width: 100%;
            border-radius:5px;
    	}
    	#adminName,#adminPwd{
            background-color: white;
    	}
    	.df div{
    		margin-bottom: 10px
    	}
    
    	input:-webkit-autofill {
    	 -webkit-box-shadow: 0 0 0px 1000px white inset;
    	 -webkit-text-fill-color: #333;
    	}
    
    </style>
    </head>
    <body class="login-page" >
    	<section class="login-contain" style="border-radius:15px">
    		<header>
    			<h1>登录</h1>
    		</header>
    		<div class="form-content">
    			<ul style="margin-top: -27px">
    				<li>
    					<input οnkeydοwn="KeyDown()"  autocomplete="off" style="background-color: white;border-radius:7px;" type="text" placeholder="用户名..." class="input1" id="adminName"/>
    				</li>
    				<li>
    					<input οnkeydοwn="KeyDown()"  autocomplete="off" style="background-color: white;border-radius:7px" type="password" placeholder="密码..." class="input1" id="adminPwd"/>
    				</li>
    				<li>
    					<div class="form-group">
    						<div style="float: left;"  class=""><input οnkeydοwn="KeyDown()" style="padding:6px 15px;width:122px;border-radius:5px" type="text" maxlength="5" id="code"></div>
    						<div οnclick="flushimg()" style="float: left;margin-left: 10px;height: 36px;overflow: hidden;border-bottom: 1px solid;" ><img id="codeimg" ></div>
    					</div>
    				</li>
    				<li>
    					<button style="background-color: #4BCFA2;padding: 12px 15px;" class="btn btn-lg btn-block" οnclick="login()">立即登录</button>
    				</li>
    			</ul>
    		</div>
    	</section>
    <div class="mask"></div>
    <script src="../static/base/javascript/plug-ins/layerUi/layer.js"></script>
    <script type="text/javascript">
    var uuid = guid()
    
    flushimg()
    
    function guid() {
    	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
    		function(c) {
    			var r = Math.random() * 16 | 0, v = c == 'x' ? r
    					: (r & 0x3 | 0x8);
    			return v.toString(16);
    		});
    }
    
    function flushimg(){
    	var imgsrc = serverWeb+"/image/genCode?v="+Math.random()+"&uuid="+uuid
    	$("#codeimg").attr("src",imgsrc)
    	$("#code").val("")
    }
    
    //设置按enter键即提交
    function KeyDown(){
      if (event.keyCode == 13){
        event.returnValue=false;
        event.cancel = true;
        login();
      }
    }
    
    function login() {
    	 var code = $("#code").val()
    	/* if(!code){
    		layer.msg('请输入验证码', {time: 1000});
    		return false
    	} */
        if ($("#username").val() == "" || $("#password").val() == "") {
            layer.msg('请输入用户名或密码进行登录', {time: 1000});
            return;
        }
      
        $.ajax({
        	async:false,
            type: 'POST',
            url: serverWeb+'/dologin',
            contentType: "application/x-www-form-urlencoded",
            data: {
                    account: $("#adminName").val(),
                    pwd: $("#adminPwd").val(),
                    uuid: uuid,
                    code:code
            },
            datatype:'json',
            success: function(result) {
            	var result = JSON.parse(result); 
                if (result.status == 'success') {
                    window.location.href= serverWeb+'index';
                } else {
                	if(result.msg){
                		alert(result.msg)
                	}else{
    	                // 登录失败
    	                 layer.msg('用户名或者密码错误，请重新登录', {time: 1000});
                	}
                    flushimg()
                }
            }
        });
    }
    </script>
    </body>
    </html>

3.ImageController

package com.project.controller;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import redis.clients.jedis.Jedis;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.project.utils.RedisUtil;
      
    @Controller  
    @RequestMapping("/image/")  
    public class ImageController  extends BaseController{ 
    	
    	@RequestMapping("genCode")  
        public void  genCZCode(HttpServletRequest request, HttpServletResponse response){
        	logger.info("genCode参数 : " + JSON.toJSONString(request.getParameterMap()));
        	Jedis jedis =RedisUtil.getJedis();
        	try {
            	System.setProperty("java.awt.headless", "true");
            	// 响应头信息
            	response.setHeader("Pragma", "No-Cache");
            	response.setHeader("Cache-Control", "no-cache");
            	response.setDateHeader("Expries", 0);
            	String uuid = request.getParameter("uuid");
            	// 随机数生成类
            	Random random = new Random();
            	
            	// 定义验证码的位数
            	int size = 5;
            	
            	// 定义变量保存生成的验证码
            	String vCode = "";
            	char c;
            	// 产生验证码
            	for (int i = 0; i < size; i++) {
            		// 产生一个26以内的随机整数
            		int number = random.nextInt(26);
            		// 如果生成的是偶数，则随机生成一个数字
            		if (number % 2 == 0) {
            			c = (char) ('0' + (char) ((int) (Math.random() * 10)));
            			// 如果生成的是奇数，则随机生成一个字母
            		} else {
            			c = (char) ((char) ((int) (Math.random() * 26)) + 'A');
            		}
            		vCode = vCode + c;
            	}
            	// 保存生成的5位验证码
                 jedis.set(uuid+"-code", vCode);
                 System.out.println(uuid+"-code---------"+vCode);
                 jedis.expire(uuid+"-code", 600);
            	// 验证码图片的生成
            	// 定义图片的宽度和高度
            	int width = (int) Math.ceil(size * 20);
            	int height = 50;
            	BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            	// 获取图片的上下文
            	Graphics gr = image.getGraphics();
            	// 设定图片背景颜色
            	gr.setColor(Color.WHITE);
            	gr.fillRect(0, 0, width, height);
            	// 设定图片边框
            	gr.setColor(Color.GRAY);
            	gr.drawRect(0, 0, width - 1, height - 1);
            	// 画十条干扰线
            	for (int i = 0; i < 5; i++) {
            		int x1 = random.nextInt(width);
            		int y1 = random.nextInt(height);
            		int x2 = random.nextInt(width);
            		int y2 = random.nextInt(height);
            		gr.setColor(randomColor());
            		gr.drawLine(x1, y1, x2, y2);
            	}
            	// 设置字体，画验证码
            	gr.setColor(randomColor());
            	gr.setFont(randomFont());
            	gr.drawString(vCode, 10, 22);
            	// 图像生效
            	gr.dispose();
            	// 输出到页面
    			ImageIO.write(image, "PNG", response.getOutputStream());
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}finally {
    			RedisUtil.returnResource(jedis);
    		}
        }
        
        @RequestMapping("validateCode")  
        @ResponseBody
        public String  validateCode(HttpServletRequest request, HttpServletResponse response){
        	logger.info("validateCode参数 : " + JSON.toJSONString(request.getParameterMap()));
        	JSONObject result = new JSONObject();
        	Jedis jedis = RedisUtil.getJedis();
    		try {
    			String uuid = request.getParameter("uuid");
    			String code = request.getParameter("code");
    			String cacheCode = jedis.get(uuid + "-code");
    			if(StringUtils.isEmpty(code) || StringUtils.isEmpty(cacheCode)){
    				result.put("status", "false");
    				result.put("msg", "验证码错误");
    			}else if(code.equalsIgnoreCase(cacheCode)){
    				result.put("status", "true");
    				result.put("msg", "验证通过");
    			}else{
    				result.put("status", "false");
    				result.put("msg", "验证码错误");
    			}
    			
    		} catch (Exception e) {
    			e.printStackTrace();
    			result.put("status", "false");
    		}finally {
    			RedisUtil.returnResource(jedis);
    		}
        	return result.toJSONString();
        }
    
        // 生成随机的颜色
        private Color randomColor() {
            int red = r.nextInt(150);
            int green = r.nextInt(150);
            int blue = r.nextInt(150);
            return new Color(red, green, blue);
        }
    
        private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
        private Random r = new Random();
    
        // 生成随机的字体
        private Font randomFont() {
            int index = r.nextInt(fontNames.length);
            String fontName = fontNames[index];// 生成随机的字体名称
            int style = r.nextInt(4);
            int size = r.nextInt(3) + 24; // 生成随机字号, 24 ~ 28
            return new Font(fontName, style, size);
        }
      
    }

4.BaseController

@RequestMapping(value = "dologin")
    	@ResponseBody
    	public String login(HttpServletRequest request){
    		logger.info("login参数：" + JSON.toJSONString(request.getParameterMap()));
    		JSONObject result = new JSONObject();
    		Jedis jedis = RedisUtil.getJedis();
    		try {
    			result.put("status", "success");
    			String uuid = request.getParameter("uuid");
    			String code = request.getParameter("code");
    			String cacheCode = jedis.get(uuid + "-code");
    			if(StringUtils.isEmpty(code) ){
    				result.put("status", "fail");
    				result.put("msg", "输入验证码错误");
    				return result.toJSONString();
    			}else if( StringUtils.isEmpty(cacheCode) ){
    				result.put("status", "fail");
    				result.put("msg", "验证码异常");
    				return result.toJSONString();
    			}else if(StringUtils.isEmpty(uuid)){
    				result.put("status", "fail");
    				result.put("msg", "验证码异常唯一码错误");
    				return result.toJSONString();
    			}else if(code.equalsIgnoreCase(cacheCode)){
    				result.put("msg", "验证通过");
    			}else{
    				result.put("status", "fail");
    				result.put("msg", "验证码错误");
    				return result.toJSONString();
    			}
    			
    			String account = request.getParameter("account");
    			String pwd = request.getParameter("pwd");
    			String pwdMd5 = MD5Encoder.encode(pwd);
    			User sysUser = userService.loginSys(account, pwdMd5);
    			if(sysUser == null){
    				result.put("status", "fail");
    				result.put("msg", "账号或密码错误");
    				return result.toJSONString();
    			}
    			if(!sysUser.getIsenabled()){
    				result.put("status", "fail");
    				result.put("msg", "账号已禁用");
    				return result.toJSONString();
    			}
    			sysUser.setPassword(null);
    			request.getSession().setAttribute("user", sysUser);
    			return result.toJSONString();
    		} catch (Exception e) {
    			e.printStackTrace();
    			result.put("status", "fail");
    			result.put("msg", "系统异常,请重新登录");
    			return result.toJSONString();
    		} finally{
    			RedisUtil.returnResource(jedis);
    		}
    	}