文档链接
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 {
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 {
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 {
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 {
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;
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 {
// 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 */