uniapp h5 和app（Android跟ios都可以）对接腾讯云验证码
uniapp 对接腾讯云验证码
·
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>
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)