无痕验证

src/App.js

@@ -6,7 +6,7 @@ import { setCurrentUser, startFetchUser } from "@/store/userAction"
 import { initialState } from "@/store/userReducer"
 import { withRouter, Link } from 'react-router-dom'
 import { compose } from 'redux'
-import { getParam, http, browser } from "@/utils"
+import { getParam, http, browser, loadScript, getTimestamp } from "@/utils"
 import { Toast } from "antd-mobile"
 import { addDays } from 'date-fns'
 import stringify from 'json-stringify-safe'
@@ -30,6 +30,7 @@ class App extends Component {
       isShowActivityEntry: 0,
       jumpUrl: '',
       entryImage: '',
+      isNeedCaptcha: true,
     }
   }
 
@@ -192,23 +193,14 @@ class App extends Component {
         .then(res => {
           let data = res.data
           if (data.errno == 200) {
-            if (data.data['is_bind_mobile']) {
-              window.location.assign(data.data.url)
+            if (data.data.is_check) {
+              this.setupNoTraceValidate(data.data.mkey)
             } else {
-              let {role, uid, token} = data.data
-              let expires = addDays(new Date(), 90)
-              cookie.set('role', role, {expires, domain: '.julyedu.com', path: '/'})
-              cookie.set('uid', uid, {expires, domain: '.julyedu.com', path: '/'})
-              cookie.set('token', token, {expires, domain: '.julyedu.com', path: '/'})
-
-              const search = new URLSearchParams(window.location.search)
-              search.delete('code')
-              search.delete('aa')
-              if (search.has('state') && search.get('state') === 'STATE') {
-                search.delete('state')
+              if (data.data['is_bind_mobile']) {
+                window.location.assign(data.data.url)
+              } else {
+                this.handleLoginResponse(data.data)
               }
-              const loc = window.location
-              loc.replace(loc.origin + loc.pathname + '?' + search.toString() + loc.hash)
             }
           } else {
             Toast.info(data.msg)
@@ -226,6 +218,74 @@ class App extends Component {
     }
   }
 
+  handleLoginResponse = data => {
+    let {role, uid, token} = data
+    let expires = addDays(new Date(), 90)
+    cookie.set('role', role, {expires, domain: '.julyedu.com', path: '/'})
+    cookie.set('uid', uid, {expires, domain: '.julyedu.com', path: '/'})
+    cookie.set('token', token, {expires, domain: '.julyedu.com', path: '/'})
+
+    /*const search = new URLSearchParams(window.location.search)
+    search.delete('code')
+    search.delete('aa')
+    if (search.has('state') && search.get('state') === 'STATE') {
+      search.delete('state')
+    }
+    const loc = window.location
+    loc.replace(loc.origin + loc.pathname + '?' + search.toString() + loc.hash)*/
+
+  }
+
+  setupNoTraceValidate = mkey => {
+    let src = '//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + getTimestamp(60 * 1000)
+    const appkey = 'FFFF0N000000000090FC'
+    const scene = 'nvc_register_h5'
+    const _this = this
+
+    window.NVC_Opt = {
+      appkey: appkey,
+      scene: scene,
+      isH5: true,
+      //二次验证的唤醒方式。true为浮层式，false为嵌入式。
+      popUp: true,
+      //声明二次验证需要渲染的目标元素ID。
+      renderTo: '#global-captcha',
+      //回调参数。
+      nvcCallback: function (data) {
+        _this.requestRegister(data)
+        // 其中，data为getNVCVal()函数的值，该函数为二次验证滑动或者刮刮卡通过后的回调函数。
+        // data与业务请求一同上传，由后端请求AnalyzeNvc接口并返回100或者900。
+      },
+    };
+
+    loadScript(src, () => {
+      let timer = setInterval(() => {
+        if (window.getNVCVal) {
+          let NVC = window.getNVCVal()
+          this.requestRegister({mkey, NVC})
+          clearInterval(timer)
+        }
+      }, 1000)
+    })
+  }
+
+  requestRegister = data => {
+    http.post(`${API["passport-api"]}/m/wxRegister`, data)
+      .then(res => {
+        const {errno, msg, data} = res.data
+        if (errno === 200) {
+          this.handleLoginResponse(data)
+        } else if (errno === 5002) {
+          nvcReset && nvcReset()
+          getNC().then(() => {
+
+          })
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
   componentDidUpdate() {
 
     this.setPreviousLocation()
@@ -327,7 +387,7 @@ class App extends Component {
   }
 
   render() {
-    const {isShowActivityEntry, entryImage, jumpUrl} = this.state
+    const {isShowActivityEntry, entryImage, jumpUrl, isNeedCaptcha} = this.state
     return <>
       <Routes/>
       {
@@ -339,6 +399,9 @@ class App extends Component {
           </a>
         </div>
       }
+      {
+        isNeedCaptcha && <div id={'global-captcha'}></div>
+      }
     </>
   }
 }

src/assets/css/index.scss

@@ -536,4 +536,9 @@ input[type="radio"]:checked:before {
     font-size: $size;
     color: #5a5a5a;
   }
+}
+
+#global-captcha{
+  height: 44px;
+  margin-bottom: 50px;
 }
\ No newline at end of file

src/utils/index.js

@@ -146,6 +146,8 @@ export {
   isLogin,
   dateCountDown,
   isValidUrl,
+  loadScript,
+  getTimestamp,
 }
 export {
   default as SendMessageToApp,