uniapp使用网易易盾

插件地址：https://ext.dcloud.net.cn/plugin?id=1617

创建组件yidunCaptcha.vue

<template><view><!-- #ifdef MP-WEIXIN --><ne-captchav-if="captchaId":captchaId="captchaId":width="width":lang="lang":customStyles="customStyles"@verify="handleBindVerify($event.detail)"@error="handleError($event.detail)"id="neCaptcha" /><!-- #endif --><!-- #ifdef H5 --><view id="captcha"></view><!-- #endif --></view>
</template><script>export default {props: {isSense: false,captchaId: String,width: {type: [String, Number],default: 320},lang: {type: String,default: 'zh-CN'},customStyles: {type: Object,default: () => ({})},timeout: {type: Number,default: 12000}, // 客户端初始化超时时长dimAmount: Number, // 仅限客户端isToutchOutsideDisappear: Boolean, // 仅限客户端isHideCloseBtn: Boolean, // 仅限客户端useDefaultFallback: {type: Boolean,defaultL: true}, // 降级仅限客户端，h5端若要使用降级，请接入降级方案，参考官网failedMaxRetryCount: {type: Number,default: 3} // 降级配置,仅限客户端},data() {return {captchaIns: null,options: null}},created () {this.initNeCaptcha()},destroyed () {this.captchaIns = null},methods: {initNeCaptcha () {// #ifdef H5// h5其他配置项请参考文档const options = {captchaId: this.captchaId,width: this.width,lang: this.lang,element: '#captcha',protocol: 'https',enableClose: this.isHideCloseBtn,customStyles: this.customStyles,onVerify: (err, data) => {!err && this.handleVerify(data.validate)}}if (this.isSense) {options.mode = 'bind'} else {options.mode = 'popup'}initNECaptcha({ ...options }, ins => {this.captchaIns = ins}, err => {this.handleError(err)})// #endif// #ifdef MP-WEIXINthis.captchaIns = this.selectComponent('#neCaptcha')// #endif// #ifdef APP-PLUSlet appCustom = {}if (this.customStyles && this.customStyles.icon) {const { slider } = this.customStyles.iconappCustom = {'control_bar_start_url': slider,'control_bar_moving_url': slider,'control_bar_error_url': slider}}this.captchaIns = uni.requireNativePlugin('YD-Captcha')this.captchaIns.init({...appCustom,'captcha_id': this.captchaId,'is_no_sense_mode': this.isSense,'language_type': this.lang,'dimAmount': this.dimAmount,'is_touch_outside_disappear': this.isToutchOutsideDisappear,'timeout': this.timeout,'is_hide_close_button': this.isHideCloseBtn,'use_default_fallback': this.useDefaultFallback,'failed_max_retry_count': this.failedMaxRetryCount}, (data) => {console.log(data);if (data.validate) {this.handleVerify(data.validate)} else {this.handleError(data)}})// #endif},verify () {// #ifdef H5if(this.isSense) {this.captchaIns.verify()} else {this.captchaIns.popUp()}// #endif// #ifdef MP-WEIXIN// 传统验证码if (this.isSense) {this.captchaIns.verify()} else {this.captchaIns.popup()}// #endif// #ifdef APP-PLUSthis.captchaIns.showCaptcha((data)=>{console.log(data);})// #endif},reset () {// #ifdef H5this.captchaIns.refresh()// #endif// #ifdef MP-WEIXINthis.captchaIns.reset()// #endif// 原生实现reset可以先销毁（destroyCaptha）再进行初始化// #ifdef APP-PLUSthis.destroyCap()setTimeout(() => {this.initNeCaptcha()}, 0)// #endif},destroyCap () {// 小程序端销毁直接清空captchaId即可// #ifdef H5this.captchaIns.destroy()// #endif// #ifdef APP-PLUSthis.captchaIns.destroyCaptcha()// #endif},handleError ({ code, msg, message } = {}) {const err = new Error( msg ? `Error ${code}"${msg}` : message)this.$emit('captchaError')},handleVerify (validate) {this.$emit('verify', validate)},handleBindVerify ([err, validate] = []) {!err && this.handleVerify(validate)}}}
</script>

父组件

html

<yidun-captcha captcha-id="你的网易易盾id" ref="captcha" :isSense="false"
@verify="handleCaptcha"></yidun-captcha>

js

import YidunCaptcha from '../../components/yidunCaptcha.vue';
export default {components: {YidunCaptcha},methods: {//直接投票tryToVerify() {this.$refs.captcha.verify();// setTimeout(() => {//   this.tryReset()// }, 30000)},handleCaptcha(validate) {console.log(`code: ${validate}`);console.log(validate, "网易易盾");this.vote_now(validate);//发送请求},tryReset() {this.$refs.captcha.reset();},
},

在根目录下创建template.h5.html文件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title><%= htmlWebpackPlugin.options.title %></title><!-- 正式发布的时候使用，开发期间不启用。↓ --><!-- <script src="/h5/touch-emulator.js"></script><script>TouchEmulator();if (document.documentElement.clientWidth > 1024) {window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;}</script><style>::-webkit-scrollbar{display: none;}</style><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?";// 百度统计keyvar s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script> --><!-- 正式发布的时候使用，开发期间不启用。↑ --><script>document.addEventListener('DOMContentLoaded', function() {document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'})</script><script src="https://cstaticdun.126.net/load.min.js?t=201903281201"></script><link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /></head><body><!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 --><!-- 请勿在此文件编写页面代码或直接运行此文件。 --><!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template --><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script>/*BAIDU_STAT*/</script></body>
</html>

引入template.h5.html

uniapp使用网易易盾相关推荐

场景多、变种快、粒度细，网易易盾是如何有效解决这些内容安全难题的？
广电一年一度的开年大展CCBN已经拉开帷幕,3月19日,2019IPTV&OTT产业高峰论坛在北京维景国际大酒店召开. 网易易盾人工智能首席科学家方正作为产业一年的风向标,"201 ...
网易易盾验证码移动端迎来新版本开始支持智能无感知验证
近日,网易易盾验证码移动端迎来新版本,该版本支持智能无感知验证码,对整体交互及性能等方面进行了优化和提升. 移动端智能无感知验证码交互流程图验证码移动端最新版本开始支持智能无感知验证码,极致用户体验 ...
智能检测营销是否合规，网易易盾发布广告合规检测解决方案
近日,网易易盾广告合规检测解决方案重磅上线,它能够智能高效地检测企业营销内容是否违反广告法,确保企业的广告内容合规性. 2015年4月24日,<×××广告法>在×××第十二届×××常务委员 ...
网易易盾李雨珂：服务性能+算法确定性优化，迎接5G时代内容安全爆发式流量增长...
人工智能取代人类的言论一直甚嚣尘上,而深度学习算法通过大量的样本数据也能帮助人工对图像.视频.音频中的信息做出识别,本次采访邀请到网易易盾的资深算法专家李雨珂,他将会为大家解答深度学习在实际应用中的样 ...
网易易盾的“外挂对抗战”，游戏出海之路如何走得更安全？
过去二十年,被称为"第九艺术"的游戏成为中国互联网的重要趋势,正前所未有地占据和改变着我们的生活.放眼未来,中国游戏确定了"走出去"的增长目标,在更广阔的海外市 ...
网易易盾升级内容安全体系发布智能审核管理系统
内容安全已成为全球性互联网生态治理难题.互联网平台多媒体内容爆发带来海量信息的同时,也泥沙俱下裹挟有大量不良有害信息. 当内容平台发展快速,就会被灰黑产盯上,视作"流量蜜罐",利用 ...
ESIM模型的“全能版”！网易易盾实验室研究员解读HIM混合推理模型
"知物由学"是网易易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道."知物由 ...
易盾php,PHP接入网易易盾验证码
接入网易易盾验证码流程图: 后端接入:http://support.dun.163.com/documents/15588062143475712?docId=69218161355051008 前端 ...
网易易盾js逆向分析
目标url:滑动拼图验证码_拼图验证_图形验证_在线体验_网易易盾抓包分析,先看看传递回来的参数看起来有用的就这几个包.滑动滑块故意失败,发现传回来断点data传个false,并返回tonke,成 ...
网易易盾-滑块-cb参数
声明:本文只作学习研究,禁止用于非法用途,否则后果自负,如有侵犯了您的合法权益,请告知,我将及时更正.删除,谢谢.邮箱地址:lc1139411732@163.com 在接下来的一段日子里,我将为大家分 ...

uniapp使用网易易盾

创建组件yidunCaptcha.vue

父组件

html

js

在根目录下创建template.h5.html文件

引入template.h5.html

uniapp使用网易易盾相关推荐

最新文章

热门文章