百度小程序

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

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

支持类型

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

集成

在小程序根目录中执行命令安装npm包(若项目不存在package.json,请npm init)

  npm install @yidun/swan-ne-captcha

在引用的时候,直接使用包中 package.json 的 name 名字即可。

在页面.json中引入自定义组件。

"usingComponents": {
    "ne-captcha": "swan-ne-captcha"
}

使用

属性

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

customStyles

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

事件

事件名参数描述
error验证码配置失败
init验证码配置成功(初始化)
ready验证码准备就绪
verifyerr,validate验证码验证完成
close验证码弹框准备关闭

组件方法

popup: 展示验证码(支持非智能无感知验证码调用此方法)

verify: 展示验证码(仅支持智能无感知验证码调用此方法)

reset: 重置验证码,获取新的验证信息

getCaptchaType: 获取验证码类型

组件接入方式

在页面.swan中使用插件

<view>
  <ne-captcha
    compid="neCaptcha"
    id="neCaptcha"
    captcha-id="yourCaptchaID"
    width="640rpx"
    binderror="handleConfigErr"
    bindverify="handleVerify"></ne-captcha>
  <view>
    <button bindtap="openCaptcha">点击验证</button>
  </view>
</view>

在页面.js中监听事件

Page({
  handleConfigErr (ev) {
    // do something with error
  },
  openCaptcha () {
    this.selectComponent('#neCaptcha').popup()
  },
  handleVerify (ev) {
    const [error, validate] = ev.detail
    if (error) return
    // TODO:验证成功处理
    console.log(validate)
  }
})

域名

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

效果演示

百度小程序效果