验证码（笔记）

为什么要有验证码：

1. 为什么验证码这么让人厌烦，每个网站还要使用它呢？换句话说，这些网站为什么要“故意为难”用户呢？

2. 其实验证码主要是为了区分用户是计算机还是人。假设一个黑客知道了你的账号，根据账号可以挨个尝试不同的密码进行登录，直到登录成功，就等于破解了你的密码。如果由人类来重复这个过程，那肯定是非常耗费精力和体力的。但是如果是由程序来重复这个过程，那么破解密码就简单多了。

3. 为了防止黑客暴力破解密码，我们可以要求用户在登录时回答验证码的问题。这些问题一般非常简单，但是对于计算机来说就很困难了（需要专门的破解验证码程序）。我们可以认为能回答出问题的用户就是人类。当然除了防止暴力破解密码，还可以防止黄牛党刷票、论坛灌水等。

如何实现验证码功能：

第一步：在pom.xml文件中添加Happy Captcha项目的依赖。

<dependency>
    <groupId>com.ramostear</groupId>
    <artifactId>Happy-Captcha</artifactId>
    <version>1.0.1</version>
</dependency>

第二步：实现生成验证码的请求处理。

因为请求生成验证码不需要登录（否则用户就需要先登录才能获取验证码，而没有验证码又不能登录……），所以我们把这个请求放到AppController里。代码如下：

@RestController
@RequestMapping("/app/api")
public class AppController {
    @GetMapping("/hello")
    public String hello() {
        return "app公开请求";
    }

    @GetMapping("/captcha")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) {
        HappyCaptcha.require(request, response)
                // 表示生成中文算法类型的验证码
                .type(CaptchaType.ARITHMETIC_ZH)
                .build()
                .finish();
    }
}

第三步：登录页添加验证码显示、输入、刷新的功能。

<label for="captcha">验证码</label>
<input type="text" id="captcha" name="captcha" placeholder="点击图片刷新" autocomplete="off"/>
<img id="captchaImg" src="/app/api/captcha" alt="验证码" onclick="refreshCaptchaImg()"/> <br />
<script type="application/javascript">
    /*
     * 点击验证码图片时刷新验证码
     */
    function refreshCaptchaImg() {
        document.getElementById('captchaImg').setAttribute('src', '/app/api/captcha?ts=' + Math.random());
    }
</script>

第四步：实现登录时的验证码校验逻辑。

但是应该在哪个地方实现这个逻辑呢？

如果你对Servlet稍有了解，那么你应该知道Filter可以对客户端的每个请求进行拦截，如果校验通过就传递给下一个Filter，否则就直接返回。直到所有Filter都校验通过之后，客户请求才会到达我们定义的Controller。因此我们可以自定义一个Filter实现，然后插入到这个拦截链中，以此来执行验证码的校验。Spring Security拦截登录请求，执行登录处理的机制也是这样插入的，类名是UsernamePasswordAuthenticationFilter。一般都是先校验验证码，再校验用户名和密码，因此我们可以把自定义的Filter（类名定义为CaptchaFilter）插入到UsernamePasswordAuthenticationFilter的前面。配置方式是在SecurityConfig.configure(HttpSecurity http)方法中添加最后两行代码：

http
    // 配置要控制的http URL
    .authorizeRequests()
        // 对于静态文件和页面不拦截。
        .antMatchers("/css/**", "/index").permitAll()
        // /user/下的请求只有拥有USER角色的用户才能访问
        .antMatchers("/user/**").hasRole("USER")
        // USER角色的用户可以访问/user/api/下的资源
        .antMatchers("/user/api/**").hasRole("USER")
        // ADMIN角色的用户可以访问/admin/api/下的资源
        .antMatchers("/admin/api/**").hasRole("ADMIN")
        // /app/api/下的资源不做控制
        .antMatchers("/app/api/**").permitAll()
    // 回到HttpSecurity
    .and()
    // 设置通过表单进行登录认证
    .formLogin()
        // 登录页名称（即login.html)，登录页不需要权限控制
        .loginPage("/login")
        // 登录校验地址，点击登录按钮时会跳转到该地址
        .loginProcessingUrl("/loginUrl")
        // 登录错误页地址
        .failureUrl("/login-error")
    .and()
        // 添加验证码校验过滤器
        .addFilterBefore(new CaptchaFilter(), UsernamePasswordAuthenticationFilter.class);

CaptchaFilter的代码如下，它继承了OncePerRequestFilter，可以保证每个请求只执行一次这个Filter。

public class CaptchaFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        // 非登录请求，不需要校验验证码
        if (!"/loginUrl".equals(request.getRequestURI())) {
            // 传递给过滤器链上的下一个Filter
            filterChain.doFilter(request, response);
            return;
        }

        // 获取用户输入的验证码
        String captchaCode = request.getParameter("captcha");
        boolean verification = HappyCaptcha.verification(request, captchaCode, true);
        // 验证后清除验证码
        HappyCaptcha.remove(request);
        if (verification) {
            // 验证通过，传递给过滤器链上的下一个Filter
            filterChain.doFilter(request, response);
        } else {
            // 验证不通过，重定向到登录错误页面
            response.sendRedirect("/login-error?msg=" + URLEncoder.encode("验证码不正确", "UTF-8"));
        }
    }
}