uniapp开发app时使用极验校验

Note_han

已于 2024-04-01 18:13:34 修改

阅读量781

点赞数 9

分类专栏：分享文章标签： uni-app

于 2024-04-01 16:59:41 首次发布

本文链接：https://blog.csdn.net/m0_56823974/article/details/137238160

版权

分享专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近在开发一个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>

愿大家少走弯路！

Note_han

关注

9
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
uniapp开发app时使用极验校验

最近在开发一个app，需要使用到极验去校验用户行为，于是去看了极验的开发文档，文档内只有原生的参考，于是我去插件市场找了一圈，发现几个都需要收费，且不好用，于是只好另辟蹊径。利用iframe，通过极验的web文档，尝试一下，发现还是可行的，现分享一下实现。// 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义。// 用户把验证关闭了，这时你可以提示用户需要把验证通过后才能进行后续流程。//your code,结合您的业务逻辑重置验证码。文件下载到/static/html文件夹内。
复制链接

扫一扫