上海网站建设关键词排名,网页系统升级中每天自动更新,长春网络建站,网站开发制做目录
项目创建
前端代码实现
约定前后端交互接口
需求分析
接口定义
Hutool工具
实现服务器端代码
引入依赖
获取验证码
验证码校验
调整前端代码 随着安全性的要求越来越高#xff0c;目前许多项目中都使用了验证码#xff0c;验证码也有各种类型#xff0c;如 …目录
项目创建
前端代码实现
约定前后端交互接口
需求分析
接口定义
Hutool工具
实现服务器端代码
引入依赖
获取验证码
验证码校验
调整前端代码 随着安全性的要求越来越高目前许多项目中都使用了验证码验证码也有各种类型如 图形验证码、短信验证码、邮件验证码、人脸识别等这些不同类型的验证码可以根据实际需求和安全性要求进行选择和应用保护网站和用户免受恶意攻击
在本篇文章中我们来学习图形验证码的实现
验证码的实现方式有很多可以由前端实现也可以由后端进行实现也有很多的插件和工具包可以使用在这里我们使用 Hutool 提供的小工具实现
验证码需要实现功能 1. 页面生成验证码点击图片可进行刷新 2. 输入验证码点击提交验证用户输入验证码是否正确正确则进行页面跳转 项目创建
我们首先创建项目并引入相关依赖 前端代码实现
接下来我们实现两个简单的前端界面 1. 验证码界面 2. 验证成功后跳转的界面 index.html
!DOCTYPE html
html langenheadmeta charsetutf-8title验证码/titlestyle#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}/style
/headbodyh1输入验证码/h1div idconfirminput typetext nameinputCaptcha idinputCaptchaimg idverificationCodeImg src/captcha/getCaptcha stylecursor: pointer; title看不清换一张 /input typebutton value提交 idcheckCaptcha/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#verificationCodeImg).click(function(){$(this).hide().attr(src, /captcha/getCaptcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {alert(判断验证码是否正确);});/script
/body/html
success.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title验证成功/title
/head
bodyh1验证成功/h1
/body
/html
约定前后端交互接口
需求分析
后端需要提供两个服务 1. 生成验证码并返回 2. 校验验证码是否正确 接口定义
1. 生成验证码 [URL] GET /captcha/getCaptcha [请求参数] [响应] { 验证码图片内容 } 2. 校验验证码是否正确 [URL] POST /captcha/check [请求参数] captchaxmad [响应] { true } 根据用户输入的验证码校验验证码是否正确校验成功返回true校验失败返回false
Hutool工具
我们使用 Hutool 提供的小工具来实现验证码
Hutool是一个Java工具包类库对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装组成各种Util工具类
Hutool是一个小而全的Java工具类库通过静态方法的封装降低相关API学习成本提高效率 Hutool官网https://hutool.cn
实现服务器端代码
引入依赖 dependencygroupIdcn.hutool/groupIdartifactIdhutool-captcha/artifactIdversion5.8.26/version/dependency
由于我们只需要实现验证码相关功能因此只需要引入验证码部分依赖
获取验证码 我们可以通过提供的指南来学习如何使用
其中提供了线段干扰验证码、圆圈干扰验证码、扭曲干扰验证码以及自定义验证码
我们通过其提供的例子来学习 我们在 test 中 学习验证码的生成
SpringBootTest
class CaptchaControllerTest {Testvoid getCaptcha() {//定义图形验证码的长和宽LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(200, 100);//图形验证码写出可以写出到文件也可以写出到流lineCaptcha.write(d:/line.png);//输出codeSystem.out.println(生成验证码: lineCaptcha.getCode());}
}
运行观察结果 且在D盘下成功生成验证码 同样的我们可以生成圆圈干扰验证码、扭曲干扰验证码等大家可自行进行实现
接下来我们实现验证码的生成
在实现验证码时需要指定图片的长、宽和验证码的过期时间也可指定验证码字符个数、干扰元素个数等我们在 Constants 中进行定义
public class Constants {public static final Integer CAPTCHA_WIDTH 100;public static final Integer CAPTCHA_HEIGHT 40;public static final long EXPIRATION_TIME 60 * 1000;
}
由于当用户输入验证码时我们需要进行校验因此我们需要对生成的验证码进行存储同时需要存储验证码的生成时间以便判断验证码是否超时
public class Constants {public static final Integer CAPTCHA_WIDTH 100;public static final Integer CAPTCHA_HEIGHT 40;public static final long EXPIRATION_TIME 60 * 1000;public static final String CAPTCHA_KEY captcha;public static final String CAPTCHA_DATE date;
}
接下来我们来实现 CaptchaController
RequestMapping(/captcha)
RestController
Slf4j
public class CaptchaController {/*** 生成验证码* param session* param response*/GetMapping(/getCaptcha)public void getCaptcha(HttpSession session, HttpServletResponse response) {// 定义图形验证码的长和宽LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(Constants.CAPTCHA_WIDTH, Constants.CAPTCHA_HEIGHT);// 设置返回数据类型response.setContentType(image/jpeg);// 禁止使用缓存response.setHeader(Pragma, No-cache);try {// 输出到页面lineCaptcha.write(response.getOutputStream());// 将 生成的验证码 和 验证码生成时间 存储到session中session.setAttribute(Constants.CAPTCHA_KEY, lineCaptcha.getCode());session.setAttribute(Constants.CAPTCHA_DATE, new Date());// 关闭流response.getOutputStream().close();} catch (IOException e) {throw new RuntimeException(e);}}
}运行程序此时成功生成验证码 验证码校验 /*** 验证码校验* param captcha* param session* return*/PostMapping(/check)public boolean checkCaptcha(String captcha, HttpSession session) {log.info(接收到验证码: {}, captcha);// 参数校验if(!StringUtils.hasLength(captcha)) {return false;}// 获取存储的验证码和生成时间String code (String) session.getAttribute(Constants.CAPTCHA_KEY);Date createTime (Date) session.getAttribute(Constants.CAPTCHA_DATE);// 判断验证码是否正确(验证码一般忽略大小写)if(captcha.equalsIgnoreCase(code)) {// 判断验证码是否过时if(createTime null || System.currentTimeMillis() - createTime.getTime() Constants.EXPIRATION_TIME) {return true;}return false;}return false;}
将用户输入的验证码与存储在 session 中的验证码进行对比判断其是否相同若相同且在1min内则验证成功
在这里我们就不对其进行测试了在调整前端代码后一起进行测试
调整前端代码
接下来我们修改 index.html script$(#verificationCodeImg).click(function(){$(this).hide().attr(src, /captcha/getCaptcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {$.ajax({url: /captcha/check,type: post,data: {captcha: $(#inputCaptcha).val()},success: function(result) {if(result) {location.href success.html;}else {alert(验证码错误或已超时);}}})});/script
再次运行程序此时输入验证码进行验证 验证成功 验证失败
