使用Kaptcha的验证码
使用EasyCaptcha的验证码
图片验证码的作用图片验证码经常验证如下一些场景。（1）用户登录，防止机器人登录；（2）论坛留言，防止恶意灌水；（3）短信验证码发送，防止盗刷短信。
Kaptcha简介Kaptcha 是一个由谷歌Googel出品的可高度配置的实用验证码生成工具，是一个非常经典的图片验证码解决方案。但，这个开源的工具生成的图片比较素雅，美观度一般，且项目已经基本不维护了，从github上看，最近的一次更新是在3年前。
EasyCaptcha是一个Java图形验证码库，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。效果还是非常好看的，还有闪动效果。关键是该开源项目是国人开发，使用也超简单。
EasyCaptcha效果展示(部分验证码闪动，截图无法展示)
划重点：若依系统RuoYi-Vue中替换为EasyCaptcha（1）在ruoyi-framework\pom.xml添加依赖：
<!-- 验证码EasyCaptcha依赖 -->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
<!-- 原有的验证码kaptcha依赖不需要可以删除 -->
（2）在应用子系统中修改验证码生成的代码，比如ruoyi-admin的CaptchaController中修改getCode方法的代码：
/**
* 生成验证码
*/
@GetMapping("/captchaImage")
@ApiOperation(value = "生成验证码", notes = "生成验证码")
public AjaxResult getCode(HttpServletResponse response) throws IOException
{
AjaxResult ajax = AjaxResult.success();
boolean captchaOnOff = configService.selectCaptchaOnOff();
ajax.put("captchaOnOff", captchaOnOff);
if (!captchaOnOff)
{
return ajax;
}
// 保存验证码信息
String uuid = IdUtils.simpleUUID();
String verifyKey = Constants.CAPTCHA_CODE_KEY uuid;
/* 以下注释的部分是原代码
注释开始
String capStr = null, code = null;
BufferedImage image = null;
// 生成验证码
String captchaType = RuoYiConfig.getCaptchaType();
if ("math".equals(captchaType))
{
String capText = captchaProducerMath.createText();
capStr = capText.substring(0, capText.lastIndexOf("@"));
code = capText.substring(capText.lastIndexOf("@") 1);
image = captchaProducerMath.createImage(capStr);
}
else if ("char".equals(captchaType))
{
capStr = code = captchaProducer.createText();
image = captchaProducer.createImage(capStr);
}
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
// 转换流信息写出
FastByteArrayOutputStream os = new FastByteArrayOutputStream();
try
{
ImageIO.write(image, "jpg", os);
}
catch (IOException e)
{
return AjaxResult.error(e.getMessage());
}
ajax.put("uuid", uuid);
ajax.put("img", Base64.encode(os.toByteArray()));
return ajax;
注释结束*/
//以下6行是新加的代码
Captcha captcha = new ArithmeticCaptcha(115, 42); //创建算术验证码
String code = captcha.text(); //得到算术验证码的计算值
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);//存入redis
ajax.put("uuid", uuid);
ajax.put("img", captcha.toBase64()); //获得图片的base64编码
return ajax;
}
（3）在前端项目中，RuoYi-Vue3\src\views\login.vue的getCode方法中修改如下：
function getCode() {
getCodeImg().then(res => {
captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
if (captchaOnOff.value) {
codeUrl.value = res.img; //"data:image/gif;base64," res.img;
loginForm.value.uuid = res.uuid;
}
});
}
说明：因为上一步中控制器返回的img中已经包含了"data:image/gif;base64,"这一串字符，故前端接收时就不要再加了。
（4）再分别重启前后端系统，就可以看到效果了。
【本文结束】
学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。
,
