一、自定义验证码
在Controller包中创建CaptchaController，用于生成验证码图像，返回验证码图片，并保存图片中的验证码在Session中,方便登录时校验验证码
@Controller
@RequestMapping("/captcha")
public class CaptchaController {
// 定义一个值，用来生成验证码的图片
// 宽度
private int width = 120;
// 高度
private int height = 30;
// 图片内容在图片的起始位置
private int drawY = 22;
// 文字的间隔
private int space = 22;
// 验证码有几个文字
private int charCount = 4;
// 验证码内容的数组
private String[] chars = {"A", "B", "C", "D", "E", "F", "G", "0", "1", "2", "3", "4", "5", "6", "8"};
// 生成验证码内容,在一个图片上写入文字
@GetMapping("/create")
public void createCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 需要在内存中绘制图片,向图片中写入文字，将绘制好的图片响应给请求
// 创建一个背景透明的图片
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取画笔
Graphics graphics = image.getGraphics();
// 设置背景色
graphics.setColor(Color.white);
// 给画板涂成白色
graphics.fillRect(0, 0, width, height);
// 画内容
// 创建一个字体
Font font = new Font("宋体",Font.BOLD,18);
graphics.setFont(font);
graphics.setColor(Color.black);
// 在画布上写字
// graphics.drawString("中",10,drawY);
// 保存验证码的值，登录时校验
StringBuffer buffer = new StringBuffer();
int random = 0;
int len = chars.length;
for (int i = 0; i < charCount ; i++) {
random = new Random().nextInt(len);
buffer.append(chars[random]);
graphics.setColor(makeColor());
graphics.drawString(chars[random],(i+1)*space, drawY);
}
// 绘制干扰线
for (int i = 0; i < 4; i++) {
graphics.setColor(makeColor());
int[] lines = makeLine();
graphics.drawLine(lines[0],lines[1],lines[2],lines[3]);
}
// 设置取消缓存
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires",0);
response.setContentType("image/png");
// 生成的验证码存在session中
HttpSession session = request.getSession();
session.setAttribute("captcha",buffer.toString());
ServletOutputStream outputStream = response.getOutputStream();
/**
*
*/
ImageIO.write(image, "png", outputStream);
outputStream.flush();
outputStream.close();
}
// 获取随机颜色
private Color makeColor(){
Random random = new Random();
int r = random.nextInt(255);
int g = random.nextInt(255);
int b = random.nextInt(255);
return new Color(r,g,b);
}
// 获取干扰线
private int[] makeLine(){
Random random = new Random();
int x1 = random.nextInt(width);
int y1 = random.nextInt(height);
int x2 = random.nextInt(width);
int y2 = random.nextInt(height);
return new int[]{x1,x2,y1,y2};
}
}
创建验证码图片的步骤
- 创建图像类
- 获取画笔,在Image上画内容
- 设置图片背景色
- 创建Font，书写文字
- 文字内容保存在Session中
- 返回Image 在自定义的安全配置中添加验证码访问权限
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// 增加js静态资源的访问权限，验证码访问权限，登录首页访问权限
.antMatchers("/login.html","/index.html","/login","/js/**","/captcha/**").permitAll()
// 给url配置角色访问权限
.antMatchers("/access/user").hasRole("USER")
.antMatchers("/access/read").hasRole("READ")
.antMatchers("/access/admin").hasRole("ADMIN")
.anyRequest().authenticated()
.and()
.formLogin()
.successHandler(custSuccessHandler) //执行验证成功的handler
.failureHandler(custFailureHandler) // 执行验证失败后的handler
// 指定使用自定义的登录界面
.loginPage("/login.html")
.loginProcessingUrl("/login")
.and()
.csrf().disable();
}
在登录页面中增加验证码图片和输入框
<div id="validatePanel" class="item" style="width: 137px;">
<input type="text" id="captcha" placeholder="请输入验证码" maxlength="4">
<a href="javascript:void(0)" onclick="refreshCaptcha()"><img id="refreshCaptcha" class="validateImg" src="/captcha/create" ></a>
</div>
在js中增加刷新验证码的函数,点击验证码图片即可刷新验证码
<script>
function refreshCaptcha(){
// 刷新验证码
var url = "/captcha/create?t=" + new Date();
$("#refreshCaptcha").attr("src",url);
}
</script>
修改ajax请求,增加发送验证码的内容
<script type="text/javascript">
$(function(){
//juqery的入口函数
$("#btnLogin").click(function(){
var uname = $("#username").val();
var pwd = $("#password").val();
// 获取输入的验证码
var captcha = $("#captcha").val();
$.ajax({
// 发送ajax请求显示状态已取消，通过添加一下代码可以成功获取响应
async: false,
url:"/login",
type:"POST",
data:{
"username":uname,
"password":pwd,
"captcha":captcha
},
dataType:"json",
success:function(resp){
alert(resp.code + " " + resp.msg)
}
})
})
});
</script>
过滤器验证验证码内容，应该在验证用户名密码之前验证发送的验证码内容,在Spring Security的用户名密码过滤器UsernamePasswordAuthenticationFilter之前自定义一个过滤器
先在common包中定义一个异常类VerificationException
public class VerificationException extends AuthenticationException {
public VerificationException(String detail, Throwable ex) {
super(detail, ex);
}
public VerificationException(String detail) {
super(detail);
}
public VerificationException(){
super("验证码错误,请重新输入");
}
}
修改CustFailureHandler，增加Result属性，在校验验证码失败时输出json格式的错误信息
@Component
public class CustFailureHandler implements AuthenticationFailureHandler {
private Result result;
public Result getResult() {
return result;
}
public void setResult(Result result) {
this.result = result;
}
@Override
public void onAuthenticationFailure(HttpServletRequest request,
HttpServletResponse response,
AuthenticationException e) throws IOException {
//当框架验证用户信息失败时执行的方法
response.setContentType("text/json;charset=utf-8");
if( result == null){
Result localResult = new Result();
localResult.setCode(1);
localResult.setError(1001);
localResult.setMsg("登录失败");
result = localResult;
}
OutputStream out = response.getOutputStream();
ObjectMapper om = new ObjectMapper();
om.writeValue(out,result );
out.flush();
out.close();
}
}
接着在common包中定义一个Filter
@Component
public class VerificationCaptchaFilter extends OncePerRequestFilter {
@Resource
private CustFailureHandler failureHandler;
@Override
protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
// 只有login()才需要这个过滤器
String requestURI = httpServletRequest.getRequestURI();
if (!"/login".equals(requestURI)){
// 过滤器正常执行,非登录操作不参与验证码操作
filterChain.doFilter(httpServletRequest,httpServletResponse);
} else {
try {
// 登录操作，需要验证码
verificationCode(httpServletRequest);
// 如果 验证通过
filterChain.doFilter(httpServletRequest, httpServletResponse);
} catch (VerificationException e) {
Result result = new Result();
result.setCode(1);
result.setError(1002);
result.setMsg("验证码错误");
failureHandler.setResult(result);
failureHandler.onAuthenticationFailure(httpServletRequest, httpServletResponse, e);
}
}
}
private void verificationCode(HttpServletRequest httpServletRequest) throws VerificationException {
HttpSession session = httpServletRequest.getSession();
String requestCode = httpServletRequest.getParameter("captcha");
String sessionCode = "";
String captcha = (String) session.getAttribute("captcha");
if (captcha != null){
sessionCode = captcha;
}
System.out.println(requestCode);
if (!StringUtils.isEmpty(sessionCode)){
session.removeAttribute("captcha");
}
if (StringUtils.isEmpty(requestCode) || StringUtils.isEmpty(sessionCode) || !requestCode.equalsIgnoreCase(sessionCode)){
throw new VerificationException();
}
}
}
修改自定义的安全配置，将自定义的过滤器加入到过滤器链中，放在校验用户名密码之前
@Configuration
@EnableWebSecurity
public class CustSecurityConfig extends WebSecurityConfigurerAdapter {
@Resource
private UserDetailsService userDetailsService;
@Resource
private CustSuccessHandler custSuccessHandler;
@Resource
private CustFailureHandler custFailureHandler;
@Resource
private VerificationCaptchaFilter captchaFilter;
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService).passwordEncoder(new BCryptPasswordEncoder());
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// 增加js静态资源的访问权限
.antMatchers("/login.html","/index.html","/login","/js/**","/captcha/**").permitAll()
// 给url配置角色访问权限
.antMatchers("/access/user").hasRole("USER")
.antMatchers("/access/read").hasRole("READ")
.antMatchers("/access/admin").hasRole("ADMIN")
.anyRequest().authenticated()
.and()
.formLogin()
.successHandler(custSuccessHandler) //执行验证成功的handler
.failureHandler(custFailureHandler) // 执行验证失败后的handler
// 指定使用自定义的登录界面
.loginPage("/login.html")
.loginProcessingUrl("/login")
.and()
.csrf().disable();
// 在框架的过滤器Chain中加入自定义的过滤器
http.addFilterBefore(captchaFilter,UsernamePasswordAuthenticationFilter.class);
}
}
重新启动应用
验证码生效
系列完结，撒花🎉！！！
