登录验证码(前后端分离、不分离)

1.简介
Java图形验证码，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。

2.效果展示

3.导入项目
3.1.gradle方式的引入

dependencies {compile 'com.github.whvcse:easy-captcha:1.6.2'
}

3.2.maven方式引入

<dependencies><dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.2</version></dependency>
</dependencies>

3.3.jar包下载
easy-captcha-1.6.2.jar

maven导入jar包，在项目根目录创建libs文件夹，然后pom.xml添加如下：

<dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.1</version><systemPath>${basedir}/libs/easy-captcha-1.6.2.jar</systemPath>
</dependency>

4.使用方法
4.1.在SpringMVC中使用

@Controller
public class CaptchaController {@RequestMapping("/captcha")public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {CaptchaUtil.out(request, response);}
}

前端html代码：

<img src="/captcha" width="130px" height="48px" />

不要忘了把/captcha路径排除登录拦截，比如shiro的拦截。

4.3.判断验证码是否正确

@Controller
public class LoginController {@PostMapping("/login")public JsonResult login(String username,String password,String verCode){if (!CaptchaUtil.ver(verCode, request)) {CaptchaUtil.clear(request);  // 清除session中的验证码return JsonResult.error("验证码不正确");}}
}

4.4.设置宽高和位数

@Controller
public class CaptchaController {@RequestMapping("/captcha")public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {// 设置位数CaptchaUtil.out(5, request, response);// 设置宽、高、位数CaptchaUtil.out(130, 48, 5, request, response);// 使用gif验证码GifCaptcha gifCaptcha = new GifCaptcha(130,48,4);CaptchaUtil.out(gifCaptcha, request, response);}
}

4.5.不使用工具类
CaptchaUtil封装了输出验证码、存session、判断验证码等功能，也可以不使用此工具类：

@Controller
public class CaptchaController {@RequestMapping("/captcha")public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {// 设置请求头为输出图片类型response.setContentType("image/gif");response.setHeader("Pragma", "No-cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expires", 0);// 三个参数分别为宽、高、位数SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);// 设置字体specCaptcha.setFont(new Font("Verdana", Font.PLAIN, 32));  // 有默认字体，可以不用设置// 设置类型，纯数字、纯字母、字母数字混合specCaptcha.setCharType(Captcha.TYPE_ONLY_NUMBER);// 验证码存入sessionrequest.getSession().setAttribute("captcha", specCaptcha.text().toLowerCase());// 输出图片流specCaptcha.out(response.getOutputStream());}@PostMapping("/login")public JsonResult login(String username,String password,String verCode){// 获取session中的验证码String sessionCode = request.getSession().getAttribute("captcha");// 判断验证码if (verCode==null || !sessionCode.equals(verCode.trim().toLowerCase())) {return JsonResult.error("验证码不正确");}}
}

5.更多设置
5.1.验证码类型

public class Test {public static void main(String[] args) {// png类型SpecCaptcha captcha = new SpecCaptcha(130, 48);captcha.text();  // 获取验证码的字符captcha.textChar();  // 获取验证码的字符数组// gif类型GifCaptcha captcha = new GifCaptcha(130, 48);// 中文类型ChineseCaptcha captcha = new ChineseCaptcha(130, 48);// 中文gif类型ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);// 算术类型ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);captcha.setLen(3);  // 几位数运算，默认是两位captcha.getArithmeticString();  // 获取运算的公式：3+2=?captcha.text();  // 获取运算的结果：5captcha.out(outputStream);  // 输出验证码}
}

注意：
算术验证码的len表示是几位数运算，而其他验证码的len表示验证码的位数，算术验证码的text()表示的是公式的结果，对于算术验证码，你应该把公式的结果存储session，而不是公式。

5.2.验证码字符类型
类型描述

TYPE_DEFAULT 数字和字母混合
TYPE_ONLY_NUMBER 纯数字
TYPE_ONLY_CHAR 纯字母
TYPE_ONLY_UPPER 纯大写字母
TYPE_ONLY_LOWER 纯小写字母
TYPE_NUM_AND_UPPER 数字和大写字母

使用方法：

SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
captcha.setCharType(Captcha.TYPE_ONLY_NUMBER);

只有SpecCaptcha和GifCaptcha设置才有效果。

使用方法：

SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);// 设置内置字体
captcha.setFont(Captcha.FONT_1); // 设置系统字体
captcha.setFont(new Font("楷体", Font.PLAIN, 28));
5.4.输出base64编码
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.toBase64();// 如果不想要base64的头部data:image/png;base64,
specCaptcha.toBase64("");  // 加一个空的参数即可
5.5.输出到文件
FileOutputStream outputStream = new FileOutputStream(new File("C:/captcha.png"))
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.out(outputStream);

6.前后端分离项目的使用
前后端分离项目建议不要存储在session中，存储在redis中，redis存储需要一个key，key一同返回给前端用于验证输入：

@Controller
public class CaptchaController {@Autowiredprivate RedisUtil redisUtil;@ResponseBody@RequestMapping("/captcha")public JsonResult captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);String verCode = specCaptcha.text().toLowerCase();String key = UUID.randomUUID().toString();// 存入redis并设置过期时间为30分钟redisUtil.setEx(key, verCode, 30, TimeUnit.MINUTES);// 将key和base64返回给前端return JsonResult.ok().put("key", key).put("image", specCaptcha.toBase64());}@ResponseBody@PostMapping("/login")public JsonResult login(String username,String password,String verCode,String verKey){// 获取redis中的验证码String redisCode = redisUtil.get(verKey);// 判断验证码if (verCode==null || !redisCode.equals(verCode.trim().toLowerCase())) {return JsonResult.error("验证码不正确");}}
}

前端使用ajax获取验证码：

<img id="verImg" width="130px" height="48px"/><script>var verKey;// 获取验证码$.get('/captcha', function(res) {verKey = res.key;$('#verImg').attr('src', res.image);},'json');// 登录$.post('/login', {verKey: verKey,verCode: '8u6h',username: 'admin'，password: 'admin'}, function(res) {console.log(res);}, 'json');
</script>

7.自定义效果
继承Captcha实现out方法，中文验证码可继承ChineseCaptchaAbstract，算术验证码可继承ArithmeticCaptchaAbstract。

登录验证码(前后端分离、不分离)相关推荐

laravel mews/captcha 图形验证码前后端分离
1. 说明:在laravel框架中使用验证码如果前后端分离,就不能使用session来保存和验证验证码正确与否,在网上找了很久终于找到解决办法: 2.原文档地址:https://segmentfaul ...
2022最新微信小程序授权登录（前后端分离）
一.前言首先说一下微信小程序最近两个比较大的变动: 1. 获取用户信息接口由原来的wx.getUserInfo更换为wx.getUserProfile 2021年4月28日24时后发布的新版本小程序 ...
Web前后端：如何分离，如何解耦？
摘要:在本文中我们一起来探讨一下为什么要在软件开发中进行前后端的分离,如何做到前后端分离,如何解耦. 简单地说,就是要把复杂的问题简单化,把一个从0到N的问题转化为N个0到1的问题.另一个相近的说法就 ...
使用kisso单点登录示例-前后端分离
源码地址主要技术栈 Spring Boot Kisso vue.js 实践目标前端分离后,实现单点登录前端(postman测试) A前端:系统节点 B前端:模块1节点 C前端:模块2节点(略) ...
python 抖音第三方登录_前后端分离抖音第三方授权登录
现在我做的项目需要支持使用抖音账号登录,并且可以管理自己的抖音号,所以我需要拿到抖音用户的身份验证 access_token,这篇文章记录一下抖音授权登录的流程. 抖音开放平台提供了授权相关的接口和文 ...
python安卓qq登录_python 前后端不分离 QQ登录，微博登录
# QQ登录和用户中心 # QQ 登录 ##### 点了QQ 按钮--京东后台--->login_qq_url--->用户,账号扫码---->京东商城--->code----& ...
Day212.OAuth2、微信二维码登入注册功能、用户登录信息前后端供、讲师列表前后端 -谷粒学院
谷粒学院 OAuth2的使用场景一.OAuth2解决什么问题 1.OAuth2提出的背景照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 2.图例资源拥有者:照片拥有者 ...
axios发送登录请求_使用axios实现登录功能(前后端联调)
1.创建一个Login.vue页面 1.1 写页面components/Login.vue 在 src/components 下创建 Login.vue 页面测试axios-{{title}} im ...
Spring boot验证码前后端验证
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
钉钉微应用的免登录（前后端）
最近做了个钉钉企业内部微应用的项目.记录下自己的心得. 首先根据官方文档明白免登流程但是,最近更新的开发者平台,已经不在提供corpSecret了,所以获取获取access_token就要获取获取a ...

登录验证码(前后端分离、不分离)

登录验证码(前后端分离、不分离)相关推荐

最新文章

热门文章