zoukankan      html  css  js  c++  java
  • 验证码

    最近在工作中做到这一部分,所以在这里记录一下。

    首先我们整理一下思路。

    一开始,我做这个验证码的时候,只是在服务器端生成一个bufferedImage,记录下验证码 的code,并存入到redis中,然后用通过servletResponse写出去。

    但是后来却发现多人验证的话,会分不清验证码,因为存入redis里的key是写死的,导致登陆不了。

    然后就决定,用每一个ID对应一个验证码,ID作为key将验证码的值存入到redis中。这样多人验证就不会乱了。服务器生成 ID(这里不考虑ID重复的问题)和Image传递给前端。

    前端获取ID是为了到服务器取到redis里正确的验证码,来跟用户输入的进行比较。Image是为了展示验证码图片。

    这里我引入了kaptcha来生成验证码。

    1.在POM文件中引入kaptcha

    <dependency>
                <groupId>com.github.penggle</groupId>
                <artifactId>kaptcha</artifactId>
                <version>2.3.2</version>
    </dependency>

    2.在springmvc里配置验证码的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.textproducer.font.color">blue</prop>
                            <prop key="kaptcha.image.width">125</prop>
                            <prop key="kaptcha.image.height">45</prop>
                            <prop key="kaptcha.textproducer.font.size">45</prop>
                            <prop key="kaptcha.session.key">code</prop>
                            <prop key="kaptcha.textproducer.char.length">4</prop>
                            <prop key="kaptcha.textproducer.font.names">微软雅黑</prop>
                        </props>
                    </constructor-arg>
                </bean>
            </property>
        </bean>

    3.编写验证码服务类和实现类

    public interface kaptchaService {
    
        CaptchaDTO createCaptcha();
    }
    @Service
    public class kaptchaServiceImpl implements kaptchaService {
    
        private static final int SESSION_TIME = 60*30;
        @Autowired
        private Producer captchaProducer;
    
        @Override
        public CaptchaDTO createCaptcha() {
            String captchaId = UUID.randomUUID().toString().replace("-", "");
            String capText = captchaProducer.createText();
            BufferedImage bi = captchaProducer.createImage(capText);
            // 将验证码保存到redis中;
            RedisUtil.del("captcha_code_"+captchaId);
            RedisUtil.setex("captcha_code_"+captchaId,capText.toLowerCase(),SESSION_TIME);
    
            CaptchaDTO captchaDTO = new CaptchaDTO();
            captchaDTO.setCaptchaId(captchaId);
            captchaDTO.setCode(capText);
            captchaDTO.setImage(bi);
            return captchaDTO;
        }
    }

    4.编写控制器和映射

    @Controller
    public class CodeController {
    
        @Autowired
        private kaptchaService kaptchaService;
    
        @ResponseBody
        @RequestMapping("/captcha")
        public BizResult getCode(){
            // 定义图像buffer
            CaptchaDTO captchaDTO = kaptchaService.createCaptcha();
            try {
                CaptchaModel captchaModel = new CaptchaModel();
                captchaModel.setCaptchaId(captchaDTO.getCaptchaId());
                captchaModel.setImage("data:image/.jpg;base64," + imageToBase64(captchaDTO.getImage()));
                return BizResult.success(captchaModel);
            } catch (Exception e) {
                return BizResult.fail("网络异常");
            }
        }
    
        /**
         * 图片进行base64编码
         * @param bufferedImage 图片流
         * @return string
         */
        private static String imageToBase64(BufferedImage bufferedImage) throws IOException {
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            ImageIO.write(bufferedImage, "jpg", outputStream);
            String base64 = Base64.getEncoder().encodeToString(outputStream.toByteArray());
            return base64.replace("
    ", "");
        }
    }

    5.前端

    
    
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <h2>验证码</h2>
                <label>
                    <input style="float: left; margin-right: 10px;"  type="text" name="validate" id="validate"  class="txt_input3" >
                </label>
                <label>
                    <img id="captchaImage" class="txt_input3" src="${ctx}/captcha" onclick="changeImg()"/>
                </label>
    function getValidateCode(url){
        $.ajax({
            type:"GET",
            url:"/captcha",
            success:function (ret){
                 $("#captchaImage").attr("src",ret.data.image);
                 rediskey = ret.data.captchaId;
            }
        });
    }
  • 相关阅读:
    每日总结
    团队冲刺9
    团队冲刺8
    团队冲刺7
    团队冲刺6
    团队冲刺5
    团队冲刺4
    团对冲刺3
    团队冲刺2
    每日博客
  • 原文地址:https://www.cnblogs.com/Qiansion/p/10250368.html
Copyright © 2011-2022 走看看