支付宝小程序

开通验证码服务,获取产品秘钥及验证码ID

登录易盾用户中心,在验证码服务中新建或选择已有产品,创建验证码ID,获取验证码的captchaId。

支持类型

支持四种验证码类型:
① 智能无感知
② 滑块拼图
③ 文字点选
④ 图标点选

引入

在根目录执行下述命令,可参考支付宝官网

  npm install @yidun/alipay-ne-captcha

在页面或组件的 json 文件中声明引组件

{
  "usingComponents": {
    "ne-captcha": "path-to-component/ne-captcha/index"
  }
}
注意:在支付宝小程序开发者工具中,请务必在详情-项目配置下,勾选启用component2编译。

使用

<view>
  <ne-captcha
    ref="saveCaptchaRef"
    captchaId="CAPTCHA_ID"
    width="320rpx"
    onError="handlerError"></ne-captcha>
  <view>
    <button onTap="handleOpenCaptcha">点击验证</button>
  </view>
</view>
Page({
  saveCaptchaRef (ref) {
    this.captchaRef = ref
  },
  handlerError (error) {},
  handleOpenCaptcha () {
    this.captchaRef.popup()
  }
})

配置项

可配项类型默认值描述
captchaIdString验证码ID
langString'zh-CN'语言
widthString'auto'验证码弹框宽度,接受单位'rpx'/'px'/'rem'/'%'
customStylesObjectnull自定义验证码样式,详情查看下面

注意: 小程序的超时设置可在 app.json 全局配置

customStyles

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

事件

事件名参数描述
onError验证码配置失败
onInit验证码配置成功(初始化)
onReady验证码准备就绪
onVerifyerr, validate验证码验证完成
onClose验证码弹框准备关闭

组件方法

  • popup: 展示验证码(支持非智能无感知验证码调用此方法)
  • verify: 展示验证码(仅支持智能无感知验证码调用此方法)
  • reset: 重置验证码,获取新的验证信息

域名

  • 服务器域名:c.dun.163yun.com、c.dun.163.com
  • 图片域名:necaptcha.nosdn.127.net、nos.netease.com