后台系统通用验证码方案

最新推荐文章于 2024-07-10 14:33:08 发布

Nightliar

最新推荐文章于 2024-07-10 14:33:08 发布

阅读量1.8k

点赞数

分类专栏：实例文章标签：登录验证码

本文链接：https://blog.csdn.net/Nightliar/article/details/79041049

版权

实例专栏收录该内容

16 篇文章 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);
		}
	}

Nightliar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
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(..
复制链接

扫一扫

专栏目录