最近在开发一个app,需要使用到极验去校验用户行为,于是去看了极验的开发文档,文档内只有原生的参考,于是我去插件市场找了一圈,发现几个都需要收费,且不好用,于是只好另辟蹊径
利用iframe,通过极验的web文档,尝试一下,发现还是可行的,现分享一下实现
一、首先在static文件夹下新建一个html文件夹(参考uniapp),大家可以自行设置
App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下
static/html/geetest.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="captcha"></div>
<script src="./gt4.js"></script>
<script>
let search = location.search
function searchChange(searchStr) {
let captchaId = searchStr.split('=')[1]
init(captchaId)
}
searchChange(search)
function init(captchaId) {
let dom = document.getElementById('captcha')
initGeetest4({
captchaId: captchaId,
product: 'bind',
language: "zho",
protocol: 'http://'
}, function(captcha) {
// captcha为验证码实例
captcha.appendTo("#captcha"); // 调用appendTo将验证码插入到页的某一个元素中,这个元素用户可以自定义
captcha.onReady(function() {
//验证码ready之后才能调用showCaptcha方法显示验证码
captcha.showBox();
}).onSuccess(function(v) {
//your code,结合您的业务逻辑重置验证码
var result = captcha.getValidate();
sendData(result)
captcha.destroy();
captcha = null
}).onFail(function(failObj) {
captcha.reset()
}).onError(function() {
captcha.reset()
}).onClose(function() {
sendData()
captcha.destroy();
captcha = null
// 用户把验证关闭了,这时你可以提示用户需要把验证通过后才能进行后续流程
});
});
}
// 向父级页面发送消息
function sendData(data = null) {
let info = {
data
}
//将值传入uniapp页面
window.parent.postMessage(info, '*');
}
</script>
</body>
</html>
二、同时将极验提供的gt4.js文件下载到/static/html文件夹内
三、在页面内使用
<iframe id="iframe" v-if="showIframe"
src="`static/geetest/geetest.html?captchaId=xxxxx`"></iframe>
<script>
export default {
data(){
return {
showIframe:false
}
},
methods:{
// 自行写打开校验弹窗到方法即可
receiveRenderData(e) {
//接收的值
console.log(e);
this.showIframe = false
},
}
}
</script>
<script module="renderModal" lang="renderjs">
export default {
data() {
return {
dom: '',
}
},
mounted() {
this.dom = document.getElementById('iframe')
// 接收iframe传过来的值
window.addEventListener('message', (e) => {
var data = e.data;
this.emitData(data.data)
});
},
methods: {
emitData(e) {
// 将值传到当前页面
this.$ownerInstance.callMethod('receiveRenderData', e)
}
}
}
</script>
愿大家少走弯路!