登录界面验证码的实现

Javaweb实现验证码

前端

添加样式

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>FM_blog</title>
  <link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="res/css/main.css">
  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>

编写代码

        <div>  
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  				<legend>锋芒博客登录</legend>
			</fieldset>
        </div>            
<div class="layui-container fly-marginTop">
  <div class="fly-panel fly-panel-user">
    <div class="layui-tab layui-tab-brief" >
      <ul class="layui-tab-title">
        <li class="layui-this">登入</li>
        <li><a href="reg.jsp">注册</a></li>
      </ul>
      <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show">
          <div class="layui-form layui-form-pane">
            <form role="form" method="POST" name="login" action="LoginServlet">
              <div class="layui-form-item">
               	<label for="L_username" class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                <input type="text" class="layui-input" name="userName" id="L_username" placeholder="Admin..."/>
                </div>
              </div>   
              <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="password" name="userPassword" placeholder="Password...">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" placeholder="点击图片切换" autocomplete="off" required name = "validationCode" >
                </div>
                <div class="layui-form-mid">
                  <span><img  src="ValidationCodeServlet" id="CreateCheckCode" onclick="change()"/></span>
                </div>
              </div>
              <div class="layui-form-item">
                <input class="layui-btn" type="submit" name="login" value="登录"/>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>		

<script type="text/javascript">
function change(){ 
	document.getElementById("CreateCheckCode").src="ValidationCodeServlet?"+Math.random(); 
	} 
</script>

配置web.xml文件

<servlet>
    <description>com.FM.servlet</description>
    <display-name>com.FM.servlet.ValidationCodeServlet</display-name>
    <servlet-name>ValidationCodeServlet</servlet-name>
    <servlet-class>com.FM.servlet.ValidationCodeServlet</servlet-class>
 </servlet>

<servlet-mapping>
    <servlet-name>ValidationCodeServlet</servlet-name>
    <url-pattern>/ValidationCodeServlet</url-pattern>
  </servlet-mapping>

后台

package com.FM.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.OutputStream;
import java.util.Random;


public class ValidationCodeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public ValidationCodeServlet() {
        super();
        
    }

	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		  //获得验证码集合的长度
        int charsLength = codeChars.length();
        //下面3条记录是关闭客户端浏览器的缓冲区
        //这3条语句都可以关闭浏览器的缓冲区，但是由于浏览器的版本不同，对这3条语句的支持也不同
        //因此，为了保险起见，同时使用这3条语句来关闭浏览器的缓冲区
        resp.setHeader("ragma", "No-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", 0);
        //设置图形验证码的长和宽
        int width = 90, height = 30;
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics(); //获得用于输出文字的Graphics对象
        Random random = new Random();
        g.setColor(getRandomColor(180, 250));
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman",Font.ITALIC,height));
        g.setColor(getRandomColor(120, 180));
        //用户保存最后随机生成的验证码
        StringBuilder validationCode = new StringBuilder();
        //验证码的随机字体
        String[] fontNames = {"Times New Roman","Book antiqua","Arial"};
        //随机生成4个验证码
        for(int i = 0; i < 4; i++){
            //随机设置当前验证码的字符的字体
            g.setFont(new Font(fontNames[random.nextInt(3)],Font.ITALIC,height));
            //随机获得当前验证码的字符
            char codeChar = codeChars.charAt(random.nextInt(charsLength));
            validationCode.append(codeChar);
            //随机设置当前验证码字符的颜色
            g.setColor(getRandomColor(10, 100));
            //在图形上输出验证码字符，x和y都是随机生成的
            g.drawString(String.valueOf(codeChar), 16*i + random.nextInt(7), height-random.nextInt(6));
        }
        //获得HttpSession对象
        HttpSession session = req.getSession();
        //设置session对象5分钟失效
        session.setMaxInactiveInterval(5*60);
        //将验证码保存在session对象中,key为validation_code
        session.setAttribute("validation_code", validationCode.toString());
        //关闭Graphics对象
        g.dispose();
        OutputStream outS = resp.getOutputStream();
        ImageIO.write(image, "JPEG", outS);

    }

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		
		doGet(request, response);
	}
	//图形验证码的字符集，系统将随机从这个字符串中选择一些字符作为验证码
    private static String codeChars = "123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";
    //返回一个随机颜色
    private static Color getRandomColor(int minColor, int maxColor){

        Random random = new Random();
        if(minColor > 255){
            minColor = 255;
        }
        if(maxColor > 255){
            maxColor = 255;
        }
        //获得r的随机颜色值
        int red = minColor + random.nextInt(maxColor-minColor);
        //g
        int green = minColor + random.nextInt(maxColor-minColor);
        //b
        int blue = minColor + random.nextInt(maxColor-minColor);
        return new Color(red,green,blue);

    }
}

效果图：

Springboot添加验证码

项目结构

依赖

	<!-- 验证码 -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

控制类

CommonController

package com.habse.car_position.Controller;


import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;

/*
验证码
 */

@Controller
public class CommonController {

    @Autowired
    private DefaultKaptcha captchaProducer;

    @GetMapping("/common/kaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        byte[] captchaOutputStream = null;
        ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();
        try {
            //生产验证码字符串并保存到session中
            String verifyCode = captchaProducer.createText();
            httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);
            BufferedImage challenge = captchaProducer.createImage(verifyCode);
            ImageIO.write(challenge, "jpg", imgOutputStream);
        } catch (IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        captchaOutputStream = imgOutputStream.toByteArray();
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
        responseOutputStream.write(captchaOutputStream);
        responseOutputStream.flush();
        responseOutputStream.close();
    }
}

KaptchaConfig

package com.habse.car_position.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

import java.util.Properties;

@Component
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha(){
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "blue");
        properties.put("kaptcha.image.width", "140");
        properties.put("kaptcha.image.height", "40");
        properties.put("kaptcha.textproducer.font.size", "30");
        properties.put("kaptcha.session.key", "verifyCode");
        properties.put("kaptcha.textproducer.char.space", "5");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);

        return defaultKaptcha;
    }
}

前端页面

 <label class="block input-icon">
     <input type="text" name="verifyCode" placeholder="请输入验证码" style="width: 130px">
     <img alt="单击图片刷新！" class="pointer"  src="/common/kaptcha"
        onclick="this.src='/common/kaptcha?d='+new Date()*1" style="margin-left: 10px;">

 </label>

效果图