哈尔滨cms模板建站,如何提高网站的安全性,wordpress文章排版工具,wordpress comment_statusKaptcha 文章目录 Kaptcha介绍插件使用介绍原理引入依赖生成验证码 验证码小项目初始化前端代码约定前后端交互接口接口定义 介绍
Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具
https://code.google.com/archive/p/kaptcha
⽹上有很多⼈甚⾄公司基于Google的kaptc…Kaptcha 文章目录 Kaptcha介绍插件使用介绍原理引入依赖生成验证码 验证码小项目初始化前端代码约定前后端交互接口接口定义 介绍
Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具
https://code.google.com/archive/p/kaptcha
⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发. 我们选择⼀个直接适配SpringBoot的开源项⽬
oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter (github.com)
插件使用介绍
基于GitHub项目来做介绍
原理
验证码可以客⼾端⽣成, 也可以服务器⽣成. 对于普通的字符验证码, 后端通常分两部分.
⼀是⽣成验证码内容, 根据验证码内容和⼲扰项等, ⽣成图⽚, 返回给客⼾端
⼆是把验证码内容存储起来, 校验时取出来进⾏对⽐.
kaptcha插件选择把验证码存储在Session⾥.
引入依赖
dependencygroupIdcom.oopsguy.kaptcha/groupIdartifactIdkaptcha-spring-boot-starter/artifactIdversion1.0.0-beta-2/version
/dependency生成验证码
该插件提供了两种⽅式⽣成验证码 通过代码来⽣成(参考⽂档: https://github.com/oopsguy/kaptcha-spring-boot/blob/master/README_zh-CN.md, 不再介绍) 仅通过配置⽂件来⽣成验证码(推荐)
部分详细配置
配置项配置说明默认值border设置验证码边框的颜色“255,255,255,255”textProducerCharLength设置生成验证码的字符长度4textProducerCharSpace设置生成验证码时字符之间的间距5imageWidth设置验证码图片的宽度200imageHeight设置验证码图片的高度50noiseColor设置噪点的颜色“255,255,255,255”fontColor设置字体颜色“0,0,0,255”fontNames设置字体的名称可以指定多个字体Arial, CouriertextProducerImpl设置生成验证码文本的实现类默认实现类backgroundProducerImpl设置生成验证码背景的实现类默认实现类noiseProducerImpl设置生成验证码噪点的实现类默认实现类wordImpl设置生成验证码字符的实现类默认实现类obscurificatorImpl设置字符模糊处理的实现类默认实现类sessionKey设置存储验证码信息的 Session 键默认值sessionDate设置存储验证码创建时间的 Session 键默认值width设置验证码图片的宽度同 imageWidth200height设置验证码图片的高度同 imageHeight50
验证码小项目
初始化前端代码
// success.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title验证成功页/title
/head
bodyh1验证成功/h1
/body
/html//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/admin/captcha 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, /admin/captcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {alert(验证码校验);});/script/body/html约定前后端交互接口
需求分析
后端需要提供两个服务 ⽣成验证码, 并返回验证码 校验验证码是否正确: 校验验证码是否正确
接口定义 生成验证码 请求 GET/admin/captcha响应图片 校验验证码是否正确 请求/admin/check POST /admin/checkcaptchaxn8dcaptcha用户输入的验证码 响应 true根据用户输入的验证码校验验证码是否正确
完善前端代码
!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/admin/captcha 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, /admin/captcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {$.ajax({type:get,url:/admin/check,data:{inputCaptcha:$(#inputCaptcha).val()},success:function (result){if (result){// 页面跳转location.hrefsuccess.html}else {alert(验证码失败请重试);}}});});/script/body/html后端代码
package org.haobin.kaptcha;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;
import java.util.Date;RestController
RequestMapping(/admin)
public class KaptchaController {public static final String KAPTCHA_SESSION_KEY KAPTCHA_SESSION_KEY;public static final String KAPTCHA_SESSION_DATE KAPTCHA_SESSION_DATE;public static final long TIME_OUT 60 * 1000; // 1min 毫秒/*** 校验验证码是否正确** param inputCaptcha 用户输入的验证码* return*/RequestMapping(/check)public boolean check(String inputCaptcha, HttpSession session) {// 1. 判断输入的验证码是否为空if (!StringUtils.hasLength(inputCaptcha)) {return false;}// 2. 获取生成的验证码// 正确的验证码生成验证码// 3. 比对 生成的验证码和输入的验证码是否一致// 4. 确认验证码是否过期String saveCaptcha (String) session.getAttribute(KAPTCHA_SESSION_KEY);Date saveCaptchaDate (Date) session.getAttribute(KAPTCHA_SESSION_DATE);// 不区分大小写if (inputCaptcha.equalsIgnoreCase(saveCaptcha)) {if (saveCaptchaDate ! null || System.currentTimeMillis() - saveCaptchaDate.getTime() TIME_OUT) {return true;}}return false;}
}
