引言
本文代码已提交至Github(版本号:
88e6d4f9772a106ee469b8caaa5b79b6df7b55cb),有兴趣的同学可以下载来看看:https://github.com/ylw-github/taodong-shop
在上一篇博客《淘东电商项目(32) -SSO单点登录(集成SSO认证服务)》,主要讲解了如何集成SSO认证中心,集成成功后,登录界面和登录成功界面如下图所示:
| 登录 | 登录成功 |
但是这个登录和主界面并不是我们想要的,本文先来来讲解如何改造登录界面。
注意:我在hosts文件里添加了如下内容,之后的博客都用这些域名:
本文目录结构:
1. 效果图
下面先贴上效果图(主界面先暂时替代,涉及其它的知识点,下篇博客继续完善):
| 登录界面 | 登录成功界面 |
2. 登录界面代码(前端+后台)
先贴上前端代码(核心代码,注意里面携带了redirect_url,隐藏起来了):
<div class="layui-fulid" id="house-login"> <form action="doLogin" method="post"> <div class="layui-form"> <p>手机号登录</p> <div class="layui-input-block login"> <i class="layui-icon layui-icon-username"></i> <input type="text" required lay-verify="required" name="mobile" value="${(loginVo.mobile)!''}" placeholder="请输入手机号码" class="layui-input"> </div> <div class="layui-input-block login"> <i class="layui-icon layui-icon-vercode"></i> <input type="password" required lay-verify="required" name="password" value="${(loginVo.password)!''}" placeholder="请输入密码" class="layui-input"> </div> <div class="layui-input-block getCode"> <input type="text" name="graphicCode" required lay-verify="required" placeholder="请输入验证码" class="layui-input"> <img alt="" src="getVerify" onclick="getVerify(this);" style="border: 1px solid #e2e2e2;font-size: 18px;height: 48px;margin-top: -93px;width: 44%;background-color: #e8d6c0;margin-left: 166px;"> </div> <span style="color: red; font-size: 20px; font-weight: bold; font-family: '楷体', '楷体_GB2312';">${error!''}</span> <input type="hidden" name="redirect_url" value="${RequestParameters['redirect_url']!''}" /> <button class="layui-btn" style="margin-top: 5px;" lay-submit lay-filter="user-login">登录</button> </div> </form> </div>
WebController层代码(现在业务系统查询用户是否存在,然后使用XXL-SSO框架登录):
@RequestMapping(Conf.SSO_LOGIN) public String login(Model model, HttpServletRequest request, HttpServletResponse response) { // login check XxlSsoUser xxlUser = SsoWebLoginHelper.loginCheck(request, response); if (xxlUser != null) { // success redirect String redirectUrl = request.getParameter(Conf.REDIRECT_URL); if (redirectUrl!=null && redirectUrl.trim().length()>0) { String sessionId = SsoWebLoginHelper.getSessionIdByCookie(request); String redirectUrlFinal = redirectUrl + "?" + Conf.SSO_SESSIONID + "=" + sessionId;; return "redirect:" + redirectUrlFinal; } else { return "redirect:/"; } } model.addAttribute("errorMsg", request.getParameter("errorMsg")); model.addAttribute(Conf.REDIRECT_URL, request.getParameter(Conf.REDIRECT_URL)); return "login"; } /** * 接受请求参数 * * @return */ @PostMapping("/doLogin") public String postLogin(@ModelAttribute("loginVo") @Validated LoginVo loginVo, BindingResult bindingResult, Model model, RedirectAttributes redirectAttributes, HttpServletRequest request, HttpServletResponse response, HttpSession httpSession, String ifRemember) { if (bindingResult.hasErrors()) { // 如果参数有错误的话 // 获取第一个错误! String errorMsg = bindingResult.getFieldError().getDefaultMessage(); setErrorMsg(model, errorMsg); return MB_LOGIN_FTL; } // 1.图形验证码判断 String graphicCode = loginVo.getGraphicCode(); if (!RandomValidateCodeUtil.checkVerify(graphicCode, httpSession)) { setErrorMsg(model, "图形验证码不正确!"); return MB_LOGIN_FTL; } // 2.将vo转换dto调用会员登陆接口 UserLoginInDTO userLoginInpDTO = WebBeanUtils.voToDto(loginVo, UserLoginInDTO.class); userLoginInpDTO.setLoginType(Constants.MEMBER_LOGIN_TYPE_PC); String info = webBrowserInfo(request); userLoginInpDTO.setDeviceInfor(info); BaseResponse<UserLoginInOutDTO> login = memberLoginServiceFeign.ssoLogin(userLoginInpDTO); if (!isSuccess(login)) { setErrorMsg(model, login.getMsg()); return MB_LOGIN_FTL; } UserLoginInOutDTO data = login.getData(); XxlSsoUser xxlUser = new XxlSsoUser(); xxlUser.setUserid(String.valueOf(data.getUserId())); xxlUser.setUsername(data.getUserName()); xxlUser.setVersion(UUID.randomUUID().toString().replaceAll("-", "")); xxlUser.setExpireMinute(SsoLoginStore.getRedisExpireMinute()); xxlUser.setExpireFreshTime(System.currentTimeMillis()); // 设置sessionid String sessionId = SsoSessionIdHelper.makeSessionId(xxlUser); // 认证服务登录 boolean ifRem = (ifRemember != null && "on".equals(ifRemember)) ? true : false; SsoWebLoginHelper.login(response, sessionId, xxlUser, ifRem); // 4、return, redirect sessionId String redirectUrl = request.getParameter(Conf.REDIRECT_URL); if (redirectUrl != null && redirectUrl.trim().length() > 0) { String redirectUrlFinal = redirectUrl + "?" + Conf.SSO_SESSIONID + "=" + sessionId; return "redirect:" + redirectUrlFinal; } else { return "redirect:/"; } }
总结
本文主要讲解了XXL-SSO认证服务的登录界面改造。




