uniapp h5 和app（Android跟ios都可以）对接腾讯云验证码

weixin_47403101

已于 2024-04-10 17:23:57 修改

阅读量991

点赞数 1

文章标签： uni-app android ios 腾讯云

于 2023-09-20 12:00:15 首次发布

本文链接：https://blog.csdn.net/weixin_47403101/article/details/133070811

版权

uniapp h5 和app（Android跟ios都可以）对接腾讯云验证码

用于uniapp 对接腾讯云验证码，腾讯云的文档web是可以直接用的，但是app( Android跟iOS ）文档是原生的，对面给的解决办法是uni-app 与 web-view内嵌网页双向通信https://www.jianshu.com/p/1a28027a7dea

uniapp官网web-view:https://uniapp.dcloud.net.cn/component/web-view.html#web-view
腾讯云接入文档:https://cloud.tencent.com/document/product/1110/49810

前提条件客户端接入前，需完成新建验证，并在验证列表获取所需的 CaptchaAppId 以及 AppSecretKey，验证码控制台，这个根据提示成，一般不需要自己搞这个。

这里是web教程
1.引入官方js


//腾讯给的引用方式是这样的( <script src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>)，但是uniapp里自己写的h5用这个需要配置而且容易导致样式混乱
<script>
	export default {
		onLaunch() {//app.vue里边引入官网js（不要多次引用），也可以打开浏览器复制然后用import引入
			// #ifdef H5
			var script = document.createElement('script');
			script.src = "https://turing.captcha.qcloud.com/TCaptcha.js";
			document.body.appendChild(script);
			// #endif
		},

		methods: {

		}
	}
</script>

2.吊起验证码

<template>
	<view @click="varify">
		验证
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
			
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify() {
				let appid = 'xxxxx'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();
			
			},
		}
	}
</script>

这里是app教程

腾讯验证码不支持app所以要用到web-view 通讯，这里内嵌h5是html的，必须要用这种目录格式，随便说一下最好是这么写，uniapp写的h5会有无法通讯的问题，当然如果你能解决就当我没说

这里是web路径可以直接在APP内引用

<template>
	<view>
		<web-view src="/hybrid/html/local.html"  @message="callback" ></web-view>
	</view>
</template>
		<script>
	export default {
		data() {
			return {
				
			}
		},
	
		methods: {
			callback: function(res) { //接收网页传给uniapp组件的参数
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
				console.log(r)
				} else {
					console.log('验证失败')
				}
					uni.navigateBack()//接受到参数就可以跳转到想去的界面或者关闭此界面等
			}
		},

	}
</script>


onShow() {
			// #ifdef APP
			uni.$off('callback').$on('callback', (res) => {
				console.log("====要使用的界面取参====", res)
			})
			
			// #endif
		},

<!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 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 = 'xxx'; // 腾讯云控制台中对应这个项目的 appid
				let callback = function(res) {
				//操作验证码后吧回调信息传递给web-view
					uni.postMessage({
						data: {
							res: res
						}
					});
				}
				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>