From bc0e7b2989c82edef2f7410fadaabd2026ab4fa8 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Fri, 18 Feb 2022 14:50:56 +0800 Subject: [PATCH] add 天水综合平台入口 三级等保 登录添加验证码以及校验功能 退出功能bug修复 --- css/login.css | 29 ++++++++++++++++++++++++++++- img/yzm.png | Bin 0 -> 392 bytes js/config.js | 5 ++++- js/index.js | 37 +++++++++++++++++++++++++++++++++++-- js/login.js | 274 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------- js/unit.js | 10 +++++----- login.html | 18 +++++------------- 7 files changed, 193 insertions(+), 180 deletions(-) create mode 100644 img/yzm.png diff --git a/css/login.css b/css/login.css index ce47d54..5edba59 100755 --- a/css/login.css +++ b/css/login.css @@ -69,6 +69,14 @@ html,body{ height: 40px; background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center; } +.login-yzm-bg{ + float: left; + display: inline-block; + vertical-align: middle; + width: 40px; + height: 40px; + background:rgba(170,171,171,.8) url("../img/yzm.png") no-repeat center center; +} .form-control{ border-radius: 0; } @@ -319,7 +327,7 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; line-height: 40px; font-size: 14px; - background-color: rgba(255,255,255,.75); + /*background-color: rgba(255,255,255,.75);*/ border: none; } @@ -386,3 +394,22 @@ img { border:none; } #supersized img { max-width: none !important } + +/* 验证码 */ +.login_input_txtSmall{ + float: left; + width: 150px !important; +} + +#code { + margin-left: 10px; + float: left; + width: 90px; + height: 40px; + font-weight: bold; + border: 0; + letter-spacing: 2px; + color: #D71D20; + font-size: 24px; + /*background: #f7f7f7;*/ +} \ No newline at end of file diff --git a/img/yzm.png b/img/yzm.png new file mode 100644 index 0000000..9e61b97 Binary files /dev/null and b/img/yzm.png differ diff --git a/js/config.js b/js/config.js index 66131ea..403ace1 100644 --- a/js/config.js +++ b/js/config.js @@ -9,8 +9,11 @@ //阿里云测试环境，别删 // baseUrl = 'http://39.98.54.240:8088/';// url公用地址 +//黄石环境测试，别删 +baseUrl = 'https://test.renniting.cn/sys/';// url公用地址 + //黄石环境，别删 -baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址 +// baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址 diff --git a/js/index.js b/js/index.js index b150f25..678d820 100644 --- a/js/index.js +++ b/js/index.js @@ -4,7 +4,24 @@ // fn.getUserName(); console.log(fn.getUserName()); if(fn.getUserName()==''|| fn.getUserName()==undefined||fn.getUserName()==null){ - fn.loginOut(); + var token = fn.getToken(); + console.log(token) + var req = {'token': token} + var opt = { + method: 'post', + url: dataUrl.util.getLoginOut(), + data: JSON.stringify(req), + contentType: 'application/json; charset=utf-8', + dataType: 'json', + success: function (res) { + console.log(res) + if (res.code == '8888') { + fn.toLoginPage(); + } + } + }; + sysAjax(opt); + $('#topbar_userMsg').hide(); $('#topbar_tologin').show(); }else if(fn.getUserName()=='燕松梅赤峰测试'){ @@ -115,7 +132,23 @@ var fun={ loginOut:function () { $('#login_out_btn').on('click', function () { // console.log("token:" + fn.getToken()); - fn.loginOut(); + var token = fn.getToken(); + console.log(token) + var req = {'token': token} + var opt = { + method: 'post', + url: dataUrl.util.getLoginOut(), + data: JSON.stringify(req), + contentType: 'application/json; charset=utf-8', + dataType: 'json', + success: function (res) { + console.log(res) + if (res.code == '8888') { + fn.toLoginPage(); + } + } + }; + sysAjax(opt); }); } diff --git a/js/login.js b/js/login.js index 6195c7a..4f12b2f 100755 --- a/js/login.js +++ b/js/login.js @@ -258,80 +258,20 @@ } })(this) -function slide() { - var slideBox = $('#slide_box')[0]; - var slideXbox = $('#slide_xbox')[0]; - var btn = $('#btn')[0]; - var slideBoxWidth = slideBox.offsetWidth; - var btnWidth = btn.offsetWidth; - //pc绔� - btn.ondragstart = function () { - return false; - }; - btn.onselectstart = function () { - return false; - }; - btn.onmousedown = function (e) { - var disX = e.clientX - btn.offsetLeft; - document.onmousemove = function (e) { - var objX = e.clientX - disX + btnWidth; - if (objX < btnWidth) { - objX = btnWidth - } - if (objX > slideBoxWidth) { - objX = slideBoxWidth - } - $('#slide_xbox').width(objX + 'px'); - }; - document.onmouseup = function (e) { - var objX = e.clientX - disX + btnWidth; - if (objX < slideBoxWidth) { - objX = btnWidth; - } else { - objX = slideBoxWidth; - locked = true; - $('#slide_xbox').html('验证通过
'); - } - $('#slide_xbox').width(objX + 'px'); - document.onmousemove = null; - document.onmouseup = null; - }; - }; - //绉诲姩绔� - var cont = $("#btn"); - var startX = 0, sX = 0, moveX = 0,leftX = 0; - cont.on({//缁戝畾浜嬩欢 - touchstart: function (e) { - startX = e.originalEvent.targetTouches[0].pageX;//鑾峰彇鐐瑰嚮鐐圭殑X鍧愭爣 - sX = $(this).offset().left;//鐩稿浜庡綋鍓嶇獥鍙杞寸殑鍋忕Щ閲� - leftX = startX - sX;//榧犳爣鎵€鑳界Щ鍔ㄧ殑鏈€宸︾鏄綋鍓嶉紶鏍囪窛div宸﹁竟璺濈殑浣嶇疆 - }, - touchmove: function (e) { - e.preventDefault(); - moveX = e.originalEvent.targetTouches[0].pageX;//绉诲姩杩囩▼涓璛杞寸殑鍧愭爣 - var objX = moveX - leftX + btnWidth; - if (objX < btnWidth) { - objX = btnWidth - } - if (objX > slideBoxWidth) { - objX = slideBoxWidth - } - $('#slide_xbox').width(objX + 'px'); - }, - touchend: function (e) { - var objX = moveX - leftX + btnWidth; - if (objX < slideBoxWidth) { - objX = btnWidth; - } else { - objX = slideBoxWidth; - locked = true; - $('#slide_xbox').html('验证通过
'); - } - $('#slide_xbox').width(objX + 'px'); - } - }); -} -slide(); +var fun={ + init:function () { + $('#login_code_ifo').text(''); + //获取验证码 + createCode(); + } +}; +fun.init(); +$(document).on('click','#code',function () { + //获取验证码 + createCode(); +}) + + /** * 输入框内容检测插件 */ @@ -421,65 +361,101 @@ function password(obj){ $('#password').on("blur", function() { //验证邮箱地址 password($(this)); }); -//验证码验证 -//function verification(obj) { -// var _this = obj; -// if(_this.val() !== '1234'){ -// _this.prev().addClass('glyphicon glyphicon-remove'); -// return false; -// }else{ -// _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok'); -// } -//} -//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址 -// verification($(this)); -//}); -//点击登陆 + +//点击登录 $('#login-btn').on('click',function () { var obj1 = $('#userName'); var obj2 = $('#password'); username(obj1); password(obj2); - //verification($('#login_imgCode_value')); + + // 验证码 + var imgCode=document.getElementById("code").value; + var imgCodeId=$('#code').attr('data-id'); + var inputCode = document.getElementById("codedate").value.toUpperCase(); //取得输入的验证码并转化为大 + //校验 验证码是否匹配正确 + if(inputCode.length <= 0) { //若输入的验证码长度为0 + //alert("请输入验证码！"); //则弹出请输入验证码 + $('#login_error_ifo').text("请输入验证码！"); + return; + } + if(inputCode != imgCode ) { //若输入的验证码与产生的验证码不一致时 + //alert("验证码输入错误!"); //则弹出验证码输入错误 + $('#login_error_ifo').text("验证码输入错误!"); + createCode();//刷新验证码 + document.getElementById("codedate").value = "";//清空文本框 + return; + } + + $('#login_error_ifo').text(''); + if(flagAjax){ - var verificationText = $('#slide_xbox').text(); - - if(verificationText != '验证通过'){ - $('#login_error_ifo').text("请拖动滑块验证"); - }else{ - - var Username= $('#userName').val(); - var Password= $('#password').val(); - // var imageCode = $imageCodeValue.val(); - // alert("username is "+username+"password is"+password+"code is "+imageCode); - - - var opts = {}; - opts.method = "POST"; - opts.url = dataUrl.util.getLogin(); - opts.success = loginSuccess; - - var data = { - 'terminalSource':6, - }; - data.clientType = sysComm.clientType; - data.sysCode = sysComm.sysCode; - data.grantType = sysComm.grantType; - data.username = Username; - // data.password = Password; - data.password = md5(Password); - //data.imgCode = imageCode; - - data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂 - opts.data = JSON.stringify(data); - sysAjax(opts); - } + + var Username= $('#userName').val(); + var Password= $('#password').val(); + // var imageCode = $imageCodeValue.val(); + // alert("username is "+username+"password is"+password+"code is "+imageCode); + + var opts = {}; + opts.method = "POST"; + opts.url = dataUrl.util.getLogin(); + opts.success = loginSuccess; + + var data = {}; + data.clientType = sysComm.clientType; + data.sysCode = sysComm.sysCode; + data.grantType = sysComm.grantType; + data.username = Username; + data.password = md5(Password); + data.imgCodeId = imgCodeId; + data.imgCode = imgCode; + data.expiresIn = 60 * 60 * 12;//默认12小时 + opts.data = JSON.stringify(data); + sysAjax(opts); } - // window.location.href='index.html'; }); + +/** + * 验证码获取 请求接口 + * Get getloginimgcode + * @param + */ + +var syscode; //在全局定义验证码 +function createCode() { + // 发出Ajax请求 + $.ajax({ + type: "GET", + url: dataUrl.util.imageCodeStr(), + data: null, + dataType: null, + processData: true, + traditional: true, + success: function (res) { + + if (res.code === '8888') { + var data = res.data; + var imgCodeId=data.authTokenid; + var imgCode=data.imageCodeStr; + syscode=imgCode; + + $('#code').val(imgCode); + $('#code').attr('data-id',imgCodeId); + + } else { + console.log(res.msg); + } + + }, + error: function (err) { + console.log(err); + } + }) +}; + //回车事件 $('#login_imgCode_value').keyup(function(event){ if(event.keyCode ==13){ @@ -500,29 +476,8 @@ $('.verification-logo').on('click',function () { $("#login_imgCode_value").val(""); $('.verification-logo').removeClass('glyphicon glyphicon-remove'); }); -getImgCode(); -//点击换验证码 -$('#login_imgCode').on('click', function () { - getImgCode(); -}); -function getImgCode() { - var opt = { - method: "get", - url: dataUrl.util.getLoginImageCode(), - success: imgCodeSuccess - } - sysAjax(opt); -} -function imgCodeSuccess(res) { - if (res.code === '8888') { - var imageCodeStr = res.data.imageCodeStr; - var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr; - fn.setToken(res.data.authTokenid); - $imageCode.attr('src', base64ImgStr); - } -} //登录成功的函数 function loginSuccess(res) { if (res.code === '8888') { @@ -541,33 +496,36 @@ function loginSuccess(res) { //alert("success"); fn.setUserAccount(res.data.userName); window.location.href = "index.html"; - } else if (res.code == "2000" || res.code === '1004') { + } else if (res.code == "1012") { + + $('#login_error_ifo').text("验证码不匹配"); + createCode();//刷新验证码 + + }else if (res.code == "2000") { //账号密码不匹配 - $('#login_error_ifo').text("账号密码不匹配"); - //$error.text("账号或密码错误!"); - getImgCode(); + $('#login_error_ifo').text(res.errMsg); + createCode();//刷新验证码 + } else if (res.code == "2001") { //账号无有效角色，非有效用户 $('#login_error_ifo').text("账号无效"); - //$error.text("账号无有效角色，非有效用户!"); - getImgCode(); + createCode();//刷新验证码 + } else if (res.code == "2002") { - //验证码错误 - // $('.verification-logo').addClass('glyphicon glyphicon-remove'); + $('#login_error_ifo').text("验证码错误"); - //return false; - // $imageCodeValue.focus(); - getImgCode(); + createCode();//刷新验证码 + } else if(res.code == "2010"){ $('#login_error_ifo').text("用户没有关联停车场"); - getImgCode(); + createCode();//刷新验证码 + } else { console.log(res.code); - $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok'); - $('#login_error_ifo').text("系统错误"); + $('#login_error_ifo').text(res.errMsg); // $error.text(res.msg); - getImgCode(); + createCode(); } } diff --git a/js/unit.js b/js/unit.js index ca1afa6..76670da 100755 --- a/js/unit.js +++ b/js/unit.js @@ -29,8 +29,8 @@ dataUrl.util = { return baseUrl + 'sysLoginLog/queryLoginLog'; }, //获取验证码 - getLoginImageCode: function () { - return baseUrl + 'oauth/imageCode?' + Math.random() + imageCodeStr: function () { + return baseUrl + 'oauth/imageCodeStr' }, //登录 getLogin: function () { @@ -85,12 +85,12 @@ fn = { }, //跳转到登录界面 toLoginPage: function () { - sessionStorage.setItem("sys_parkLot", ''); + sessionStorage.clear() window.location.href = 'login.html' }, //登出系统 loginOut: function () { - sessionStorage.clear() + /* sessionStorage.clear() var token = fn.getToken(); fn.setToken(''); if (StrUtil.isNotEmpty()) { @@ -99,7 +99,7 @@ fn = { } $('#userId').text(''); - fn.toLoginPage(); + fn.toLoginPage();*/ } } diff --git a/login.html b/login.html index f244655..345b3c2 100755 --- a/login.html +++ b/login.html @@ -34,14 +34,7 @@
- - - - - - - - +
-
-
-
- 拖动滑块验证 + + +
-- libgit2 0.21.4