【shiro】13.验证码过滤器

通过之前的学习，我们知道如果自定义过滤器的使用。接下来，查看ruoyi源码，我们需要在过滤器中实现验证码。

前提

• 已新建SpringBoot项目
• 项目以成功集成shiro，并完成简单配置
• 已完成路由配置，包含登录页面/login和首页index
• 已经知道如何使用和自定义过滤器

思路

1. Shiro的配置页面，添加自定义过滤器。过滤器需要传递两个参数：  captchaEnabled （验证码开关）和  captchaType  （验证码类型）。

2. 新建自定义过滤器，继承抽象类 AccessControlFilter 。在这里实现方法 isAccessAllowed （过滤前操作）（重点）和 onAccessDenied 验证失败后处理方法。我们把页面获取到的验证码和Session中得到的验证码进行对比。每次对比成功后，都要清除Session。

3. 新建绘制验证码并保存Session的接口。

4. 前端页面，添加验证码提交和验证码图片，用于提交时对比和绘制验证码。

步骤

1. 添加自定义过滤器。在配置文件(application.yml)添加两个参数 captchaEnabled （验证码开关）和 captchaType （验证码类型）。

# shiro配置
shiro:
  user:
    loginUrl: /login
    captchaEnabled : true
    captchaType: math

 

ShiroConfiguration.java 添加配置器的引用。

/**
 * 验证码开关
 */
@Value("${shiro.user.captchaEnabled}")
private boolean captchaEnabled;

/**
 * 验证码类型
 */
@Value("${shiro.user.captchaType}")
private String captchaType;

 

在拦截器添加登录页面的验证码接口

 过滤器方法如下：

/**
 * 自定义验证码
 * @return
 */
private Filter myCaptcha() {
    MyCaptchaFilter myCaptchaFilter = new MyCaptchaFilter();
    myCaptchaFilter.setCaptchaEnabled(captchaEnabled);
    myCaptchaFilter.setCaptchaType(captchaType);
    return myCaptchaFilter;
}

2. 自定义验证码过滤器，继承抽象类 AccessControlFilter 。添加接收参数的方法。

/**
 * 验证码开关
 */
private boolean captchaEnabled = true;

/**
 * 验证码类型
 */
private String captchaType= "math";

public void setCaptchaEnabled(boolean captchaEnabled) {
    this.captchaEnabled = captchaEnabled;
}

public void setCaptchaType(String captchaType) {
    this.captchaType = captchaType;
}

继承过滤前验证方法。当获取到的接口类型为“post”时且开启验证码时，进行验证，否则不进行验证。（验证方法，对比post请求的code和Session是否一致），返回true则放行下一个拦截器，返回false则执行 onAccessDenied 代码。

 @Override
protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) throws Exception {
    HttpServletRequest httpServletRequest = (HttpServletRequest) request;
    if(!captchaEnabled || !"post".equals(httpServletRequest.getMethod().toLowerCase())){
        return true;
    }
    return validateResponse(httpServletRequest, httpServletRequest.getParameter(ShiroConstants.CURRENT_VALIDATECODE));  //  public static final String CURRENT_VALIDATECODE = "validateCode";
}

private boolean validateResponse(HttpServletRequest request, String validateCode) {
    Object obj = ShiroUtils.getSession().getAttribute("KAPTCHA_SESSION_KEY");
    String code = String.valueOf(obj != null ? obj : "");
    System.out.println("code:"+code);
    System.out.println("validateCode:"+validateCode);
    // 验证码清除，防止多次使用。
    request.getSession().removeAttribute("KAPTCHA_SESSION_KEY");
    if (StringUtils.isEmpty(validateCode) || !validateCode.equalsIgnoreCase(code))
    {
        return false;
    }
    return  true;
}

 验证后的处理方法。返回true则放行下一个拦截器，返回false，则不放行下一个拦截器。

@Override
protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {
    request.setAttribute(ShiroConstants.CURRENT_CAPTCHA, ShiroConstants.CAPTCHA_ERROR);//  request.setAttribute("captcha", "captchaError");
    return false;
}

 3.新建绘制验证码并保存Session的接口。实际使用中，验证码的绘制可能更复杂，单独引用在其他地方。这里，简单引用随机生成N位数字的方式。使用BufferImage设置背景和每个字符。

**
 * 图片验证码
 * 
 * @author ruoyi
 */
@Controller
@RequestMapping("/captcha")
public class SysCaptchaController extends BaseController
{
    /**
     * 页面验证码图片生成（并将图片存入session）
     */
    @GetMapping(value = "/captchaImage")
    public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        int width = 120;
        int height = 40;
        BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 生成验证码
        String code = generateCode(4);
        // 绘制验证码
        drawCaptcha(bufferedImage, code);
        // 将验证码存入session
        request.getSession().setAttribute("KAPTCHA_SESSION_KEY", code);
        // 设置响应头
        response.setContentType("image/jpeg");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        // 输出图片
        ImageIO.write(bufferedImage,"jpg",response.getOutputStream());

        return  null;
    }

    /**
     * 生成验证码
     * @param length
     * @return
     */
    private String generateCode(int length){
        Random random = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < length; i++) {
            sb.append(random.nextInt(10));
        }
        return sb.toString();
    }

    /**
     * 绘制验证码（可以自定义验证码的样式和细节）
     * @param bufferedImage
     * @param code
     */
    private void drawCaptcha(BufferedImage bufferedImage, String code) {
        Graphics graphics = bufferedImage.getGraphics();
        Random random = new Random();
        // 设置背景
        graphics.setColor(Color.WHITE);
        graphics.fillRect(0, 0, bufferedImage.getWidth(), bufferedImage.getHeight());
        // 随机设置每个字符的颜色
        for (int i = 0; i < code.length(); i++) {
            Font font = new Font("Times New Roman", Font.BOLD, 30);
            graphics.setColor(getColor(random));
            graphics.setFont(font);
            graphics.drawString(String.valueOf(code.charAt(i)), 30*i + 10, 30);
        }

        graphics.dispose();
    }

    // 字符随机颜色
    private static Color getColor(Random random) {
        return new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256));
    }

}

4. 前端页面，添加验证码提交和验证码图片，用于提交时对比和绘制验证码。 Math.random() 用于生成随机数。src路径变化，则会调用后台接口，改变验证码。

<div  th:if="${captchaEnabled==true}">
    <div >
        验证码：<input type="text" name="validateCode" placeholder="验证码" maxlength="5" />
    </div>
    <div >
        <img th:src="/captcha/captchaImage"  title="点击刷新验证码" width="120" height="40" onclick="this.src='/captcha/captchaImage?'+Math.random()" />
    </div>
</div>