微信小程序接入腾讯云天御验证码-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序接入腾讯云天御验证码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

步骤一：获取 CaptchaAppId 、AppSecretKey

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

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

登录验证码控制台，左侧导航栏选择图形验证 > 验证管理，进入验证管理页面。

单击新建验证，根据业务场景需求，设置验证名称、客户端类型、验证方式等参数。

单击确定，完成新建验证，即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。

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

添加插件：

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

微信小程序接入腾讯云天御验证码,小程序,微信小程序,腾讯云,notepad++
集成插件：

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)
}