添加验证码

.beagle.yml

@@ -50,7 +50,7 @@ pipeline:
     base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0
     dockerfile: .beagle/dockerfile
     repo: wod/apaas-login
-    version: v3.0.1
+    version: v3.0.2
     channel: alpha
     args: "TARGETOS=linux,TARGETARCH=amd64" ## 不同架构的构建参数
     registry: registry.cn-qingdao.aliyuncs.com
@@ -117,7 +117,7 @@ pipeline:
     base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-arm64
     dockerfile: .beagle/dockerfile
     repo: wod/apaas-login
-    version: v3.0.1
+    version: v3.0.2
     channel: alpha-arm64
     args: "TARGETOS=linux,TARGETARCH=arm64"
     registry: registry.cn-qingdao.aliyuncs.com
@@ -173,7 +173,7 @@ pipeline:
     base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-ppc64le
     dockerfile: .beagle/dockerfile
     repo: wod/apaas-login
-    version: v3.0.1
+    version: v3.0.2
     channel: alpha-ppc64le
     args: "TARGETOS=linux,TARGETARCH=ppc64le"
     registry: registry.cn-qingdao.aliyuncs.com
@@ -227,7 +227,7 @@ pipeline:
     base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-mips64le
     dockerfile: .beagle/dockerfile
     repo: wod/apaas-login
-    version: v3.0.1
+    version: v3.0.2
     channel: alpha-mips64le
     args: "TARGETOS=linux,TARGETARCH=mips64le"
     registry: registry.cn-qingdao.aliyuncs.com

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^5.45.0",
+    "crypto-js": "^4.0.0",
     "element-ui": "^2.11.1",
     "material-design-icons-iconfont": "^4.0.5",
     "qs": "^6.9.4",

src/pages/login.vue

@@ -2,34 +2,66 @@
   <div class="login_backg">
     <div class="login_all">
       <div class="headercontainer">
-        <div class="center-logo" style="width:100%;">
+        <div class="center-logo" style="width: 100%">
           <img class="logo" src="@/assets/image/img_logo.png" alt />
         </div>
       </div>
       <el-card v-show="active == 'login'" class="box-card login">
         <div slot="header" class="clearfix"></div>
-        <el-form :model="form" ref="form1" @submit.native.prevent class="login_forms">
+        <el-form
+          :model="form"
+          ref="form1"
+          @submit.native.prevent
+          class="login_forms"
+        >
           <el-form-item>
             <p class="item_p">账号</p>
-            <el-input v-model.trim="form.userid" autofocus="autofocus" placeholder="请输入账号"></el-input>
+            <el-input
+              v-model.trim="form.userid"
+              autofocus="autofocus"
+              placeholder="请输入账号"
+            ></el-input>
           </el-form-item>
           <el-form-item>
             <p class="item_p">密码</p>
             <el-input
-              :type="visible ? 'password':'text'"
+              type="password"
               v-model.trim="form.password"
               placeholder="请输入密码"
             >
-              <span
+              <!-- <span
                 slot="suffix"
-                :title="visible ? '显示密码':'隐藏密码'"
+                :title="visible ? '显示密码' : '隐藏密码'"
                 @click="changePass()"
-                style="cursor:pointer;"
-                :class="visible ? 'eye_dis':'eye'"
-              ></span>
+                style="cursor: pointer"
+                :class="visible ? 'eye_dis' : 'eye'"
+              ></span> -->
             </el-input>
           </el-form-item>
         </el-form>
+        <el-form
+          :model="yzms"
+          :rules="yzmRules"
+          ref="yzms"
+          class="demo-ruleForm"
+        >
+          <el-form-item
+            prop="yzm"
+            class="yzm"
+            :class="ruleFormIcon.yzm ? '' : 'icon_show'"
+          >
+            <el-input
+              v-model.trim="yzms.yzm"
+              placeholder="请输入验证码"
+            ></el-input>
+            <img
+              class="yzm_img"
+              title="看不清？换一张"
+              :src="imgSrc"
+              @click="getImg()"
+            />
+          </el-form-item>
+        </el-form>
         <el-form>
           <el-form-item class="rembme">
             <el-checkbox v-model="checked">记住密码</el-checkbox>
@@ -39,7 +71,8 @@
               class="btn_sub sub1"
               type="primary"
               @click.prevent="login_remember_info()"
-            >登 录</el-button>
+              >登 录</el-button
+            >
           </el-form-item>
           <el-form-item>
             <el-button class="btn_sub sub2" @click.prevent="register">
@@ -58,8 +91,16 @@
           </el-steps>
         </div>
         <div v-show="registerActive == 0">
-          <el-form :model="ruleForm_0" :rules="rules_0" ref="ruleForm_0" class="demo-ruleForm">
-            <el-form-item prop="userid1" :class="ruleFormIcon.userid1?'':'icon_show'">
+          <el-form
+            :model="ruleForm_0"
+            :rules="rules_0"
+            ref="ruleForm_0"
+            class="demo-ruleForm"
+          >
+            <el-form-item
+              prop="userid1"
+              :class="ruleFormIcon.userid1 ? '' : 'icon_show'"
+            >
               <p class="item_p">账号</p>
               <el-input
                 v-model.trim="ruleForm_0.userid1"
@@ -67,61 +108,91 @@
                 placeholder="为字母、数字、下划线或其组合"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="password1" :class="ruleFormIcon.password1?'':'icon_show'">
+            <el-form-item
+              prop="password1"
+              :class="ruleFormIcon.password1 ? '' : 'icon_show'"
+            >
               <p class="item_p">登录密码</p>
               <el-input
                 v-model.trim="ruleForm_0.password1"
                 autocomplete="new-password"
-                :type="pwdCheck?'text':'password'"
+                type="password"
                 placeholder="密码为大小写字母及数字组合，不少于6位"
               >
-                <span
+                <!-- <span
                   slot="suffix"
-                  :title="pwdCheck?'隐藏密码':'显示密码'"
-                  :class="pwdCheck?'eye':'eye_dis'"
-                  @click="pwdCheck=!pwdCheck"
-                ></span>
+                  :title="pwdCheck ? '隐藏密码' : '显示密码'"
+                  :class="pwdCheck ? 'eye' : 'eye_dis'"
+                  @click="pwdCheck = !pwdCheck"
+                ></span> -->
               </el-input>
             </el-form-item>
-            <el-form-item prop="truePassword" :class="ruleFormIcon.truePassword?'':'icon_show'">
+            <el-form-item
+              prop="truePassword"
+              :class="ruleFormIcon.truePassword ? '' : 'icon_show'"
+            >
               <p class="item_p">确认密码</p>
               <el-input
                 autocomplete="new-password"
                 v-model.trim="ruleForm_0.truePassword"
-                :type="truePwdCheck?'text':'password'"
+                type="password"
                 placeholder="请确认密码"
               >
-                <span
+                <!-- <span
                   slot="suffix"
-                  :title="truePwdCheck?'隐藏密码':'显示密码'"
-                  :class="truePwdCheck?'eye':'eye_dis'"
-                  @click="truePwdCheck=!truePwdCheck"
-                ></span>
+                  :title="truePwdCheck ? '隐藏密码' : '显示密码'"
+                  :class="truePwdCheck ? 'eye' : 'eye_dis'"
+                  @click="truePwdCheck = !truePwdCheck"
+                ></span> -->
               </el-input>
             </el-form-item>
-            <el-form-item prop="cname" :class="ruleFormIcon.cname?'':'icon_show'">
+            <el-form-item
+              prop="cname"
+              :class="ruleFormIcon.cname ? '' : 'icon_show'"
+            >
               <p class="item_p">昵称</p>
-              <el-input v-model.trim="ruleForm_0.cname" placeholder="给自己取个昵称吧"></el-input>
+              <el-input
+                v-model.trim="ruleForm_0.cname"
+                placeholder="给自己取个昵称吧"
+              ></el-input>
             </el-form-item>
           </el-form>
         </div>
         <div v-show="registerActive == 1">
-          <el-form :model="ruleForm_1" :rules="rules_1" ref="ruleForm_1" class="demo-ruleForm">
+          <el-form
+            :model="ruleForm_1"
+            :rules="rules_1"
+            ref="ruleForm_1"
+            class="demo-ruleForm"
+          >
             <el-form-item
               prop="businessSystemName"
-              :class="ruleFormIcon.businessSystemName?'':'icon_show'"
+              :class="ruleFormIcon.businessSystemName ? '' : 'icon_show'"
             >
               <p class="item_p">业务系统名</p>
-              <el-input v-model.trim="ruleForm_1.businessSystemName" placeholder="例：机关事务大数据平台"></el-input>
+              <el-input
+                v-model.trim="ruleForm_1.businessSystemName"
+                placeholder="例：机关事务大数据平台"
+              ></el-input>
             </el-form-item>
-            <el-form-item prop="domainName" :class="ruleFormIcon.domainName?'':'icon_show'">
+            <el-form-item
+              prop="domainName"
+              :class="ruleFormIcon.domainName ? '' : 'icon_show'"
+            >
               <p class="item_p">域名</p>
-              <el-input v-model.trim="ruleForm_1.domainName" placeholder="填写业务系统的域名"></el-input>
+              <el-input
+                v-model.trim="ruleForm_1.domainName"
+                placeholder="填写业务系统的域名"
+              ></el-input>
             </el-form-item>
             <el-form-item>
               <p class="item_p">IP（白名单）</p>
               <div class="ip_block">
-                <div v-for="(item, index) in ruleForm_1.ip_white" :key="index" class="ip_item">
+                <div
+                  v-for="(item, index) in ruleForm_1.ip_white"
+                  :key="index"
+                  class="ip_item"
+                >
                   {{ item }}
                   <i class="el-icon-close ip_del" @click="delIp(index)"></i>
                 </div>
@@ -131,10 +202,18 @@
                   v-model="newIpWhite"
                   @keyup.enter.native="watchKeyboardWhite"
                 ></el-input>
-                <el-button class="add_ip" @click="addIp('white')" icon="el-icon-plus">增加</el-button>
+                <el-button
+                  class="add_ip"
+                  @click="addIp('white')"
+                  icon="el-icon-plus"
+                  >增加</el-button
+                >
               </div>
             </el-form-item>
-            <el-form-item prop="organization" :class="ruleFormIcon.organization?'':'icon_show'">
+            <el-form-item
+              prop="organization"
+              :class="ruleFormIcon.organization ? '' : 'icon_show'"
+            >
               <p class="item_p">用户组织机构</p>
               <el-select v-model="ruleForm_1.organization" placeholder="请选择">
                 <el-option
@@ -148,10 +227,21 @@
           </el-form>
         </div>
         <div v-if="registerActive == 1">
-          <el-form :model="yzms" :rules="yzmRules" ref="yzms" class="demo-ruleForm">
-            <el-form-item prop="yzm" :class="ruleFormIcon.yzm?'yzm':'yzm icon_show'">
+          <el-form
+            :model="yzms"
+            :rules="yzmRules"
+            ref="yzms"
+            class="demo-ruleForm"
+          >
+            <el-form-item
+              prop="yzm"
+              :class="ruleFormIcon.yzm ? 'yzm' : 'yzm icon_show'"
+            >
               <p class="item_p">验证码</p>
-              <el-input v-model.trim="yzms.yzm" placeholder="请输入验证码"></el-input>
+              <el-input
+                v-model.trim="yzms.yzm"
+                placeholder="请输入验证码"
+              ></el-input>
               <s-identify
                 class="yzm_img"
                 :identifyCode="identifyCode"
@@ -167,11 +257,22 @@
               class="btn_sub sub1"
               type="primary"
               @click.prevent="submitForm()"
-            >完成注册</el-button>
-            <el-button v-else class="btn_sub sub1" type="primary" @click.prevent="nextStep()">下一步</el-button>
+              >完成注册</el-button
+            >
+            <el-button
+              v-else
+              class="btn_sub sub1"
+              type="primary"
+              @click.prevent="nextStep()"
+              >下一步</el-button
+            >
           </el-form-item>
           <el-form-item>
-            <el-button v-if="registerActive == 0" class="btn_sub sub2" @click.prevent="login">
+            <el-button
+              v-if="registerActive == 0"
+              class="btn_sub sub2"
+              @click.prevent="login"
+            >
               <i class="el-icon-arrow-left"></i>&nbsp;&nbsp;登录已有账号
             </el-button>
             <el-button v-else class="btn_sub sub2" @click.prevent="previous">
@@ -181,8 +282,10 @@
         </el-form>
       </el-card>
       <div v-if="active == 'login'" class="footer_message">
-        登录即代表您已同意 
-        <span class="footer_message_bg">《BD-aPaaS平台用户协议与隐私政策》</span>
+        登录即代表您已同意
+        <span class="footer_message_bg"
+          >《BD-aPaaS平台用户协议与隐私政策》</span
+        >
       </div>
     </div>
   </div>
@@ -190,6 +293,7 @@
 <script>
 import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
 import SIdentify from "@/components/sidentify";
+import CryptoJS from "crypto-js"; //加密js
 export default {
   components: { SIdentify },
   data() {
@@ -306,15 +410,21 @@ export default {
         this.yzmState = false;
         callback(new Error("请输入验证码"));
       } else {
-        if (value !== this.identifyCode) {
-          this.ruleFormIcon.yzm = false;
-          this.refreshCode();
-          callback(new Error("验证码错误"));
-        } else {
-          this.ruleFormIcon.yzm = true;
-          this.yzmState = true;
-          callback();
-        }
+        // let url = `/iam/api/verifyCaptcha?id=${this.imgId}&value=${value}`;
+        this.$api.general
+          .validateRandomCode(this.imgId, value)
+          .then((response) => {
+            if (response.data.success == 1) {
+              this.ruleFormIcon.yzm = true;
+              this.yzmState = true;
+              callback();
+            } else {
+              this.ruleFormIcon.yzm = false;
+              this.yzmState = false;
+              callback(new Error(response.data.errMsg));
+            }
+          })
+          .catch(function (response) {});
       }
     };
     return {
@@ -342,7 +452,7 @@ export default {
       yzms: {
         yzm: "",
       },
-
+      imgSrc: "",
       yzmRules: {
         yzm: [{ validator: validateYzm, trigger: "blur" }],
       },
@@ -392,6 +502,7 @@ export default {
     } else {
       this.checked = false;
     }
+    this.getImg();
   },
   methods: {
     init() {
@@ -404,6 +515,7 @@ export default {
     // ?ReturnUrl=/shop/video_service_list/7
     login_request() {
       let self = this;
+
       if (self.form.userid == "") {
         self.$message({
           message: "请填写用户名",
@@ -415,41 +527,63 @@ export default {
           type: "error",
         });
       } else {
-        let query = self.form;
-        self.$api.general.login(query).then((response) => {
-          if (response.data.success == 1) {
-            let redirect = self.$route.query.ReturnUrl;
-            if (redirect && redirect != "") {
-              // redirect = decodeURIComponent(redirect)
-              window.location.href = redirect;
-            } else {
-              self.$api.general.getNowUser().then((response) => {
-                if (response.data.success == 1) {
-                  if (
-                    response.data.data.is_admin == 1 ||
-                    response.data.data.is_admin == 2
-                  ) {
-                    window.location.href = "/apaas/ui/#/workplace";
-                  } else {
-                    window.location.href = "/apaas/ui/#/services_shop";
-                  }
-                } else {
-                  self.$message({
-                    message: response.data.errMsg,
-                    type: "error",
-                  });
-                }
-              });
-            }
-          } else if (response.data.success == 0) {
+        self.$refs["yzms"].validate((volid_yzm) => {
+          if (volid_yzm) {
+            self.submitLoginForm();
+          } else {
             self.$message({
-              message: response.data.errMsg,
+              message: "请完善验证码",
               type: "error",
             });
+            self.refreshCode();
           }
         });
       }
     },
+    // 提交登录表单
+    submitLoginForm() {
+      let self = this;
+      var psw = CryptoJS.AES.encrypt(
+        this.form.password,
+        "swuE9cmCZQwrkYRV"
+      ).toString();
+      let query = {
+        userid: this.form.userid,
+        password: psw,
+      };
+      self.$api.general.login(query).then((response) => {
+        if (response.data.success == 1) {
+          let redirect = self.$route.query.ReturnUrl;
+          if (redirect && redirect != "") {
+            // redirect = decodeURIComponent(redirect)
+            window.location.href = redirect;
+          } else {
+            self.$api.general.getNowUser().then((response) => {
+              if (response.data.success == 1) {
+                if (
+                  response.data.data.is_admin == 1 ||
+                  response.data.data.is_admin == 2
+                ) {
+                  window.location.href = "/apaas/ui/#/workplace";
+                } else {
+                  window.location.href = "/apaas/ui/#/services_shop";
+                }
+              } else {
+                self.$message({
+                  message: response.data.errMsg,
+                  type: "error",
+                });
+              }
+            });
+          }
+        } else if (response.data.success == 0) {
+          self.$message({
+            message: response.data.errMsg,
+            type: "error",
+          });
+        }
+      });
+    },
     login_remember_info() {
       if (this.checked) {
         setCookie(
@@ -461,6 +595,26 @@ export default {
       }
       this.login_request();
     },
+    // 获取验证码
+    getImg() {
+      this.$api.general
+        .getrandomCode()
+        .then((response) => {
+          if (response.data.success == 1) {
+            // console.log(response.data.data.captcha);
+            this.imgId = response.data.data.id;
+            this.imgSrc = response.data.data.captcha;
+            // this.$router.push({
+            //   path: "/login",
+            //   query: {
+            //     username: this.ruleForm.username,
+            //     password: this.ruleForm.password
+            //   }
+            // });
+          }
+        })
+        .catch(function (response) {});
+    },
     changePass() {
       this.visible = !this.visible;
     },
@@ -481,9 +635,8 @@ export default {
     },
     makeCode(o, l) {
       for (let i = 0; i < l; i++) {
-        this.identifyCode += this.identifyCodes[
-          this.randomNum(0, this.identifyCodes.length)
-        ];
+        this.identifyCode +=
+          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
       }
     },
     getOrganizations() {
@@ -752,10 +905,8 @@ export default {
 }
 .yzm .yzm_img {
   position: absolute;
-  top: 26px;
-  right: 12%;
-  width: 150px;
-  height: 40px;
+  width: 30%;
+  margin-left: 5%;
   cursor: pointer;
 }
 .footer_message {
@@ -825,6 +976,19 @@ export default {
 }
 </style>
 <style>
+.login .yzm .el-input {
+  width: 40%;
+  margin-left: 10%;
+}
+.yzm {
+  position: relative;
+}
+.yzm .yzm_img {
+  position: absolute;
+  width: 30%;
+  margin-left: 5%;
+  cursor: pointer;
+}
 .login .el-input__suffix {
   font-size: 20px;
   right: 10px;

src/request/api/general.js

@@ -19,6 +19,15 @@ const general = {
     getNowUser() {
         return axios.get(`/iam/api/getCurUser`);
     },
+
+    // 获取验证码
+    getrandomCode() {
+        return axios.get(`/iam/api/getCaptcha`);
+    },
+    // 校验验证码
+    validateRandomCode(id, value) {
+        return axios.get(`/iam/api/verifyCaptcha?id=${id}&value=${value}`);
+    }
 }
 
 export default general;

src/utils/common.js

+import CryptoJS from 'crypto-js' //加密js
+var data_flag = true
+
+//标准时间转换成时间戳
+var formatDateTime = function (te) {
+  if (te == '') {
+    return ''
+  } else {
+    var time = new Date(te);
+    var dateTime = time.getTime();
+    return dateTime;
+  }
+}
+// 取得cookie
+function getCookie(name) {
+
+
+  if (document.cookie.length > 0) {
+    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
+    console.log(arr)
+    for (var i = 0; i < arr.length; i++) {
+      var arr2 = arr[i].split('='); //再次切割
+      //这里会切割出以username为第0项的数组、以password为第0项的数组，判断查找相对应的值
+      if (arr2[0] == 'username') {
+        name = arr2[1]; //拿到账号
+      } else if (arr2[0] == 'password') {
+        //拿到拿到加密后的密码arr2[1]并解密
+        var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'swuE9cmCZQwrkYRV');
+        var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
+        name = plaintext;
+      }
+    }
+  }
+
+  // var nameEQ = name + '='
+  // var ca = document.cookie.split(';') // 把cookie分割成组
+  // for (var i = 0; i < ca.length; i++) {
+  //   var c = ca[i] // 取得字符串
+  //   while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
+  //     c = c.substring(1, c.length) // 有的话，从第二位开始取
+  //   }
+  //   if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
+  //     return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
+  //   }
+  // }
+  // return false
+}
+
+// 清除cookie
+function clearCookie(name) {
+  setCookie(name, "", -1);
+}
+
+// 设置cookie
+function setCookie(username, password, days) {
+
+
+  var text = CryptoJS.AES.encrypt(password, 'swuE9cmCZQwrkYRV');//使用CryptoJS方法加密
+  var saveDays = new Date(); //获取时间
+  saveDays.setTime(saveDays.getTime() + 24 * 60 * 60 * 1000 * days); //保存的天数
+  console.log(saveDays)
+  console.log(saveDays.toGMTString())
+  //字符串拼接存入cookie
+
+
+  window.document.cookie = "username" + "=" + username + ";path=/;expires=" + saveDays.toGMTString();
+  window.document.cookie = "password" + "=" + text + ";path=/;expires=" + saveDays.toGMTString();
+
+
+
+
+
+
+
+  // seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
+  // var expires = "";
+  // if (seconds != 0 ) {      //设置cookie生存时间
+  //   var date = new Date();
+  //   date.setTime(date.getTime()+(seconds*1000));
+  //   expires = "; expires="+date.toGMTString();
+  // }
+  // document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
+}
+
+//时间戳转时间格式
+var formatDateTime_date = function (date) {
+  var y = date.getFullYear();
+  var m = date.getMonth() + 1;
+  m = m < 10 ? ('0' + m) : m;
+  var d = date.getDate();
+  d = d < 10 ? ('0' + d) : d;
+  return y + '-' + m + '-' + d;
+};
+
+export {
+  data_flag,
+  formatDateTime,
+  getCookie,
+  clearCookie,
+  setCookie,
+  formatDateTime_date
+}