该文档是针对于vue3+js的指导手册,如果是vue2的话,注意this指向问题,需在init方法最外层定义 const that = this;用that来代替this
index.html中引入易盾的源
<script src="https://cstaticdun.126.net/load.min.js?t=<MINUTE_TIMESTAMP>"></script>
//注意:在删除嵌入广告中加入以下代码,以防易盾被删除
if(iframe.className.includes('yidun_cover-frame'))return
在对应使用的页面里使用,原来的发送验证码方法@click=hanleSend点击调用就可以删掉了,因为下面的代码会把hanleSend的点击事件挂载到发送验证码的容器上;
注意点:
1.验证码按钮切换成倒计时,挂载code_send的发送验证码的容器.需要把v-if都改成v-show,否则挂载的方法会在第一次验证结束后被移除掉;倒计时建议仍然使用v-if,方便归零重新倒计时
2.在发送验证码的接口里加入NECaptchaValidate这个参数字段,用来把易盾验证的结果返给后端
3.该文档是针对于vue3的指导手册,如果是vue2的话,注意this指向问题,需在init方法最外层定义 const that = this;用that来代替this
4.captchaId需要更换为对应端app的id,找对应产品要,进行更换
<template>
<!-- 存放易盾 -->
<div id="captcha"></div>
<span v-show="!showTime" class="code_send">发送验证码</span>
<van-count-down v-if="!isSend" :time="time" class="get_code_btn_time" format="ss" @finish="onFinish" />
</template>
<script>
let captchaIns = null
// 网易易盾
function init() {
// 若使用降级方案接入
// initNECaptcha 替换成 initNECaptchaWithFallback
window.initNECaptcha(
{
popupStyles: {
position: 'fixed',
top: '20%',
},
//该id为,对应app需要找对应产品要
captchaId: '2653391aaddf440ba795438f299d2168',
element: '#captcha',
mode: 'popup',
width: '320px',
theme: 'dark',
apiVersion: 2,
onVerify: (err, data) => {
// 当验证失败时, 内部会自动 refresh 方法, 无需手动再调用一次
console.log(12321321321, err)
if (err) return
// 以下为业务侧逻辑
console.log('以下为业务侧逻辑')
captchaIns.refresh()
//把易盾的验证结果传给后端
handleSendCode(data.validate)
},
},
function onload(instance) {
captchaIns = instance
console.log(captchaIns)
},
function onerror(err) {
// 初始化失败后触发该函数, err 对象描述当前错误信息
console.log(err)
}
)
//挂载在触发方法的容器上
document.querySelector('.code_send').addEventListener('click', function () {
if (!data.form.mobile||data.form.mobile.length !== 11) {
Toast.fail('请输入正确的手机号')
return
}
captchaIns && captchaIns.verify()
})
}
onMounted(init)
</script>