支付宝小程序

2021.10.19 15:54:13

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

    ① 智能无感知

    ② 滑块拼图

    ③ 文字点选

    ④ 图标点选

    平台支持

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

    环境准备

    开发环境

    1. 申请支付宝开发者账号
    2. 安装支付宝开发者工具
    3. 主机装有node

    项目开发配置

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

    资源集成

    1. 安装依赖 在根目录下执行下述命令;或者使用开发者工具安装,参考支付宝官网
        npm install @yidun/alipay-ne-captcha
    
    1. 在使用页对应的 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方法说明

    1. 使用组件

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

    代码说明

    • 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 时,支持后缀 rpxpxrem;类型为 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): 二次验证信息
    

    2. 进行验证码验证

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

    代码说明

    • 常规验证码
        this.captchaIns.popup()  // this.captchaIns 为验证码组件实例
    
    • 智能无感知
        this.captchaIns.verify() // this.captchaIns 为验证码组件实例
    

    3. 刷新验证码(可选)

    当上一轮验证成功后,若业务需要重置验证码,重新进行验证时,可以调用 reset 方法。 注意:请不要在验证失败时调用,失败时验证码会自动刷新。

    代码说明

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

    错误码

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