图形验证码
文章描述：
图形验证码用于注册或者登录，防止机械工具操作。
小程序图形验证码
腾讯云
腾讯云 → 图形验证 → 新建验证 获取CaptchaAppId、AppSecretKey
地址：https://console.cloud.tencent.com/captcha/graphical
小程序
设置 → 第三方设置 → 插件管理 → 添加 天御验证码
地址：https://mp.weixin.qq.com/
配置
1、项目mainfest.json中进行配置插件
mp-weixin
"plugins" : {
"t-captcha" : {
"version" : "1.0.3",
"provider" : "wxb302e0fc8ab232b4"
}
}
2、pages.json中进行引入组件
style
"usingComponents": {
"t-captcha": "plugin://t-captcha/t-captcha"
}uniapp
template
<template>
<view class="content">
<button type="primary" @click="sendCode">发送</button>
<t-captcha id="captcha" app-id="你的CaptchaAppId" @verify="handlerVerify" />
</view>
</template>
script
export default{
data(){
return{
}
},
onLoad() {
// this.selectComponent('#captcha').show();
},
methods:{
sendCode(){
this.selectComponent('#captcha').show();
},
//验证成功
handlerVerify (ev) {
// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
if(ev.detail.ret === 0) {
// 验证成功
this.redPackageFlag = ev.detail.ticket;
console.log('ticket:', ev.detail.ticket)
console.log('request')
// EntryApi.checkCaptcha({ticket: ev.detail.ticket}).then(res => {
// if(!res) {
// this.$nextTick(() => {
// this.selectComponent('#captcha').show()
// })
// }
// })
} else {
this.redPackageFlag = ''
}
}
}
}官方文档
腾讯云滑块验证码，官方文档 https://cloud.tencent.com/document/product/1110/36334
Web 客户端接入
https://cloud.tencent.com/document/product/1110/36841
发布时间：2022/07/07
发表评论