文章首发于公众号，欢迎订阅
前后端分离的单点登录系统
项目说明
有两个外部系统想要做单点登录，有一个单点登录认证中心系统 CAS。
CAS 采用前后端分离架构，后端使用 Spring Boot，前端使用 nginx 做代理。
环境配置
hosts
127.0.0.1 www.cas.com
127.0.0.1 www.app1.com
127.0.0.1 www.app2.com
nginx
server {
listen 80;
server_name www.cas.com;
root html/cas;
}
server {
listen 80;
server_name www.app1.com;
location / {
root html/app1;
index index.html index.htm;
}
}
server {
listen 80;
server_name www.app2.com;
location / {
root html/app2;
index index.html index.htm;
}
}
redis
本地 redis 环境
使用
启动后端Spring Boot，前端 nginx。
浏览器输入www.app1.com，登录后，另起一个窗口，输入www.app2.com，无需登录。
注销也是同理。
单点登录的流程
如图所示。
解释说明（序号与图中不对应）：
客户端访问系统1
1、浏览器输入www.app1.com初次访问，发现没有登录，此时携带你想访问的地址（www.app1.com）跳转到 CAS，如下代码所示。
window.location.href = "http://www.cas.com:9000/login?returnUrl=http://www.app1.com"
2、如果之前没有登录，是第一次的登录的话，跳转到 CAS 登录界面。
CASlogin接口的代码如下。
@GetMapping("login")
public void login(String returnUrl, HttpServletRequest request, HttpServletResponse response) throws IOException {
// 获取全局门票，如果cookie中能够获取到，证明用户登录过
String userTicket = getCookie(request, COOKIE_USER_TICKET);
// 验证全局门票是否合法
boolean isValid = verifyUserTicket(userTicket);
if (isValid) {
// 全局门票合法，那么再签发一个临时门票
String tmpTicket = createTmpTicket();
response.sendRedirect(returnUrl + "?tmpTicket=" + tmpTicket);
} else {
// TODO 前后端可以对returnUrl进行编解码传输
response.sendRedirect("http://www.cas.com?returnUrl=" + returnUrl);
}
}
我们只需要关注最后一行，因为使用了 nginx 做代理，所以访问http://www.cas.com时，会跳转到默认首页。同时会附带一个参数returnUrl。
3、跳转到 CAS 的登录页后，输入账号密码，点击登录。登录接口代码如下。
@PostMapping("login")
@ResponseBody
public AjaxResult doLogin(String username,
String password,
String returnUrl,
HttpServletRequest request,
HttpServletResponse response) throws IOException {
// 判断用户名密码不为空
if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {
return AjaxResult.error("用户名或密码不能为空");
}
// 1.模拟登录
UserDO userDO1 = new UserDO().setId("1").setUsername("admin1").setPassword("admin1");
UserDO userDO2 = new UserDO().setId("2").setUsername("admin2").setPassword("admin2");
// if (!userDO.getUsername().equals(username) || !userDO.getPassword().equals(password)) {
// return AjaxResult.error("用户名或密码不正确");
// }
UserDO userDO = new UserDO();
if ("admin1".equals(username)) {
userDO = userDO1;
}else if ("admin2".equals(username)) {
userDO = userDO2;
}
// 2.保存用户会话信息到redis中
UserVO userVO = new UserVO();
BeanUtils.copyProperties(userDO, userVO);
redisOperator.set(REDIS_USER_INFO + ":" + userDO.getId(), JsonUtils.objectToJson(userVO));
// 3.生成全局门票，代表用户在CAS端登录过
String userTicket = UUID.randomUUID().toString().trim().replace("-", "");
// 给CAS端设置全局门票cookie
setCookie(COOKIE_USER_TICKET, userTicket, response);
// 4.userTicket关联用户id，放入redis中，代表该用户拥有了全局门票
redisOperator.set(REDIS_USER_TICKET + ":" + userTicket, userDO.getId());
// 5.生成临时门票，回跳到调用端网站验证使用，是CAS签发的一个一次性门票
String tmpTicket = createTmpTicket();
String url = returnUrl + "?tmpTicket=" + tmpTicket;
Map<String, String> map = new HashMap<>();
map.put("returnUrl", url);
return AjaxResult.success(map);
}
4、创建用户会话，以下代码同上。
redisOperator.set(REDIS_USER_INFO + ":" + userDO.getId(), JsonUtils.objectToJson(userVO));
5、创建用户全局门票。
String userTicket = UUID.randomUUID().toString().trim().replace("-", "");
6、保存全局门票到 cookie。
setCookie(COOKIE_USER_TICKET, userTicket, response);
7、全局门票关联到用户会话。
redisOperator.set(REDIS_USER_TICKET + ":" + userTicket, userDO.getId());
8、创建临时门票。
String tmpTicket = createTmpTicket();
9、拿着临时门票回调到之前想要访问的网址（www.app1.com）。
String url = returnUrl + "?tmpTicket=" + tmpTicket;
Map<String, String> map = new HashMap<>();
map.put("returnUrl", url);
return AjaxResult.success(map);
具体的回调是前端页面发起得，代码如下。
if (res.data.code === 200) {
var returnUrl = res.data.data.returnUrl;
window.location.href = returnUrl
}
10、校验临时门票，接口如下。
@PostMapping("verifyTmpTicket")
@ResponseBody
public AjaxResult verifyTmpTicket(String tmpTicket, HttpServletRequest request, HttpServletResponse response) {
// 使用一次性临时门票来验证用户是否登录，如果登录过，把用户会话信息返回给站点
String tmpTicketValue = redisOperator.get(REDIS_TMP_TICKET + ":" + tmpTicket);
if (StringUtils.isBlank(tmpTicketValue)) {
return AjaxResult.error("用户门票异常");
}
// 如果临时门票成功获取，则销毁门票，并且拿到CAS端cookie中的全局门票，以此获取用户会话信息
if (!tmpTicketValue.equals(tmpTicket)) {
return AjaxResult.error("用户门票异常");
} else {
// 销毁临时门票
redisOperator.del(REDIS_TMP_TICKET + ":" + tmpTicket);
}
// 验证全局门票绑定的用户会话信息是否存在
String userTicket = getCookie(request, COOKIE_USER_TICKET);
String userId = redisOperator.get(REDIS_USER_TICKET + ":" + userTicket);
if (StringUtils.isBlank(userId)) {
return AjaxResult.error("用户门票异常");
}
String userVO = redisOperator.get(REDIS_USER_INFO + ":" + userId);
if (StringUtils.isBlank(userVO)) {
return AjaxResult.error("用户门票异常");
}
// 验证成功，返回用户会话信息
return AjaxResult.success(JsonUtils.jsonToPojo(userVO, UserVO.class));
}
校验请求时由www.app1.com的首页发起的，
axios.post('http://www.cas.com:9000/verifyTmpTicket?tmpTicket=' + tmpTicket)
11、如果临时门票存在且有效，则销毁临时门票，同时通过全局门票获取用户会话。
12、返回会话到请求端，请求端保存会话到本地 cookie，以便后续使用。
13、显示登录成功。
在客户端访问完系统1后，客户端又访问系统2
1、浏览器输入www.app2.com初次访问，此时携带你想访问的地址（www.app1.com）跳转到 CAS 的 login接口校验登录状态。
@GetMapping("login")
public void login(String returnUrl, HttpServletRequest request, HttpServletResponse response) throws IOException {
// 获取全局门票，如果cookie中能够获取到，证明用户登录过
String userTicket = getCookie(request, COOKIE_USER_TICKET);
// 验证全局门票是否合法
boolean isValid = verifyUserTicket(userTicket);
if (isValid) {
// 全局门票合法，那么再签发一个临时门票
String tmpTicket = createTmpTicket();
response.sendRedirect(returnUrl + "?tmpTicket=" + tmpTicket);
} else {
// TODO 前后端可以对returnUrl进行编解码传输
response.sendRedirect("http://www.cas.com?returnUrl=" + returnUrl);
}
}
2、由于之前系统1登录过了，因此能够从 cookie 中获取到全局门票，只要全局门票验证合法，则创建一个临时门票用于访问。
3、同样需要校验临时门票，校验通过， 就会获取用户会话，返回会话到请求端，显示登录成功。
也就是说，系统2登录时是不需要输入账号密码的。
我创建了一个免费的知识星球，用于分享知识日记，欢迎加入！
