登入驗證碼無痕驗證
阿新 • • 發佈:2020-08-20
文件連結
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 */