淘东电商项目（33） -SSO单点登录（改造SSO认证服务登录界面）

引言

本文代码已提交至Github（版本号:88e6d4f9772a106ee469b8caaa5b79b6df7b55cb），有兴趣的同学可以下载来看看：https://github.com/ylw-github/taodong-shop

在上一篇博客《淘东电商项目（32） -SSO单点登录（集成SSO认证服务）》，主要讲解了如何集成SSO认证中心，集成成功后，登录界面和登录成功界面如下图所示：

登录	登录成功

但是这个登录和主界面并不是我们想要的，本文先来来讲解如何改造登录界面。

注意：我在hosts文件里添加了如下内容，之后的博客都用这些域名：

本文目录结构：
l____引言
l____ 1. 效果图
l____ 2. 登录界面代码（前端+后台）
l____总结

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认证服务的登录界面改造。