关于对网站建设工作情况的通报,不一样的婚恋网站怎么做,网站维护中怎么解决,什么做网站推广腾讯云新一代行为验证码#xff08;Captcha#xff09;#xff0c;基于十道安全防护策略#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时#xff0c;提供更精细化的用户体验。 …腾讯云新一代行为验证码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 idcaptcha app-id第一步获取的CaptchaAppId readyhandlerReadyclosehandlerCloseerrorhandlerErrorverifyhandlerVerify /button clickcheckGetCode{{ 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) {// 如果使用了 mpvueev.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 字段。
