验证码这一块，也没啥难的，只是cas需要验证码，所以我就现在springboot上出一款验证码的操作，然后集成到cas上，在验证码操作上，需要理解如何导入静态文件到springboot中。实现的步骤：1、导入验证码生成工具。2、配置yml文件，设定端口号，项目，以及静态文件目录，等信息。3、配置验证码的控制器.4、配置前台设置。

代码地址

https://gitee.com/yellowcong/springboot-demo/tree/master/springboot-server-code

项目目录结构

添加验证码控制器

验证码控制器，可以验证验证码正确性，以及生成验证码的服务，验证码生成工具可以查看Java工具包之验证码生成工具类-yellowcong

package com.yellowcong.cas.controller;

import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.yellowcong.auth.code.CaptchaCodeUtils;
import com.yellowcong.auth.code.CaptchaCodeUtils.CaptchaCode;
import com.yellowcong.auth.constants.Constants;

@Controller
public class CaptchaController {

    /**
      * 创建日期:2018/02/07<br/>
      * 创建时间:8:36:28<br/>
      * 创建用户:yellowcong<br/>
      * 机能概要: 写数据到客户端
      * @param request
      * @param response
      * @throws Exception
     */
    @GetMapping(value = Constants.REQUEST_MAPPING, produces = "image/png")
    public void handleRequestInternal(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        OutputStream out = null;
        try {
            //设置response头信息
            //禁止缓存
            resp.setHeader("Cache-Control", "no-cache");
            resp.setContentType("image/png");
            //存储验证码到session
            CaptchaCode code = CaptchaCodeUtils.getInstance().getCode();

            //获取验证码code
            String codeTxt = code.getText();
            req.getSession().setAttribute(Constants.STORE_CODE, codeTxt);

            System.out.println(req.getSession().getAttribute(Constants.STORE_CODE));
            //写文件到客户端
            out = resp.getOutputStream();
            byte[] imgs = code.getData();
            out.write(imgs, 0, imgs.length);
            out.flush();
        } finally {
            if(out != null) {
                out.close();
            }
        }
    }

    /**
     * 创建日期:2018年2月7日<br/>
     * 创建时间:下午10:09:29<br/>
     * 创建用户:yellowcong<br/>
     * 机能概要:验证码比对
     * @param code
     * @param req
     * @param resp
     */
    @RequestMapping(value="/chkCode",method=RequestMethod.POST)
    public void checkJSON(String code,HttpServletRequest req,HttpServletResponse resp) {

        //获取session中的验证码
        String storeCode = (String)req.getSession().getAttribute(Constants.STORE_CODE);
        code = code.trim();
        //返回值
        Map<String,Object> map = new HashMap<String, Object>();
        //验证是否对，不管大小写
        if(!StringUtils.isEmpty(storeCode) && code.equalsIgnoreCase(storeCode)) {
            map.put("error", false);
            map.put("msg", "验证成功");
        }else if (StringUtils.isEmpty(code)){
            map.put("error", true);
            map.put("msg", "验证码不能为空");
        }else {
            map.put("error", true);
            map.put("msg", "验证码错误");
        }
        this.writeJSON(resp, map);
    }

    /**
     * 在SpringMvc中获取到Session
     * @return
     */
    public void writeJSON(HttpServletResponse response,Object object){
        try {
            //设定编码 
            response.setCharacterEncoding("UTF-8");
            //表示是json类型的数据
            response.setContentType("application/json");
            //获取PrintWriter 往浏览器端写数据
            PrintWriter writer = response.getWriter();

            ObjectMapper mapper = new ObjectMapper(); //转换器
            //获取到转化后的JSON 数据
            String json = mapper.writeValueAsString(object);
            //写数据到浏览器
            writer.write(json);
            //刷新，表示全部写完，把缓存数据都刷出去
            writer.flush();

            //关闭writer
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

配置前台

jsp页面

<%@ page import="java.util.Map" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>index</title>
 <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.7.1.js"></script>
 <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/code.js"></script>

</head>
<body>
<h1>首页</h1>
<a href="<%=request.getContextPath()%>/user/info">用户信息</a>
<br/>
<form action="">
用户名:<input type="text" /><br/>
密码:<input type="text" /><br/>
验证码:<img alt="" src="<%=request.getContextPath()%>/captcha" id="code_img" onclick="changeCode()"><input type="text" id="code"/><span id="code_str"></span><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

js验证

$(function(){
    
    //验证码验证
    $("#code").blur(function(){
    
        var codeStr = $("#code").val();

        if(codeIsError()){
            console.log("验证失败");
        }else{
            console.log("验证成功");
        }
    });
});
//---------------------------------------------------------------------
//检查验证码是否正确
//---------------------------------------------------------------------
function changeCode(){
    
    //修改验证码
    $("#code_img").attr('src','/captcha?id='+uuid());
}
//-------------------------------------------------------------------------------------------
//生成UUID
//-------------------------------------------------------------------------------------------
function uuid(){
    
    //获取系统当前的时间
    var d = new Date().getTime();
    //替换uuid里面的x和y
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    
      //取余 16进制
      var r = (d + Math.random()*16)%16 | 0;
      //向下去整
      d = Math.floor(d/16);
      //toString 表示编程16进制的数据
      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
};
//---------------------------------------------------------------------
//检查验证码是否正确
//---------------------------------------------------------------------
function codeIsError(){
    
    var error = true;
    var codeStr = $("#code").val();
    if(codeStr == ""){
        setCodeInfo(error,"验证码不能为空");
        return error;
    }
    $.ajax({  
        type : "post",  //使用提交的方法 post、get
        url : contextPath()+"chkCode",   //提交的地址
        data : { code:$("#code").val() },  //数据
        async : false,   //配置是否
        dataType:"json",//返回数据类型的格式
        success : function(data){
      //回调操作
          console.log(data);
          error = data.error;

          setCodeInfo(error,data.msg);
        }  
    });
    return error;
}
//设定验证码的错误提示消息
function setCodeInfo(error,msg){
    
    if(error){
        $("#code_str").html("<font color='red'>"+msg+"</font>");
    }else{
        $("#code_str").html("<font color='blue'>"+msg+"</font>");
    }
}
// 获取到当前项目的名称
var contextPath = function() {
     
    return "/" + location.pathname.split("/")[1]; 
}

配置application.yml

在yml中，配置了静态文件的目录。然后设置端口好和项目信息。

logging:
  #日志存储地址
  file: "logs/config/demo-xx.log"
info:
  name : "入门案例"

server:
  #端口号
  #http://yellowcong.com:8888/
  port: 8888
  #项目名，如果不设定，默认是 /
  context-path: /
---
#spring.mvc.resources
spring:
  mvc:
    #配置静态文件地址
    static-path-pattern: /static/**
    view:
      # 页面默认前缀目录
      prefix: /WEB-INF/jsp/
      # 响应页面默认后缀
      suffix: .jsp

访问测试

测试验证码，我登录到我的界面，设置登录验证。