人脸核验开发

src/api/login.js

@@ -106,3 +106,10 @@ export function selectIdentityAuthenticaEIDtoken() {
     method: 'post'
   })
 } 
+// H5轮询获取E证通Token状态
+export function selectPCEIDtokenStatus() {
+  return request({
+    url: '/identityAuthentication/selectPCEIDtokenStatus',
+    method: 'get',
+  })
+}

src/views/login.vue

@@ -10,40 +10,90 @@
     </div>
     <!-- 右侧 -->
     <div class="rightBox">
-      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+      >
         <h2 class="title">用户登录</h2>
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            auto-complete="off"
+            placeholder="账号"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="user"
+              class="el-input__icon input-icon"
+            />
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
-          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-            @keyup.enter.native="handleLogin">
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="密码"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="password"
+              class="el-input__icon input-icon"
+            />
           </el-input>
         </el-form-item>
         <el-form-item prop="code" v-if="captchaEnabled">
-          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-            @keyup.enter.native="handleLogin">
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="validCode"
+              class="el-input__icon input-icon"
+            />
           </el-input>
           <div class="login-code">
             <img :src="codeUrl" @click="getCode" class="login-code-img" />
           </div>
         </el-form-item>
-        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-        <el-form-item style="width:100%;">
-          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-            @click.native.prevent="handleLogin">
+        <el-checkbox
+          v-model="loginForm.rememberMe"
+          style="margin: 0px 0px 25px 0px"
+          >记住密码</el-checkbox
+        >
+        <el-form-item style="width: 100%">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            style="width: 100%"
+            @click.native.prevent="handleLogin"
+          >
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
           </el-button>
-          <div style="float: right;" v-if="register">
+          <div style="float: right" v-if="register">
             <!-- <router-link class="link-type" :to="'/register'">立即注册</router-link> -->
-            <el-button type="text" @click="registrationLink('/register')">立即注册</el-button>
+            <el-button type="text" @click="registrationLink('/register')"
+              >立即注册</el-button
+            >
+          </div>
+          <div class="registerImg" v-if="closeImgs">
+            <div class="closeImg" @click="closeImg">
+              <img
+                style="width: 25px; height: 25px"
+                src="../assets/images/closed.png"
+                alt=""
+              />
             </div>
-          <div class="registerImg">
             <div id="qrcodeImg"></div>
           </div>
         </el-form-item>
@@ -59,38 +109,45 @@
 </template>
 
 <script>
-import { getCodeImg, selectIdentityAuthenticaEIDtoken } from "@/api/login";
+import {
+  getCodeImg,
+  selectIdentityAuthenticaEIDtoken,
+  selectPCEIDtokenStatus,
+} from "@/api/login";
 import Cookies from "js-cookie";
 import QRCode from "qrcodejs2";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
   data() {
     return {
       codeUrl: "",
+      closeImgs: false,
+      timer: null,
+      pathVal:"",
       loginForm: {
         username: "admin",
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
       register: true,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
@@ -98,8 +155,8 @@ export default {
       handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -107,8 +164,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -118,29 +176,37 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
-          }).catch(() => {
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
               this.loading = false;
               if (this.captchaEnabled) {
                 this.getCode();
@@ -150,8 +216,14 @@ export default {
       });
     },
     registrationLink(path) {
-      selectIdentityAuthenticaEIDtoken().then(res => {
-        let url = res.data.eidToken
+      this.pathVal = path;
+      clearInterval(this.timer);
+      selectIdentityAuthenticaEIDtoken().then((res) => {
+        // this.timer = setInterval(() => {
+        //   this.getSelectPCEIDtokenStatus(res.data.eidToken);
+        // }, 1000);
+        this.closeImgs = true;
+        let url = res.data.eidToken;
         document.getElementById("qrcodeImg").innerHTML = "";
         return new QRCode("qrcodeImg", {
           width: 200,
@@ -160,9 +232,25 @@ export default {
           colorDark: "#000",
           colorLight: "#fff",
         });
-      })
+      });
       // this.$router.push(path);
-      console.log("注册链接")
+    },
+    // H5轮询获取E证通Token状态
+    getSelectPCEIDtokenStatus(data) {
+      selectPCEIDtokenStatus(data).then((res) => {
+        this.$router.push(this.pathVal);
+      });
+    },
+    // 关闭弹框
+    closeImg() {
+      clearInterval(this.timer)
+      this.closeImgs = false;
+    },
+  },
+  beforeDestroy() {
+    // 清除计时器
+    if (this.timer) {
+      clearInterval(this.timer);
     }
   }
 };
@@ -279,11 +367,10 @@ export default {
 }
 
 .registerImg {
-  border: 1px solid black;
+  border: 1px solid #c0c0c0;
   width: 350px;
   height: 250px;
 }
-
 .login-code-img {
   height: 38px;
 }