前提条件

• 已开通Web应用防火墙（边缘云版）。

• 已新增域名并成功接入WAF，具体操作请见WAF接入。

• 开通套餐为标准版及以上版本，支持验证码功能。

• 需先完成验证码配置。暂时未开放控制台，请通过提交工单给天翼云客服，由其人工操作开启。

接入说明

1、添加插件

• 用管理员身份登录微信公众平台 ，且需使用接入小程序的相关账号。

• 选择设置 > 第三方设置 > 添加插件，在搜索框内输入关键字“ AOne 验证码”查找插件，并单击添加。

2、集成插件

引入验证码小程序插件。 使用验证码插件前，需要在 app.json 中声明验证码小程序插件，如下：

{
  "plugins": {
    "captcha-plugin": {
      "version": "1.3.0",
      "provider": "wx10dca5c3b7d08b57"
    }
  }
}

引入验证码小程序组件。 需要在页面.json 文件中需要引入自定义组件，js 代码如下：

{
  "usingComponents": {
    "a-one-captcha": "plugin://captcha-plugin/a-one-captcha"
  }
}

3、使用小程序插件

• 使用原生小程序语言接入时，需要在自定义的.wxml 文件中，使用验证码插件，wxml 代码如下：

<!-- http-domain：验证码要拦截的域名，域名已经配置过才会生效 -->
<a-one-captcha
  id="captcha"
  http-domain="'https://www.ctyun.com"
  bindsuccess="captchaSuccess"
  bindclose="captchaClose"
  captchaShow="{{captchaShow}}"
/>
<button bindtap="login">登录</button>

组件参数说明：

组件方法说明：

成功失败回调字段说明：

状态码code字段定义说明：

失败的状态页面会直接重新刷新，进行再次验证。

• 在自定义的.js 文件中，监听事件，代码如下： 2.1 打开弹框：

 // 点击打开弹框
  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,
    })
  }
})