无痕验证

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,38 +193,97 @@ class App extends Component {
         .then(res => {
           let data = res.data
           if (data.errno == 200) {
+            if (data.data.is_check) {
+              this.setupNoTraceValidate(data.data.mkey)
+            } else {
               if (data.data['is_bind_mobile']) {
                 window.location.assign(data.data.url)
               } else {
-              let {role, uid, token} = data.data
+                this.handleLoginResponse(data.data)
+              }
+            }
+          } else {
+            Toast.info(data.msg)
+            this.props.setCurrentUser(initialState)
+          }
+        })
+
+
+    } else {
+      if (this.props.location.pathname !== '/my') {
+        http.get(`${API.home}/m/user_info_sample/0`).then(res => {
+          this.props.setCurrentUser(this.transformUser(res))
+        })
+      }
+    }
+  }
+
+  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)
+    /*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)
-            }
-          } else {
-            Toast.info(data.msg)
-            this.props.setCurrentUser(initialState)
+    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 {
-      if (this.props.location.pathname !== '/my') {
-        http.get(`${API.home}/m/user_info_sample/0`).then(res => {
-          this.props.setCurrentUser(this.transformUser(res))
           })
+        } else {
+          Toast.info(msg)
         }
-    }
+      })
   }
 
   componentDidUpdate() {
@@ -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

@@ -537,3 +537,8 @@ input[type="radio"]:checked:before {
     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,