springboot实现验证码生成及验证功能

1.springboot整合hutool-captcha生成验证码,首先是添加依赖 :

<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-captcha</artifactId>
            <version>${hutool-captcha.version}</version>
        </dependency>

2.生成并显示验证码 

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import ltd.newbee.mall.common.Constants;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 */
@Controller
public class CommonController {

    @GetMapping("/common/kaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/png");

        ShearCaptcha shearCaptcha= CaptchaUtil.createShearCaptcha(150, 30, 4, 2);

        // 验证码存入session
        httpServletRequest.getSession().setAttribute("verifyCode", shearCaptcha);

        // 输出图片流
        shearCaptcha.write(httpServletResponse.getOutputStream());
    }

    @GetMapping("/common/mall/kaptcha")
    public void mallKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/png");

        ShearCaptcha shearCaptcha= CaptchaUtil.createShearCaptcha(110, 40, 4, 2);

        // 验证码存入session
        httpServletRequest.getSession().setAttribute(Constants.MALL_VERIFY_CODE_KEY, shearCaptcha);

        // 输出图片流
        shearCaptcha.write(httpServletResponse.getOutputStream());
    }
}

3.前端逻辑实现

<!Do.. html>
<html>
<head>
<emta charset=""/>
<title>..
</head>
<bode>
<img src = "/kaptcha" onclick="this.src='/kaptcha?d = '+new Date()*1" />
</body>
</html>

4.验证码的输入验证

一般做法是在后端生成验证码后,首先对当前生成的验证码内容进行保存,可以选择保存在session中,redis缓存中,或者保存在数据库中。然后返回验证码图片并显示到前端页面。用户在输入验证码后,并向后端发出验证请求后,后端接到请求后会对用户输入的验证码进行验证。

@GetMapping("/verify")
@ResponseBody
public String verify(@RequestParam("code") String code,HttpSession session ) {
        if(!StringUtils.hasLength(code)){
                return "验证码不能为空";
}
        String kaptchaCode = session.getAttribute("verifyCode")+"";
        if(!StringUtils.hasLength(kaptchaCode) || !code.toLowerCase().equals(kaptchaCode)){
                return "验证码错误";
}
                return“验证成功”;
}

5.前端逻辑实现

省略....

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
SpringBoot实现图片验证码功能可以通过以下步骤来实现。首先,我们需要引入kaptcha和captcha这两个依赖包。然后,我们可以在配置文件中进行相关配置,例如设置验证码的长度、宽度、字体等。接下来,在逻辑代码中,我们可以通过调用相应的方法来生成验证码,并将验证码保存到session中。最后,在前端中使用获取到的验证码,可以在登录表单中添加一个验证码输入框和一个用于显示验证码图片的img标签。我们可以通过调用后端提供的接口来获取验证码,并将其转换为Base64编码格式,然后将其作为img标签的src属性。通过这样的方式,我们就可以完成SpringBoot中的图片验证码功能。同时,我们还可以将这个功能与Vue前端进行结合,实现登录验证功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [SpringBoot集成图片验证码功能-学习笔记](https://blog.csdn.net/romanticRose/article/details/125873839)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [SpringBoot实现图形验证码](https://blog.csdn.net/weixin_65950231/article/details/130612731)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阳光不锈@

如果有帮助的话,打赏一下吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值