前提條件

• 已經訂購邊緣安全加速平臺-安全與加速服務，若未訂購，請參見服務開通。
• 在控制臺新增域名，請參見添加服務域名。
• 開通套餐為高級版及以上版本，支持驗證碼功能。
• 需先完成驗證碼配置。暫時未開放控制臺，請通過提交工單給天翼云客服，由其人工操作開啟。
• 目前支持小程序原生語言接入

注意
請勿在“微信開發者工具”的“游客模式”下接入驗證碼。

接入說明

1、添加插件

• 用管理員身份登錄微信公眾平臺 ，且需使用接入小程序的相關賬號。
• 選擇設置 > 第三方設置 > 添加插件，在搜索框內輸入關鍵字“ AOne 驗證碼”查找插件，并單擊添加。

2、集成插件

引入驗證碼小程序插件。 使用驗證碼插件前，需要在 app.json 中聲明驗證碼小程序插件，如下：

{
  "plugins": {
    "captcha-plugin": {
      "version": "1.0.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="'//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,
    })
  }
})