kaptchaCode(验证码)

1.springMVC-servlet.xml配置bean

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">  
    <property name="config">  
        <bean class="com.google.code.kaptcha.util.Config">  
            <constructor-arg>  
                <props>  
                    <!-- 设置是否有边框 --> 
                    <prop key="kaptcha.border">yes</prop>  
                    <!-- 设置边框颜色-->
                    <prop key="kaptcha.border.color">105,179,90</prop> 
                    <!-- 图片宽度 --> 
                    <prop key="kaptcha.image.width">160</prop>  
                    <!-- 图片高度 -->
                    <prop key="kaptcha.image.height">50</prop>  
                    <prop key="kaptcha.session.key">code</prop>  
                    <!-- 设置字体颜色 -->
                    <prop key="kaptcha.textproducer.font.color">red</prop> 
                    <!-- 设置字体大小 --> 
                    <prop key="kaptcha.textproducer.font.size">35</prop>  
                    <!-- 文字价格 -->
                    <prop key="kaptcha.textproducer.char.space">5</prop>  
                     <!-- 设置字体个数 -->  
                    <prop key="kaptcha.textproducer.char.length">6</prop>  
                    <!-- 配置中文--> 
                    <!-- <prop key="kaptcha.textproducer.impl">com.google.code.kaptcha.text.impl.ChineseTextProducer</prop> -->
                    <!-- 设置字体样式 --> 
                    <prop key="kaptcha.textproducer.font.names">彩云,宋体,楷体,微软雅黑</prop>  
                </props>  
            </constructor-arg>  
        </bean>  
    </property>  
</bean> 

2.控制类VerifyCodeController.java

package com.shenqz.controller;  
  
import java.awt.image.BufferedImage;  
  

import javax.imageio.ImageIO;  
import javax.servlet.ServletOutputStream;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  

import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;  

import com.google.code.kaptcha.Constants;  
import com.google.code.kaptcha.Producer; 
  
/** 
 * 随机验证码控制层 
 *  
 * 使用kaptcha-2.3.2.jar支持 
 *  
 * @author shenqz
 *  
 */  
@Controller  
public class VerifyCodeController {  
    
    private Producer captchaProducer = null; 
    
    @Autowired  
    public void setCaptchaProducer(Producer captchaProducer) {  
        this.captchaProducer = captchaProducer;  
    }
    
    @RequestMapping("captcha-image.do")  
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        // 禁止服务器端缓存  
        response.setDateHeader("Expires", 0);
        // 设置标准的 HTTP/1.1 no-cache headers.  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        // 设置IE扩展 HTTP/1.1 no-cache headers (use addHeader).  
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        // 设置标准 HTTP/1.0 不缓存图片  
        response.setHeader("Pragma", "no-cache");
        //返回一个 jpeg 图片,默认是text/html(输出文档的MIMI类型)  
        response.setContentType("image/jpeg");
        //为图片创建文本  
        String capText = captchaProducer.createText();
        // 将文本保存在session中,这里就使用包中的静态变量吧  
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
          
        BufferedImage bi = captchaProducer.createImage(capText); // 创建带有文本的图片  
        ServletOutputStream out = response.getOutputStream();  
        // 图片数据输出  
        ImageIO.write(bi, "jpg", out);  
        try {  
            out.flush();  
        } finally {  
            out.close();  
        }  
  
        System.out.println("Session 验证码是:" + request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY));  
        return null;  
    }  
    
    @RequestMapping("checkCode.do")  
    @ResponseBody
    public String checkCode(HttpServletRequest request)  {  
        //获取用户输入的验证码  
        /*String submitCode = WebUtils.getCleanParam(request,"j_code"); */ 
          
        //从session中获取系统生成的验证码  
        String kaptchaCode = request.getParameter("kaptchaCode");
        String kaptchaExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);   
          
        System.out.println("用户输入的验证码是:"+kaptchaCode+",系统生成的验证码:"+kaptchaExpected);  
        //进行比较  
        if(!kaptchaCode.isEmpty() && kaptchaCode.equalsIgnoreCase(kaptchaExpected)){  
            return "true";
        }else {  
            return "false";  
        }  
        
    }


    
}  

3.jsp页面index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script> 
<script type="text/javascript">  
         $(function(){  //生成验证码           
            $('#kaptchaImage').click(function () {    
                $(this).hide().attr('src', 'captcha-image.do?' + Math.floor(Math.random()*100) ).fadeIn(); 
            });        
         
            $('#submitBtn').click(function(){  
                $.post('checkCode.do?kaptchaCode='+$('#kaptchaCode').val(),function(data){  
                    if (data=='true'){  
                        window.location.href="captchaSuccess.jsp";
                    }else{  
                        alert("验证码错误!");      
                        return false;  
                    }  
                });  
            });  
        });    
        window.onbeforeunload = function(){    
            //关闭窗口时自动退出    
            if(event.clientX>360&&event.clientY<0||event.altKey){       
                alert(parent.document.location);    
            }    
        };          
        function changeCode() {  //刷新  
            $('#kaptchaImage').hide().attr('src', 'captcha-image.do?' + Math.floor(Math.random()*100) ).fadeIn();    
            event.cancelBubble=true;    
        } 
        
</script>
</head>
    <body>
            <table> 
                <tr>  
                    <td>验证码:<input type="text" name="kaptchaCode" id="kaptchaCode" value="" /></td>  
                    <td align="right">
                        <img src="captcha-image.do" height="25px" width="100px" id="kaptchaImage"/> 
                        <a href="#" οnclick="changeCode()">看不清?换一张</a>   
                        <input type="button" value="验证" id="submitBtn"/>
                    </td>
                </tr>  
            </table>
    </body>
</html>

4.页面效果

5.相关jar

kaptcha-2.3.2.jar

转载于:https://www.cnblogs.com/shenqz/p/7648869.html

实现验证码登录页面,需要在之前的示例代码中添加一个验证码输入框和一个生成验证码的逻辑。 下面是一个使用 Java 和 Spring Boot 框架实现验证码登录页面的示例: 1. 在 `pom.xml` 文件中添加以下依赖: ```xml <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> ``` 2. 创建一个 `LoginController` 类,该类包含以下方法: ```java @GetMapping("/login") public String login() { return "login"; } @PostMapping("/doLogin") public String doLogin(@RequestParam String username, @RequestParam String password, @RequestParam String verifyCode, HttpSession session) { String kaptchaCode = (String) session.getAttribute("kaptchaCode"); if (!verifyCode.equalsIgnoreCase(kaptchaCode)) { return "redirect:/login?error=验证码错误"; } // 验证用户名和密码,如果验证通过,则跳转到主页 return "redirect:/index"; } @GetMapping("/verifyCode") public void verifyCode(HttpServletResponse response, HttpSession session) throws Exception { // 生成验证码图片,并将验证码文本存入 session response.setDateHeader("Expires", 0); response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); response.addHeader("Cache-Control", "post-check=0, pre-check=0"); response.setHeader("Pragma", "no-cache"); response.setContentType("image/jpeg"); String verifyCode = new Kaptcha().createText(); session.setAttribute("kaptchaCode", verifyCode); BufferedImage image = new Kaptcha().createImage(verifyCode); ServletOutputStream out = response.getOutputStream(); ImageIO.write(image, "jpg", out); out.flush(); out.close(); } ``` 3. 创建一个 `login.html` 页面,包含以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证码登录</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-header">验证码登录</div> <div class="card-body"> <form action="/doLogin" method="post"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="username" required autofocus> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" name="password" required> </div> <div class="form-group"> <label for="verifyCode">验证码</label> <div class="input-group"> <input type="text" class="form-control" id="verifyCode" name="verifyCode" required> <img src="/verifyCode" onclick="this.src='/verifyCode?t='+Math.random()" style="cursor: pointer;"> </div> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> </div> </div> </body> </html> ``` 在这个页面中,我们创建了一个包含用户名、密码和验证码输入框的表单,并使用 Bootstrap 样式美化页面。验证码输入框旁边还有一个图像,点击图像可以刷新验证码。 这样,就实现了一个简单的验证码登录页面。当用户提交表单时,控制器会验证验证码是否正确,如果验证码正确,则继续验证用户名和密码,如果验证通过,则跳转到主页。否则,将出现错误消息并重定向到登录页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值