支付宝小程序支持四种验证码类型：

• 智能无感知
• 滑块拼图
• 文字点选
• 图标点选

平台支持

支付宝小程序兼容1.20.1以上版本的基础库。

环境准备

开发环境

• 申请支付宝开发者账号
• 安装支付宝开发者工具
• 主机装有node

项目开发配置

• 请在开发设置-服务器域名白名单添加如下域名： c.dun.163.com、c.dun.163yun.com
• 请在支付宝小程序开发者工具中，详情-项目配置下，勾选启用component2编译

资源集成

• 安装依赖 在根目录下执行下述命令；或者使用开发者工具安装，参考支付宝官网

    npm install @yidun/alipay-ne-captcha

• 在使用页面对应的 JSON 中引入验证码组件

{
  "usingComponents": {
    "ne-captcha": "@yidun/alipay-ne-captcha"
  }
}

快速调用示例

在 index 页面集成验证码：

• index.json

  {
    "usingComponents": {
      "ne-captcha": "@yidun/alipay-ne-captcha"
    }
  }
  

• index.axml

  <view>
      <ne-captcha
          ref="saveCaptchaRef"
          captchaId="业务ID"
          width="640rpx"
          onVerify="handleCaptchaVerify"></ne-captcha>
      <button size="default" type="primary" onTap="tryToVerify">验证</button>
  </view>
  

• index.js

  Page({
      saveCaptchaRef (ref) {
          // 获取组件实例
          this.captchaIns = ref
      },
      tryToVerify () {
          this.captchaIns.popup()
      },
      handleCaptchaVerify (ev) {
          const [err, validate] = ev
          if (!err) {
              // TODO
              // 验证成功，进行后续的业务逻辑，如登录等
              // validate 用于服务端二次验证
          }
      }
  })
  

SDK方法说明

使用组件

支付宝小程序验证码提供验证码组件，在使用的页面引入即可。

代码说明

• axml

    <ne-captcha ref="saveCaptchaRef" captchaId="业务ID"></ne-captcha>

• 获取组件实例

    Page({
        saveCaptchaRef (ref) {
            this.captchaIns = ref // ref为支付宝小程序获取组件实例的方法
        }
    })

注意：在支付宝小程序开发者工具中，请务必在详情-项目配置下，勾选启用component2编译

组件属性说明

属性	类型	是否必填	默认值	描述
captchaId	String	是	无	验证码业务ID
width	Number |String	否	'auto'	验证按钮宽度；类型为 String 时，支持后缀 rpx、px、rem；类型为 Number 时，内部会将其转换成 rpx 单位的值
lang	String	否	zh-CN	验证码使用的语言
timeout	Number	否	6000	请求超时时间，单位为毫秒
customStyles	Object	否	null	自定义样式，详见自定义样式配置
customTexts	Object	否	null	自定义文本，用户可指定文本使用自定义，详见自定义文案配置
onInit	Eventhandle	否	无	验证码配置（初始化）成功触发的事件
onError	Eventhandle	否	无	验证码配置失败触发的事件
onReady	Eventhandle	否	无	验证码准备就绪（可进行验证）触发的事件
onVerify	Eventhandle	否	无	验证码一次验证完成触发的事件
onClose	Eventhandle	否	无	验证码弹出关闭触发的事件

注意：自定义功能仅高版本套餐支持，详情请咨询客服

• 自定义样式：customStyles

为更好地理解自定义样式相关内容，请先了解我们对易盾验证码弹框界面组成部分的定义

自定义样式数据结构如下：

- customStyles (Object)
    - imagePanel (Object)
        - borderRadius (String): imagePanel 的圆角大小
    - controlBar (Object)
        - borderRadius (String): controlBar 的圆角大小
        - height (String): controlBar 的高度
    - gap (String): imagePanel 和 controlBar 的间隔
    - popTitle (Object)
        - height (String): 弹框头部高度
    - popPadding (String): 弹框体内边距

使用示例：

    <ne-captcha
        captchaId="业务ID"
        width="640rpx"
        customStyles="{{customStyles}}"></ne-captcha>

    Page({
        data: {
            customStyles: {
                imagePanel: {
                    borderRadius: '2rpx'
                },
                controlBar: {
                    height: '80rpx'
                }
            }
        }
    })

• 自定义文案：customTexts

属性	原文案（简体中文）
LOADING	加载中...
LOAD_FAIL	加载失败
VERIFY_SUCCESS	验证成功
VERIFY_ERROR	验证失败，请重试
VERIFY_OUT_OF_LIMIT	失败过多，点此重试
CLICK_BUTTON	点此进行验证
CLICK_IN_TURN	请依次点击
SLIDE_TIP	向右拖动滑块填充拼图
POPUP_TITLE	请完成安全验证

使用示例：

<ne-captcha
    captchaId="业务ID"
    width="640rpx"
    customTexts="{{customTexts}}"></ne-captcha>

    Page({
        data: {
            customTexts: {
                LOADING: '加载中，请耐心等待',
                LOAD_FAIL: '加载失败，刷新重试'
            }
        }
    })

• 多语言：lang 支持语音种类见下表：

语种	简体中文	英语	繁体中文	日语	韩语	泰语	越南语	法语	俄语
lang	zh-CN	en	zh-TW	ja	ko	th	vi	fr	ru

事件参数说明：

• onVerify - 事件对象（event）说明：

- event (Array)
    - error (Error): 验证失败的错误信息
    - validate (String): 二次验证信息

进行验证码验证

验证需区分验证码的类型，若验证码为常规类型，则调用 popup 方法进行验证；若验证码为智能无感知，则调用 verify 方法进行验证。

代码说明

• 常规验证码

    this.captchaIns.popup()  // this.captchaIns 为验证码组件实例

• 智能无感知

    this.captchaIns.verify() // this.captchaIns 为验证码组件实例

刷新验证码（可选）

当上一轮验证成功后，若业务需要重置验证码，重新进行验证时，可以调用 reset 方法。

注意：请不要在验证失败时调用，失败时验证码会自动刷新。

代码说明

    this.selectComponent('#captcha').reset()

错误码

code	含义
200	校验未通过，是因为业务错误，包含超限
501	接口请求失败，包括网络原因等
503	图片请求失败
1000	未知错误