uniapp开发app时使用极验校验_uniapp 接入极验

作者：繁依Fanyi0 | 2024-08-01 01:44:05

踩

uniapp 接入极验

最近在开发一个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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

二、同时将极验提供的gt4.js文件下载到/static/html文件夹内

三、在页面内使用

<iframe id="iframe" v-if="showIframe"
			src="`static/geetest/geetest.html?captchaId=xxxxx`"></iframe>
1
2

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

愿大家少走弯路！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/911727