验证码这一块,也没啥难的,只是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
访问测试
测试验证码,我登录到我的界面,设置登录验证。