WeChat applet access Tencent Yuntianyu verification code

Tencent Cloud's new-generation behavioral verification code (Captcha), based on ten security protection strategies, creates a three-dimensional and comprehensive human-machine verification for developers of web pages, apps, and small programs. It provides a more refined user experience while protecting business security in major scenarios such as registration and login, activity seckill, likes and posts, and data protection.

Step 1: Obtain CaptchaAppId and AppSecretKey

According to the official documentation of Tencent Cloud , complete the relevant configuration in the captcha console to get CaptchaAppId and AppSecretKey

Before the client connects, it needs to complete the new verification, and obtain the required CaptchaAppId and AppSecretKey in the verification list. Proceed as follows:

1. Log in to the verification code console, select Graphical Verification > Verification Management in the left navigation bar to enter the verification management page.
2. Click New Authentication, and set parameters such as the authentication name, client type, and authentication method according to the requirements of the business scenario.
3. Click OK to complete the new verification, and you can view the verification code CaptchaAppId and AppSecretKey in the verification list.

Step 2: WeChat applet access plug-in

Add plugin:

Log in to the background of the applet , select Settings > Third Party Settings > Add Plugin , search for "Tianyu Verification Code" and add it

Integration plugin:

1. Native integration:

Declare the captcha applet plugin in app.json

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

Introduce the component in the page that needs to use the plug-in, and introduce the component in the page.json file

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

2. uni-app framework integration:

Declare the plug-in, open manifest.json > switch to source view > declare the verification code applet plug-in in mp-weixin

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

Import components, open pages.json > import components in pages that need to use plug-ins

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

Note: The path imported by the verification code component must be consistent with the name declared in app.json or manifest.json.

For example, if the name declared in manifest.json is captcha, then the import path is plugin://captcha/t-captcha to import correctly.

Step 3: Use the plugin

Take the mobile phone number verification code as an example

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

Notice:

On the WeChat applet side, check the result of the verification code ticket, the randstr field is not required, refer to the documentation .

After the slider is successfully verified, the front end needs to pass the returned ticket (ticket) to the back end for verification. The return parameter of the applet is only the ticket field, without the randstr field.