登录验证码无痕验证

文档链接
https://help.aliyun.com/document_detail/122237.html?spm=a2c4g.11186623.6.576.5b6251b3FrkgHe

具体：
首先index.html加入代码

 <script src="//g.alicdn.com/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

然后在输入框代码组件里引入无痕验证的组件

 <NoCaptcha ref="captcha" />

在发验证码前调用组件方法

 this.$refs.captcha.handleCaptcha(params).then(res => {

组件代码如下

/* eslint-disable */
<template>
  <div class="no-captcha-wrap">
    <van-dialog v-model="captchaVisible" :show-confirm-button=false overlay-class="captVisi">
      <div slot="title" class="captHeader">
        <span>请完成安全验证</span>
        <img @click="captchaVisible = false" src="../../assets/images/capeClose.png" alt="">
      </div>
      <div id="captcha"></div>
    </van-dialog>
  </div>
</template>

<script>
import { getCode } from '@/services/apply'
export default {
  name: 'NoCpatcha',
  props: {
    url: {
      type: String
    }
  },
  data () {
    return {
      nc: null,
      captchaVisible: false,
      params: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      window.NVC_Opt = {
        appkey: 'FFFF0N00000000007F27',
        scene: 'nvc_login_h5',
        isH5: true,
        popUp: false,
        renderTo: '#captcha',
        timeout: 10000000,
        nvcCallback: (data) => {
          this.captchaVisible = false
          let params = JSON.parse(localStorage.getItem('params'))
          this.handleCaptcha(params, data)
          // 其中，data为getNVCVal()函数的值，该函数为二次验证滑动或者刮刮卡通过后的回调函数。
          // data与业务请求一同上传，由后端请求AnalyzeNvc接口并返回100或者900。
        },
        trans: {},
        language: 'cn',
        // 当唤醒滑动验证作为二次验证，组件宽度
        customWidth: '100%'
      }
      // 加载js文件
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = '//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=20200808'
      document.body.appendChild(s)
    },
    handleCaptcha (params, da) {
      localStorage.setItem('params', JSON.stringify(params))
      return new Promise((resolve, reject) => {
        let data = da || getNVCVal() // eslint-disable-line
        // let data = '%7B%22a%22%3A%22FFFF0N00000000007F27%22%2C%22c%22%3A%221596532871769%3A0.2913351947983531%22%2C%22d%22%3A%22nvc_login%22%2C%22h%22%3A%7B%22umidToken%22%3A%22T2gAyt_1yb9JGCYCz8W7gQFefgOdIn-pIg3uSH5NUg0OT1Co6TX6muD6Y1ly_EkzDYil524-oeh8aCTlbnFIN6sk%22%7D%2C%22j%22%3A%7B%22test%22%3A1%7D%2C%22b%22%3A%22125%23cRPcavvTcW2%2FA0Ba8aocx2dSuDf2r14YEXzdh0wkDDIBPnGPY%2B%2FEZTQapR9Np%2FoikMJU1w%2Bs0GlM0MKufPGfn7J79tVwHCtGlvOpfuXzuTU2AG0pCeavck6j0Qklk8agaC8MtuJC5YF74lqFPhXuwJXlsDRkNQVq4d9sXCXJxuDkpcsD%2FsQ%2F%2BcNoyS46b1nTcicBBP9SDDcjY8ylmtDwaKdTTbxQxpcQmbwJpZjCKscM86BQ7xdEmr40FmWP%2B3NDVAHrQZKOWpxftVyAUNNs%2FocP0UgM%2BcwUfBRIZR5IjPDho0VJ3EToa9S5281JLFp%2Bo7zplneECSvdA2IQvi%2FQUP6BSW%2Bcc6t83XuEm2HxsHbToUEEHRrTEMOe9Ldw9f9Gwl%2BqEsAzRA2gscRQmKMAEV5P3VNxc%2BawE63LWbsd%2FXgk834nXqOLGXcB8h8rQtIUtsQCYKYga7C8k6YuIwk1rqKzlGY5VAamG0AEKFJ%2FGrEFmGQVEXxuxx9AAPWbRj2IZUiAhkTCuxS93cjYa%2BkbccscKJsScUHUcgpHs6jfHkihavowccDUecn5y%2FEfJmwTBT97sOV1TcAfYkLT8hr1l%2BSNEZytdJpmxQKXHInawm5xA6hOL%2F3r2KgY9%2Bk8cMpuMAAEpp3xlEtdpT9fFx6aVVG%2Bh4kY7XUMzi2nEivP1Rlo51x5ugoSOTZigCVKywfq0IxW8uh57B63lmpcRazJWXIU6KBRRT0L0OFhPlgyfQh0WtjcgFxbvNyrsMnkJlUCxyIUijkMG1T0N%2F2Xhwl%2BkgT7Qz0R9yYDE1pVBgQOOOup0InVPxwDK%2F%2FwSNFImYO6X1VrKTh9WOHum3k1cND3pQA0sb%2BXs8QlIT6UjwiBwUDFVjzO5eRAQfM8rknr%2BW%2BEe%2FrD7xBHkzK8HVdkFHqxEATpprXF%2FOs2dMR1h0ylYAMPBbI9H5N74ybUWAXBlEWmAUCfIW0VY78aWj6HVBnecduK59if%2BbAiTMOF%2FVZYAaCEkMpUMrP7ffPTYtzbKtA0bvD9TyorczR45wrJQDKansprJmtmrFRvzLe1tn9MsSX1i2Gcl%2Bhs4GmkwyJc3gkl58INqQRFfWIsLxHqJ8yLeF3dyxlEVDMbCTO%2Bpsg%2BDlhGLx%2BZ%2BMec4IC9Pxo2i7FpdZywXUG7NUq%2B6W99%2Fjworh6qi8zwQTQPMDW%2FsixSgpFL8giJI%2Bv8jOHVHUg57QWTN%2FwLC7UPhhuRRrOFjngEwEh%3D%22%2C%22e%22%3A%2205kyA6fS3OvtG2cqBc_IB1n4IZHt7WaMtGXWq0S2FAF8HrSwXuZFd4GK42pMeixiuQ7T0s_9RvPaZJFku8H6KgtfoYc7qSwOokPH16Uo284SuFtbvYxF_RvYhFM29-WozYu7_acRq_dT5_XggWfSY8ja4qxpZCvHWuQKx3_T9gy3c8HnEZnGRGniBzvk-rAWqOfDIhNmVgs8gZTdTnmxZQ%22%7D'
        let queryParams = Object.assign({ data, captcha: 1 }, params) // : getNVCVal()
        // this.captchaVisible = true
        // getNC().then(function() { // eslint-disable-line
        //   _nvc_nc.upLang('cn', { // eslint-disable-line
        //     _startTEXT: '向边滑动验证',
        //     _yesTEXT: '验证成功',
        //     _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
        //     _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>'
        //   })
        //   _nvc_nc.reset()// eslint-disable-line
        // })
        // return
        getCode(queryParams).then(res => {
          if (res.status_code === 200) {
            if (['400', '600'].includes(res.data.BizCode)) {
              this.captchaVisible = true
              getNC().then(function() { // eslint-disable-line
                _nvc_nc.upLang('cn', { // eslint-disable-line
                  _startTEXT: '向右滑动验证',
                  _yesTEXT: '验证成功',
                  _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
                  _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>'
                })
                _nvc_nc.reset()// eslint-disable-line
              })
            } else if (res.data.BizCode === '700') {
              getLC() // eslint-disable-line
            } else if (res.data.BizCode === '100' || res.data.BizCode === '200') {
              // 注册成功
              nvcReset() // eslint-disable-line
              resolve(res)
            } else if (res.data.BizCode === '800' || res.data.BizCode === '900') {
              // 直接拦截
              nvcReset() // eslint-disable-line
            } else {
              resolve(res)
              this.$parent.timer()
            }
          } else {
            this.$toast(res.message || '请求失败')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-dialog {
  width:320px;
  // height:168px;
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 18px 0px rgba(32,36,40,0.04);
  border-radius:10px;
  padding: 20px 20px 15px 20px;
}
/deep/ .van-dialog__header {
  padding: 0px;
}
/deep/ .captHeader{
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  span {
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(32,36,40,1);
    line-height:16px;
  }
  img {
    width: 12px;
    height: 10px;
  }
}
/deep/ .slider {
  left: 0px!important;
  right: 0px!important;
  height: 52px!important;
  background-color: rgba(249,251,252,1)!important;
  border-radius: 26px;
  border: 1px solid rgba(238,238,238,1);
  box-shadow: 0 0 0 #f9fbfc!important;
  // .track {
  //   background: rgb(231, 238, 255);
  //   border-radius: 26px;
  //   border: 1px solid rgb(82, 128, 251)
  // }
  .button {
    width: 50px!important;
    height: 50px!important;
    background-color: rgb(82, 128, 251)!important;
    box-shadow: rgba(0, 0, 0, 0.15) 1px 0px 6px 0px;
    border-radius: 50%;
    color: #fff;
    line-height: 46px;
    font-size: 22px;
  } 
} 
/deep/ .stage1 {
  margin-bottom: 25px;
}
/deep/ .stage3 {
  height: 115px!important;
  margin-top: -4px;
  .title {
    height:16px;
    font-size:16px!important;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(98,109,123,1)!important;
    line-height:16px;
    margin: 40px 0 30px 0!important;
    padding: 0 20%!important;
    line-height: 25px!important;
    height: 21px;
    overflow: hidden;

  }
  .refresh {
    width: 90%!important;
    line-height: 30px;
    .icon {
      color:rgba(82,128,251,1)!important;
    }
    .label {
      top:-6px!important;
      height:16px!important;
      font-size:16px!important;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(82,128,251,1)!important;
    }
  }
  .nc-sep {
    display: none;
    outline: 1px solid #BEC9D0!important;
    height: 12px!important;
    bottom:42px!important;
  }
  .feedback {
    display: none;
    .icon {
      color: #8E9DAE!important;
    }
    .label {
      font-size:16px!important;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(142,157,174,1)!important;
    }
  }
}
// /deep/ ._nc .stage1 .slider {
//   height: 52px;
//   border-radius: 26px;
//   box-shadow: 0 0 3px #999;
//   background-color: #ddd;
// }
    /* 滑动条 */
/deep/ ._nc .stage1 .track div {
  border-radius: 26px;
  color: #fff;
}
    /* 滑动条背景色-正常 */
/deep/ ._nc .stage1 .bg-green {
  line-height: 50px!important;
  height: 50px!important;
  background-color: rgb(231, 238, 255);;
  border-radius: 26px;
  border: 1px solid rgb(82, 128, 251)
}
    /* 滑动条背景色-失败 */
/deep/ ._nc .stage1 .bg-red {
  background-color: rgba(241,245,247,1);
}
/deep/ ._nc .stage3 .title {
  font-size: 20px;
  color: #777;
  width: 100%;
}
/deep/ .icon-slide-arrow {
  color: rgba(0,0,0,0)!important;
  background-image: url('../../assets/images/slideArrow.png');
  background-size: 17px 14px;
  background-repeat: no-repeat;
  background-position: center center;
}
/deep/ .icon-load-c {
  color: #fff!important;
}
/* 图标 */
// /deep/ ._nc .icon {
//   width: 32px;
//   height: 32px;
//   background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
// }
// /deep/ ._nc .stage3 .menu.refresh .icon {
//   background-position: -128px 0;
// }
// /deep/ ._nc .stage3 .menu.feedback .icon {
//     background-position: -160px 0;
// }
</style>
/* eslint-disable */