登录加密和登录验证码

css/login.css

@@ -50,6 +50,16 @@
     padding: 38px 40px;
 }
 
+.login .captcha{
+  width: 50%;
+}
+
+.login .verificationCodeImg {
+  width: 50%;
+  margin-top: 18px;
+  height: 56px;
+}
+
 .login .title {
     color: #68686b;
     font-size: 24px;

js/login.js

@@ -7,6 +7,23 @@ $(function () {
   var hasClick = false; //是否已经点击过登录按钮
   // 兼容ie的placeholder
   $('input, textarea').placeholder();
+  // 获取验证码
+  function getVerificationCodeImg(){
+    $('#verificationCodeImg').attr('src', baseUrl + "auth/getCaptcha?" + Date.now());
+  }
+  getVerificationCodeImg();
+  // 点击刷新验证码
+  $("#verificationCodeImg").on('click', getVerificationCodeImg);
+  //aes加密
+  function encryptByEnAESLogin(data) {
+    data = CryptoJS.enc.Utf8.parse(data);
+    let Key = CryptoJS.enc.Utf8.parse('Aes2Util666AQWER');
+    let tmpAES = CryptoJS.AES.encrypt(data, Key, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return tmpAES.toString();
+  }
   // 登录点击
   $('#login').on('click', login);
   // 登录方法
@@ -15,9 +32,11 @@ $(function () {
     hasClick = true;
     var name = $('#name').val()
     var pwd = $('#pwd').val()
+    var captcha = $('#captcha').val()
     var data = {
       username: name,
-      password: pwd
+      password: pwd,
+      captcha: captcha
     }
     // 单点登录 start
     var ssoStr = '';
@@ -26,8 +45,23 @@ $(function () {
       ssoStr = location.search.replace('?', '').split('&')[0].split('=')[1];
       ssoStr = Base64.decode(decodeURIComponent(ssoStr));
       ssoJson = JSON.parse(ssoStr);
+    }else if(!name || !name.trim()){
+      alert("请输入用户名");
+      hasClick = false;
+      return;
+    }else if(!pwd || !pwd.trim()){
+      alert("请输入密码");
+      hasClick = false;
+      return;
+    }else if(!captcha || !captcha.trim()){
+      alert("请输入验证码");
+      hasClick = false;
+      return;
     }
     var postData = isSSo ? { username: ssoJson.a, password: ssoJson.r, t: false } : data;
+    postData = {
+        k: encryptByEnAESLogin(JSON.stringify(postData))
+    };
     // 单点登录 end
     $.ajax({
       type: "POST",
@@ -84,6 +118,10 @@ $(function () {
               console.log(e.responseText);
             }
           });
+        } else if(res.state == 403){
+          alert('验证码错误');
+          hasClick = false;
+          getVerificationCodeImg();
         } else {
           alert('用户名或密码错误，请重试！');
           hasClick = false;

login.html

@@ -12,6 +12,7 @@
     <script src="./libs/jquery-1.9.1.min.js"></script>
     <script src="./libs/jquery.placeholder.js"></script>
     <script src="./libs/base64.min.js"></script>
+    <script src="./libs/crypto-js.min.js"></script>
     <!--[if lt IE 10]>
         <script src="./libs/html5shiv.js"></script>
     <![endif]-->
@@ -28,6 +29,10 @@
                 <div class="title">用户登录</div>
                 <input id="name" type="text" placeholder="请输入用户名">
                 <input id="pwd" type="password" placeholder="请输入密码">
+                <div class="clearfix">
+                  <input class="captcha fl" id="captcha" type="text" placeholder="请输入验证码">
+                  <img class="verificationCodeImg fl" id="verificationCodeImg">
+                </div>
                 <button id="login">登录</button>
                 <p>推荐使用Google浏览器，其他浏览器可能出现兼容性问题</p>
                 <!-- <p class="login_reset" style="color: #005395;">账号为您的学工号，初始密码为您的学工号后4位</p> -->