微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码(Captcha),基于十道安全防护策略,为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。

步骤一:获取 CaptchaAppId 、AppSecretKey

根据 腾讯云官方文档,在 验证码控制台 完成相关配置,得到 CaptchaAppId 以及 AppSecretKey

客户端接入前,需完成新建验证,并在验证列表获取所需的 CaptchaAppId 以及 AppSecretKey。步骤如下:

  1. 登录 验证码控制台,左侧导航栏选择图形验证 > 验证管理,进入验证管理页面。
  2. 单击新建验证,根据业务场景需求,设置验证名称、客户端类型、验证方式等参数。
  3. 单击确定,完成新建验证,即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。

步骤二:微信小程序接入插件

添加插件:

登录 小程序后台 ,选择 设置 > 第三方设置 > 添加插件,搜索 "天御验证码" 并添加


集成插件:

1、原生集成:

在 app.json 中声明验证码小程序插件

javascript 复制代码
{
	"plugins": {
         "t-captcha": {
             "version": "1.0.4", // 请选择小程序插件最新版本
             "provider": "wxb302e0fc8ab232b4"
         }
     }
}

在需要使用插件的页面中引入组件,页面 .json 文件里引入组件

javascript 复制代码
{
     "usingComponents": {
      "t-captcha": "plugin://t-captcha/t-captcha"
     }
}

2、uni-app框架集成:

声明插件,打开 manifest.json > 切换到源码视图 > 在 mp-weixin 中声明验证码小程序插件

javascript 复制代码
"mp-weixin": {
	...
	"plugins": {
		"t-captcha": {
		 	"version": "1.0.4", // 请选择小程序插件最新版本
		 	"provider": "wxb302e0fc8ab232b4"
		 }
	}
}

引入组件,打开pages.json > 在需要使用插件的页面中引入组件

javascript 复制代码
{
	"path": "pages/login/index",
	"style": {
		"usingComponents": {
			"t-captcha": "plugin://t-captcha/t-captcha"
		}
	}
}

注意:验证码组件引入的路径,必须和在 app.json 或 manifest.json 中声明的名称一致。
比如,在 manifest.json 中声明的名称叫 captcha ,那么引入时的路径就是 plugin://captcha/t-captcha,才能正确引入。

步骤三:插件使用

以获取手机号验证码为例

html 复制代码
<t-captcha 
	id="captcha" 
	app-id="第一步获取的CaptchaAppId "
	@ready="handlerReady"
	@close="handlerClose"
	@error="handlerError"
	@verify="handlerVerify" />

<button @click="checkGetCode">
	{{ state.smsSendBtn ? state.time + 's' : '获取验证码' }}
</button>
javascript 复制代码
// 获取手机号验证码校验
checkGetCode() {
	if (!this.mobile) {
		showToast('请输入手机号')
		return false
	}
	
	if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile.replace(/(^\s*)|(\s*$)/g, ''))) {
		showToast('请输入正确手机号码')
		return false
	}
	
	this.selectComponent('#captcha').show()
},
// 获取验证码
getCode(ticket) {
	this.state.smsSendBtn = true
	this.state.interval = setInterval(() => {
		if (this.state.time-- <= 0) {
			this.state.time = 60
			this.state.smsSendBtn = false
			clearInterval(this.state.interval)
		}
	}, 1000)
	
	getCode({ phone: this.mobile, ticket }).then(res => {
		showToast('短信发送成功')
	}).catch(err => {
		this.state.time = 60
		this.state.smsSendBtn = false
		clearInterval(this.state.interval)
	})
},
// 滑块验证回调
handlerVerify(ev) {
	if (ev.detail.ret === 0) { // 验证成功
		this.getCode(ev.detail.ticket)
	} else {
		// 验证失败
	}
},
// 滑块验证准备就绪
handlerReady() {
	console.log('验证码准备就绪')
},
// 滑块验证弹框准备关闭
handlerClose(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(ev) {
	console.log(ev.detail.errMsg)
}

注意:

微信小程序端,核查验证码票据结果,不需要 randstr 字段,参考文档
滑块验证成功后,前端需要将返回的票据(ticket )传给后端进行校验,小程序端返回参数只有 ticket 字段, 没有 randstr 字段。

相关推荐
全职计算机毕业设计12 分钟前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
知识分享小能手21 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
韩立学长1 天前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
亮子AI2 天前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082852 天前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆2 天前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北2 天前
洗车小程序系统
微信小程序·小程序
namehu2 天前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20122 天前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
盛夏绽放2 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app