Java# java实现简单的验证码登录

Posted 2021-09-06 LRcoding

1. 验证码类

package com.sdhsie.web.system.controller;

import com.sdhsie.base.util.Const;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.font.FontRenderContext;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;

/** 
 * 类名称：SecCodeController
 * 类描述： 
 * 作者单位： 
 * 联系方式：
 * @version
 */
@Controller
@RequestMapping("/code")
public class SecCodeController {

	@RequestMapping
	public void generate(HttpSession session,HttpServletResponse response){
		ByteArrayOutputStream output = new ByteArrayOutputStream();
		String code = drawImg(output);
         // 放入session
		session.setAttribute("secCode", code);
		try {
			ServletOutputStream out = response.getOutputStream();
			output.writeTo(out);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	private String drawImg(ByteArrayOutputStream output){
		String code = "";
		for(int i=0; i<4; i++){
			code += randomChar();
		}
		int width = 120;
		int height = 60;
		BufferedImage bi = new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);
		Font font = new Font("Times New Roman",Font.PLAIN,40);
		Graphics2D g = bi.createGraphics();
		g.setFont(font);
		Color color = new Color(66,2,82);
		g.setColor(color);
		g.setBackground(new Color(226,226,240));
		g.clearRect(0, 0, width, height);
		FontRenderContext context = g.getFontRenderContext();
		Rectangle2D bounds = font.getStringBounds(code, context);
		double x = (width - bounds.getWidth()) / 2;
		double y = (height - bounds.getHeight()) / 2;
		double ascent = bounds.getY();
		double baseY = y - ascent;
		g.drawString(code, (int)x, (int)baseY);
		g.dispose();
		try {
			ImageIO.write(bi, "jpg", output);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return code;
	}
	
	private char randomChar(){
		Random r = new Random();
//		String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
		String s = "0123456789";
		return s.charAt(r.nextInt(s.length()));
	}
}

2. 前端页面

<div>
    <input type="text" required="required" placeholder="用户名" id="userName" value="huzc"></input>
<input type="password" required="required" placeholder="密码" id="password" value="huzc"></input>
<div>
    <input type="text" required placeholder="验证码" id="code" name="code" style="width: 205px">
    <div style="float: right">
        <img id="codeImg" alt="点击更换" title="点击更换" src="" width="60" height="38;"/>
    </div>
</div>
<button onclick="sub()" id="loginBtn">登录</button>
<span id="errMsg" style="color: red"></span>
</div>


<script type="text/javascript">
    $(function(){
        changeCode();
        $("#codeImg").bind("click",changeCode);

        $("#code").focus();
    });

    $(document).keyup(function(event){
        if(event.keyCode ==13){
            $("#loginBtn").trigger("click");
        }
    });

    function genTimestamp(){
        var time = new Date();
        return time.getTime();
    }

    function changeCode(){
        $("#codeImg").attr("src","code?t="+genTimestamp());
    }
</script>

3. controller处理

@PostMapping("/auth")
@ResponseBody
public String auth(String userName, String password, String code, HttpSession session){
    // secCode 在 SecCodeController里放入，后期应该放到常量类中
    if (session.getAttribute("secCode").equals(code)) {
        // 用户名，密码验证
    } else {
        return "codeError";
    }
    return "fail";
}