网易易盾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 替换成 initNECaptchaWithFallbackwindow.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 = instanceconsole.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>

网易易盾web端H5接入相关推荐

网易易盾验证码移动端迎来新版本开始支持智能无感知验证
近日,网易易盾验证码移动端迎来新版本,该版本支持智能无感知验证码,对整体交互及性能等方面进行了优化和提升. 移动端智能无感知验证码交互流程图验证码移动端最新版本开始支持智能无感知验证码,极致用户体验 ...
网易易盾验证码移动端迎来新版本开始支持智能无感知验证 1
近日,网易易盾验证码移动端迎来新版本,该版本支持智能无感知验证码,对整体交互及性能等方面进行了优化和提升. 移动端智能无感知验证码交互流程图验证码移动端最新版本开始支持智能无感知验证码,极致用户体验 ...
易盾php,PHP接入网易易盾验证码
接入网易易盾验证码流程图: 后端接入:http://support.dun.163.com/documents/15588062143475712?docId=69218161355051008 前端 ...
PHP接入网易易盾验证码
接入网易易盾验证码流程图: 后端接入:http://support.dun.163.com/documents/15588062143475712?docId=69218161355051008 前端 ...
iOS接入网易易盾并实现
一.接入网易易盾SDK 前言 1.此文章为Swift版本,OC版本可参考网易易盾官网接入实现文档 2.网易易盾SDK兼容iOS系统版本9.0+ CocoaPods集成方式 1.更新Podfile文件 ...
vue3 接入网易易盾(webpack,vite)
webpack项目中配置: 方法一: 1) index.html <script src="https://cstaticdun.126.net/load.min.js?t=123&q ...
全面升级！网易易盾发布设备DNA指纹系统
随着移动互联网的应用不断深入,特别是互联网金融.电商.IoT行业的迅猛崛起,黑产的欺诈技术也快速发展.他们通过模拟器.群控平台.刷号软件.自动化脚本.打码平台.短信接口和代理服务器等一整套技术,实现自 ...
网易易盾的“外挂对抗战”，游戏出海之路如何走得更安全？
过去二十年,被称为"第九艺术"的游戏成为中国互联网的重要趋势,正前所未有地占据和改变着我们的生活.放眼未来,中国游戏确定了"走出去"的增长目标,在更广阔的海外市 ...
网易易盾云图片(行为)验证码，网易验证码，前端vue后端python drf。前后分离
网易易盾开通官网相关链接: 网易易盾在线体验:在线体验验证码联系客服开通体验账户后,点击进入管理中心添加产品,添加时:测试先随意起个名字,选择web. 准备开工前端 Vue 官方接入文档在这 ...

网易易盾web端H5接入

网易易盾web端H5接入相关推荐

最新文章

热门文章