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

腾讯云新一代行为验证码(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 字段。

相关推荐
m0_653031365 小时前
腾讯云认证考试报名 - TDSQL数据库交付运维专家(TCCE PostgreSQL版)
运维·数据库·腾讯云
m0_653031367 小时前
腾讯云认证考试报名 - TDSQL数据库交付运维专家(TCCE MySQL版)
运维·数据库·腾讯云
摘星编程15 小时前
CloudBase AI ToolKit实战:从0到1开发一个智能医疗网站
人工智能·腾讯云·ai代码远征季#h5应用·ai医疗应用·cloudbase开发
HERR_QQ17 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉2 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序