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

简介: 淘东电商项目(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认证服务的登录界面改造。

目录
相关文章
|
Java Maven
淘东电商项目(32) -SSO单点登录(集成SSO认证服务)
淘东电商项目(32) -SSO单点登录(集成SSO认证服务)
207 0
《阿里云产品手册2022-2023 版》——号码认证服务
《阿里云产品手册2022-2023 版》——号码认证服务
218 0
|
移动开发 API 开发工具
秒懂云通信:如何使用阿里云号码认证服务(小白指南)
手把手教你如何使用阿里云号码认证服务,超详细控制台步骤解析,快速上手!
3500 0
秒懂云通信:如何使用阿里云号码认证服务(小白指南)
|
安全 数据安全/隐私保护 开发者
阿里云通信发布全新号码认证服务, 重新定义手机号码认证的方式
12月12日,阿里云通信宣布号码认证服务正式商用,将重新定义手机号码认证的方式。因移动应用实名制的政策要求,手机号码认证在移动APP的注册、登录等场景用的越来越多。而对于开发者来说,能完成手机号码认证的选择并不多,一般是借助短信、语音的基础通信通道,自己实现短信验证码或语音验证码来实现。
25239 0
|
前端开发 JavaScript
Jupyter Notebook自动补全代码配置
Jupyter Notebook自动补全代码配置
2403 0
Jupyter Notebook自动补全代码配置
|
8月前
|
人工智能 JSON API
0代码将存量 API 适配 MCP 协议
本文主要讲述通过 Nacos+Higress 的方案实现0代码改造将 Agent 连接到存量应用,能够显著降低存量应用的改造成本。
1098 44
0代码将存量 API 适配 MCP 协议
|
7月前
|
存储 机器学习/深度学习 缓存
vLLM 核心技术 PagedAttention 原理详解
本文系统梳理了 vLLM 核心技术 PagedAttention 的设计理念与实现机制。文章从 KV Cache 在推理中的关键作用与内存管理挑战切入,介绍了 vLLM 在请求调度、分布式执行及 GPU kernel 优化等方面的核心改进。PagedAttention 通过分页机制与动态映射,有效提升了显存利用率,使 vLLM 在保持低延迟的同时显著提升了吞吐能力。
3692 19
vLLM 核心技术 PagedAttention 原理详解
|
监控 数据库 虚拟化
虚拟化识别USB加密狗|银行U盾等解决方案
USB SEVER产品不再单纯依赖本地主机,这打破了传统的远程监控困难的桎梏。客户只需使用互联网便可以隨時隨地访问并监控设备,操作方便。使远程设备与主机进行通信,而无需更改现有的应用软件。通过一个IP地址从远程服务器或PC外围设备可以集中管理和监控。