《果然新鲜》电商项目（37）-SSO单点登录（改造SSO认证服务登录界面）

该项目是采用目前比较流行的`SpringBoot`/`SpringCloud`构建微服务电商项目，项目叫 **《果然新鲜》**，实现一套串联的微服务电商项目，能完全掌握该知识，可以在一线城市拿到月薪25+k薪资。完全符合一线城市微服务电商的需求，对中国程序猿学习微服务电商架构，有非常大的帮助，该项目涵盖从微服务电商需求讨论、数据库设计、技术选型、互联网安全架构、整合`SpringCloud`各自组

IT-老牛

852人浏览 · 2022-02-05 10:13:10

IT-老牛 · 2022-02-05 10:13:10 发布

引言

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

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

1. 效果图

下面先贴上效果图（主界面先暂时替代，涉及其它的知识点，下篇博客继续完善）：

登录界面
在这里插入图片描述

登录成功界面
在这里插入图片描述

2. 登录界面代码（前端+后台）

先贴上前端代码(核心代码，注意里面携带了redirect_url，隐藏起来了),改造原来自带的登录页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="/static/img/page-common/favicon.ico" type="image/x-icon" />
    <title>果然新鲜 - 登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/page-common.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/page-login.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/page-login-header.css" />
</head>

<body>
<!-- 网页头部开始 -->
<script type="text/javascript" src="/static/js/page-login-header.js" charset="UTF-8"></script>
<!-- 网页头部结束 -->

<!-- 网页主体开始 -->
<div class="fresh-main-fluid" style="width: 100%;height:100%;background:#2663b6;">
    <div class="fresh-main fresh-center fresh-clearfix">
        <div class="fresh-body-1">
            <div class="fresh-img"> <img src="/static/img/page-login/bg.png" /> </div>
            <div class="fresh-loginbox">
                <h2>账号登录<span style="color: red">${error!''}</span></h2>
                <form action="doLogin" method="post">
                    <div class="fresh-loginbox-text"> <p>手机号</p>
                        <div> <img src="/static/img/page-login/denglu.png" />
                            <input type="text" name="mobile" value="${(loginVo.mobile)!''}" id="mobile" placeholder="请输入手机号码" />
                        </div>
                    </div>
                    <div class="fresh-loginbox-text"> <p>密码</p>
                        <div> <img src="/static/img/page-login/mima.png" />
                            <input type="password" name="password" id="password" value="${(loginVo.password)!''}" placeholder="请输入密码" />
                        </div>
                    </div>
                    <div class="fresh-loginbox-text"> <p>验证码</p>
                        <div> <img src="/static/img/page-login/mima.png" />
                            <input type="text" name="graphicCode" id="graphicCode" placeholder="请输入验证码" />
                            <img src="/getVerify" style="width: 80px;" id="getverification" onclick="getVerify(this);"/>
                        </div>
                    </div>
                    <div class="fresh-login-forget"> <a href="forget.html">忘记密码</a> </div>
                    <div class="fresh-login-submit">
                        <input type="hidden" name="redirect_url" value="${RequestParameters['redirect_url']!''}" />
                        <input type="submit" value="登录" />
                    </div>
                    <div class="fresh-login-thirdlogin"> <a href="#">——&nbsp;&nbsp;第三方登录&nbsp;&nbsp; ——</a> </div>
                    <div class="fresh-login-loginmode">
                        <div> <a href="/qqAuth"> <img src="/static/img/page-login/qq.png" /> </a>
                            <a href="#"> <img src="/static/img/page-login/weixin.png" /> </a>
                            <a href="#"> <img src="/static/img/page-login/weibo.png" /> </a>
                        </div>
                    </div>
                    <div class="fresh-login-Register"> <a href="register.html">立即注册</a> </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 网站主体结束 -->

<!-- 网页底部开始 -->
<script type="text/javascript" src="/static/js/page-footer.js" charset="UTF-8"></script>
<!-- 网页底部结束 -->

<script type="text/javascript" src="/static/plugins/jquery/jquery-1.12.4.min.js"></script>

<script>
    //获取验证码
    function getVerify(obj) {
        obj.src = "getVerify?" + Math.random();
    }

</script>

</body>
</html>

WebController层代码（现在业务系统查询用户是否存在，然后使用XXL-SSO框架登录）：

package com.xxl.sso.server.controller;

import com.guoranxinxian.api.BaseResponse;
import com.guoranxinxian.common.base.BaseWebController;
import com.guoranxinxian.common.util.RandomValidateCodeUtil;
import com.guoranxinxian.common.util.WebBeanUtils;
import com.guoranxinxian.constants.Constants;
import com.guoranxinxian.member.dto.input.UserLoginInDTO;
import com.guoranxinxian.member.dto.output.UserLoginInOutDTO;
import com.xxl.sso.core.conf.Conf;
import com.xxl.sso.core.login.SsoWebLoginHelper;
import com.xxl.sso.core.store.SsoLoginStore;
import com.xxl.sso.core.store.SsoSessionIdHelper;
import com.xxl.sso.core.user.XxlSsoUser;
import com.xxl.sso.server.controller.req.vo.LoginVo;
import com.xxl.sso.server.feign.MemberLoginServiceFeign;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.UUID;

@Controller
public class WebController extends BaseWebController {

    /**
     * 跳转到登陆页面页面
     */
    private static final String MB_LOGIN_FTL = "login";

    @Autowired
    private MemberLoginServiceFeign memberLoginServiceFeign;
    /**
     * 重定向到首页
     */
    private static final String REDIRECT_INDEX = "redirect:/";

    @RequestMapping("/")
    public String index(Model model, HttpServletRequest request, HttpServletResponse response) {
        XxlSsoUser xxlUser = SsoWebLoginHelper.loginCheck(request, response);
        if (xxlUser == null) {
            return "redirect:/login";
        } else {
            model.addAttribute("xxlUser", xxlUser);
            return "index";
        }
    }

    @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(data.getToken());
        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:/";
        }
    }

    @RequestMapping(Conf.SSO_LOGOUT)
    public String logout(HttpServletRequest request, HttpServletResponse response, RedirectAttributes redirectAttributes) {
        // logout
        SsoWebLoginHelper.logout(request, response);
        redirectAttributes.addAttribute(Conf.REDIRECT_URL, request.getParameter(Conf.REDIRECT_URL));
        return "redirect:/login";
    }

}

3.总结

本文主要讲解了XXL-SSO认证服务的登录界面改造。

K8S/Kubernetes

K8S/Kubernetes社区为您提供最前沿的新闻资讯和知识内容

更多推荐

【深度】阿里巴巴万级规模 K8s 集群全局高可用体系之美

作者 | 韩堂、柘远、沉醉来源 | 阿里巴巴云原生公众号前言台湾作家林清玄在接受记者采访的时候，如此评价自己 30 多年写作生涯：“第一个十年我才华横溢，‘贼光闪现’，令周边黯然失色；第二个十年，我终于‘宝光现形’，不再去抢风头，反而与身边的美丽相得益彰；进入第三个十年，繁华落尽见真醇，我进入了‘醇光初现’的阶段，真正体味到了境界之美”。长夜有穷，真水无香。领略过了 K8s“身在江

K8S/Kubernetes

如何基于 K8s 构建下一代 DevOps 平台？

作者 | 孙健波（天元）导读：当前云原生 DevOps 体系现状如何？面临哪些挑战？如何通过 OAM 解决云原生 DevOps 场景下的诸多问题？云原生开发应用模型 OAM(Open Application Model) 社区核心成员孙健波将为大家一一解答，并分享如何基于 OAM 和 Kubernetes 打造无限能力的下一代 DevOps 平台。什么是 DevOps？为什么基于 Kub