网易易盾web端H5接入

该文档是针对于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>