原文：

1、网易易盾web接入
2、网易滑动验证弹出式示例
3、vue中使用网易云盾的动态验证码
4、网易易盾验证码开发文档V1.0版本

某博客使用过程:

第一步: 在index.html中引入网易云盾地址
第二步: 新建一个容器加上ref属性(目的是为了正常显示及使用)
第三步: 新建一个容器加上ref属性(目的是为了正常显示及使用)
显示方式自己根据实际情况看文档配置即可写在mounted生命周期钩子函数中, 本人采用的是弹出式, 所以需要多配置一项
1

多配置一项就是通过时间来激活验证码也就是弹出验证码(这个事件监听也写在mounted生命周期钩子函数中)

到这里就可以正常使用动态验证码了, 这个是基础配置, 如果需要其他配置项看文档操作即可
————————————————
版权声明：本文为CSDN博主「Stubborn97」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/stubborn97/java/article/details/103351768

在vue实际接入使用：

1、考虑到当前业务，需要使用滑动验证的页面根据条件出现，在某个页面创建时引入，但是会造成重复引入，故需要判断是否已经引入，代码如下：

// 判断是否已经引入某个css或是js
function isInclude (name, callback) {
let js = /js$/i.test(name)
let es = document.getElementsByTagName(js ? ‘script’ : ‘link’)
for (let i = 0; i < es.length; i++) {
if (es[i][js ? ‘src’ : ‘href’].indexOf(name) !== -1) {
console.log(true)
return true
} else {
console.log(false)
callback()
return false
}
}
}
export default isInclude

2、但是考虑到实际使用，还是在index.html做了引入，引入代码如下：

// 引入网易易盾验证
var cstaticdunUrl = ‘http://cstaticdun.126.net/load.min.js‘ + ‘?t=’ + getTimestamp(1 60 1000) // 时长1分钟，建议时长分钟级别
function getTimestamp (msec) {
msec = !msec && msec !== 0 ? msec : 1
return parseInt((new Date()).valueOf() / msec, 10)
}
var cstaticdun = document.createElement(‘script’)

cstaticdun.type = ‘text/javascript’
cstaticdun.src = cstaticdunUrl
s.parentNode.insertBefore(cstaticdun, s)

在使用页面创建时初始化：
let self = this
let options = {。。。
onVerify: function (err, result) {
if (!err) { // 验证成功
that.quickRegister(result.validate)
that.instance.isFinshed = true
} else {
console.log(err)
}
}
}
try { // 此段代码请注释掉检查，eslint会认为这个网易滑动验证初始化的方法找不到定义的地方
/ eslint-disable /
initNECaptcha(options, function onLoad (instance) {
self.instance = instance
console.log(‘self.instance = instance’)
self.instance && self.instance.popUp()
}, function onerror (err) { // 初始化失败后触发该函数，err对象描述当前错误信息
console.log(err)
})
/ eslint-enable /
} catch (error) {
console.log(error)
}

调用弹出如下：
if (this.instance) { // 是否初始化滑动验证成功
if (this.instance.isFinshed) {
this.instance.refresh()
this.instance.isFinshed = false
}
this.instance.popUp()
} else this.initCaptcha(‘again’)

使用安全性：

// captchaId: ‘a46c7d22ccc2da4b88e4bcb0c73870b6’, // 有道
// token: ‘6c51167657be431ca3ff5add91995f23’, // 有道
// captchaId: ‘c062849f34e24aaca2986fe16187ee44’, // 申通
// captchaId: ‘7097fb98c99046c2af91d1991cfe4dbd’, // 挖财
// captchaId: ‘bce6e4d47d5949989185257cebda1a90’, // 国家大剧院
验证码id(captcha_id)
验证码唯一标识，公开可见，用于区分不同的验证码使用场景，如登录、投票、发帖等。
验证码key(captcha_key)
验证码id对应的私钥，不可公开，用于和易盾后台传输时进行签名校验，防止伪造请求。