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

news2024/11/15 11:48:27

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

步骤一：获取 CaptchaAppId 、AppSecretKey

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

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

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

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

添加插件：

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

在这里插入图片描述
集成插件：

1、原生集成：

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

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

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

{
     "usingComponents": {
      "t-captcha": "plugin://t-captcha/t-captcha"
     }
}

2、uni-app框架集成：

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

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

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

{
	"path": "pages/login/index",
	"style": {
		"usingComponents": {
			"t-captcha": "plugin://t-captcha/t-captcha"
		}
	}
}

注意：验证码组件引入的路径，必须和在 app.json 或 manifest.json 中声明的名称一致。

比如，在 manifest.json 中声明的名称叫 captcha ，那么引入时的路径就是 plugin://captcha/t-captcha，才能正确引入。

步骤三：插件使用

以获取手机号验证码为例

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

<button @click="checkGetCode">
	{{ state.smsSendBtn ? state.time + 's' : '获取验证码' }}
</button>

// 获取手机号验证码校验
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)
}