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

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

步骤一：获取 CaptchaAppId 、AppSecretKey

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

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

1. 登录 验证码控制台，左侧导航栏选择图形验证 > 验证管理，进入验证管理页面。
2. 单击新建验证，根据业务场景需求，设置验证名称、客户端类型、验证方式等参数。
3. 单击确定，完成新建验证，即可在验证列表中查看验证码 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 = truethis.state.interval = setInterval(() => {if (this.state.time-- <= 0) {this.state.time = 60this.state.smsSendBtn = falseclearInterval(this.state.interval)}}, 1000)getCode({ phone: this.mobile, ticket }).then(res => {showToast('短信发送成功')}).catch(err => {this.state.time = 60this.state.smsSendBtn = falseclearInterval(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 字段。