微信小程序接入 本文介绍如何在微信小程序引入验证码插件。 前提条件 已经订购边缘安全加速平台安全与加速服务,若未订购,请参见服务开通。 在控制台新增域名,请参见添加服务域名。 开通套餐为高级版及以上版本,支持验证码功能。 需先完成验证码配置。暂时未开放控制台,请通过提交工单给天翼云客服,由其人工操作开启。 目前支持小程序原生语言接入 注意 请勿在“微信开发者工具”的“游客模式”下接入验证码。 接入说明 1、添加插件 用管理员身份登录微信公众平台 ,且需使用接入小程序的相关账号。 选择设置 > 第三方设置 > 添加插件,在搜索框内输入关键字“ AOne 验证码”查找插件,并单击添加。 2、集成插件 引入验证码小程序插件。 使用验证码插件前,需要在 app.json 中声明验证码小程序插件,如下: html { "plugins": { "captchaplugin": { "version": "1.0.4", "provider": "wx10dca5c3b7d08b57" } } } 引入验证码小程序组件。 需要在页面.json 文件中需要引入自定义组件,js 代码如下: html { "usingComponents": { "aonecaptcha": "plugin://captchaplugin/aonecaptcha" } } 3、使用小程序插件 使用原生小程序语言接入时,需要在自定义的.wxml 文件中,使用验证码插件,wxml 代码如下: html 登录 组件参数说明: 字段名 值类型 默认值 说明 httpDomain String 无 验证码拦截的域名 captchaShow Boolean false 控制弹框显示 组件方法说明: 字段名 说明 success 成功回调 (code 状态码 0 成功,ticket 成功标识) close 关闭弹框 成功失败回调字段说明: 字段名 说明 code 状态码 ticket 成功标识 状态码code字段定义说明: 失败的状态页面会直接重新刷新,进行再次验证。 字段名 说明 0 成功,可以获取 ticket 1 验证数据格式有误 2 验证失败 3 验证动作超时 4 验证码版本不对 在自定义的.js 文件中,监听事件,代码如下: 2.1 打开弹框: html // 点击打开弹框 login: function () { this.setData({ captchaShow: true }) }, // 验证码成功回调 captchaSuccess: function (data) { console.log('验证码成功回调token:', data.detail) //获取验证码token,用于后端验证码校验 // code and ticket const detail data.detail this.setData({ ticket: data.detail.ticket, captchaShow: false, }) }, // 验证码关闭回调 captchaClose: function () { this.setData({ captchaShow: false, }) } })