uniapp 各个端接入腾讯滑动行为验证码示例

某公司摸鱼前端

于 2024-09-09 14:32:59 发布

阅读量123

点赞数 4

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_59685936/article/details/142057324

版权

验证调起页面：

<template>
	<view class="app">
		<text>{{ obj.ret }}</text>
		<button @click="varify">验证</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				obj: {}
			}
		},
		onLoad() {
			// #ifdef H5
			var script = document.createElement('script');
			script.src = "https://turing.captcha.qcloud.com/TCaptcha.js";
			document.body.appendChild(script);
			// #endif
		},
		onShow() {
			this.obj = uni.getStorageSync('capture_succss')
			console.log(uni.getStorageSync('capture_succss'));
			//拿到数据后进行处理
		},
		methods:{
			callback(res) {
				let that = this
				if (res.ret === 0) {
					//验证通过
				} else {
					//验证失败
				}
			},
			varify() {
				// #ifdef H5
				let appid = '194178755';
				let captcha = new TencentCaptcha(appid, this.callback);
				captcha.show();
				// #endif
				// #ifdef APP | MP-WEIXIN
				uni.navigateTo({
					url:'/pages/index/index'
				})
				// #endif
			}
		}
	}
</script>

<style>
</style>

其他页面：

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

App | 小程序验证页面：

<template>
	<view>
		<!-- #ifdef APP -->
		<web-view src="/hybrid/html/local.html"  @message="callback"></web-view>
		<!-- #endif -->
		<!-- app-id：验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 在验证码控制台页面内【图形验证】>【验证列表】进行查看 -->
		<!-- #ifdef MP-WEIXIN -->
		<t-captcha
		     id="captcha"
		     app-id="194178755"
		     @verify="handlerVerify"
		     @ready="handlerReady"
		     @close="handlerClose"
		     @error="handlerError" />
		<button @click="login">登录</button>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			callback: function(res) { //接收网页传给uniapp组件的参数
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					// #ifdef APP
					uni.setStorageSync('capture_succss',r)
					// #endif
					uni.navigateBack()//接受到参数就可以跳转到想去的界面或者关闭此界面等
				} else {
					console.log('验证失败')
				}
			},
			login: function () {
			    this.selectComponent('#captcha').show()
			    // 进行业务逻辑，若出现错误需重置验证码，执行以下方法
			    // if (error) {
			    // this.selectComponent('#captcha').refresh()
			    // }
			},
			// 验证码验证结果回调
			handlerVerify: function (ev) {
			    // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
			    if(ev.detail.ret === 0) {
			        // 验证成功
			        console.log('ticket:', ev.detail.ticket)
			    } else {
			        // 验证失败
			        // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
			    }
			},    
			// 验证码准备就绪
			handlerReady: function () {
			    console.log('验证码准备就绪')
			},    
			// 验证码弹框准备关闭
			handlerClose: function (ev) {
			    // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
			    if(ev && ev.detail.ret && ev.detail.ret === 2){
			        console.log('点击了关闭按钮，验证码弹框准备关闭');
			    } else {
			        console.log('验证完成，验证码弹框准备关闭');
			    }
			},
			// 验证码出错
			handlerError: function (ev) {
			    console.log(ev.detail.errMsg)
			}
		},

	}
</script>

App验证需要的H5源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>验证码</title>
		<style type="text/css">
			.app {
				width: 100%;
				height: 50px;
				padding: 20px 10px;
			}
		</style>
	</head>
	<body bgcolor="#121110">
		<div class="app">
			<button id="tencentBtn" class="btn" type="button" data-action="navigateBack">返回</button>
		</div>
		<!-- uni 的 SDK -->
		<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
		<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
		<script type="text/javascript" src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>
		
		<script>
	
			document.addEventListener('UniAppJSBridgeReady', function() {	//确认是否加载好了TencentCaptcha
				let appid = '194178755'; // 腾讯云控制台中对应这个项目的 appid
				let callback = function(res) {
					//操作验证码后吧回调信息传递给web-view
					if(res.ret == 0){
						uni.postMessage({
							data: {
								res: res
							}
						});
						document.getElementById('tencentBtn').click()
					}
				}
				let captcha = new TencentCaptcha(appid, callback);
				// 滑块显示
				captcha.show();
				document.querySelector('.app').addEventListener('click', function(evt) {
					var target = evt.target;
					if (target.tagName === 'BUTTON') {
						var action = target.getAttribute('data-action');
						switch (action) { 
							case 'navigateBack':
								uni.navigateBack({
									delta: 1
								});
								break;
							default:
								break;
						}
					}
				});
			});
		</script>
	</body>
</html>

效果展示：

H5：