小程序

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

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

插件式接入

【注意】插件式只支持滑块拼图、文字点选这2种类型验证码;若需要使用智能无感知、图标点选、短信上行等类型验证码请使用跳转式接入。

添加插件

用管理员身份登录微信公众平台,请使用需要接入小程序的相关账号,依次点击:设置-第三方设置-添加插件,然后输入关键字“网易易盾验证码”并搜索,点击添加,如下图:

image

集成插件

声明插件:在app.json中声明插件

{
  "plugins": {
    "captcha": {
      "version": "1.0.0",
      "provider": "wxb7c8f9ea9ceb4663"
    }
  }
 }

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

{
  "usingComponents": {
    "ne-captcha": "plugin://captcha/ne-captcha"
  }
}

使用插件

API说明

组件参数
可配项类型默认值描述
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: 展示验证码
  • reset: 重置验证码,获取新的验证信息

小程序中使用

在页面.wxml中使用插件

<ne-captcha
    id="captcha"
    captcha-id="从易盾申请到的id"
    width="320px"
    bindverify="handlerVerify"
    bindinit="handlerInit"
    bindready="handlerReady"
    binderror="handlerError" />
<button bindtap='login'>登陆</button>

在页面.js中监听事件

Page({
  data: {},

  login: function () {
    this.selectComponent('#captcha').popup()
    // 进行业务逻辑,若出现错误需重置验证码,执行以下方法
    // if (error) {
    //     this.selectComponent('#captcha').reset()
    // }
  },

  // 验证码验证结果回调
  handlerVerify: function (ev) {
    if(!ev.detail[0]) {
        // 验证成功
	console.log('verify:', ev.detail[1])
    } else {
        // 验证失败
    }
  },

  // 验证码初始化成功回调
  handlerInit: function () {
    console.log('验证码初始化成功')
  },
  
  // 验证码准备就绪
  handlerReady: function () {
    console.log('验证码准备就绪')
  },
  
  // 验证码出错
  handlerError: function (ev) {
    console.log(ev)
  }
})

跳转式接入

小程序使用限制

需要用户确认跳转,从小程序 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel。

每个小程序可跳转的其他小程序数量限制为不超过 10 个,从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过10个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见配置。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList。

详见小程序说明地址:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

小程序唤起验证码

通过navigator组件跳转至验证码小程序。用户完成或关闭验证码后,将返回至调用方的小程序。

<!-- 由于小程序限制,只能通过navigator跳转到验证码的小程序 -->
<!-- 如果跳转前需要校验表单,请先将button的disabled属性设为true,
     同时表单中使用bind:input事件校验合法性,
     完成后再将button的disabled属性设为false
     captchaId替换成申请到的验证码captchaId -->
<navigator target="miniProgram"
  app-id="wxb7c8f9ea9ceb4663"
  path="/pages/captcha/index"
  extra-data="{{ { captchaId: 'captchaId' } }}">
    <button>验证</button>
</navigator>

app.js获取验证结果

在网易易盾验证码中验证。

关联小程序

验证成功后,验证码小程序页面关闭,验证结果会返回给调用验证码的小程序页面。由于小程序间相互跳转过程中产生的数据仅能在app.js中获取到,故需要在app.js的onShow中添加以下代码,来捕获验证结果。

App({
  // ...
  onShow: function(options) {
    // 解决各类回调的兼容问题
    if (!this.captchaValidateExpire) this.captchaValidateExpire = {}

    if (options.scene === 1038 && options.referrerInfo.appId === 'wxb7c8f9ea9ceb4663') {
      const result = options.referrerInfo.extraData;
      if (result.ret === 0) {
        const validate = result.validate
        if (!this.captchaValidateExpire[validate]) {
          this.globalData.captchaResult = result
          this.captchaValidateExpire[validate] = true
        }
      } else {
        // 验证失败
      }
    }
  },
  // ...
})

验证结果(result)参数说明

参数名类型说明
retNumber0为验证成功,1为验证失败
validateString仅验证成功时会有,验证成功的code,用于后台校验验证合法性

将验证结果返回至服务端校验

在小程序页面的onShow阶段将验证结果及待提交的表单数据一起提交到服务器,进行校验。

const app = getApp()

Page({
  data: {
    // ...
  },
  onShow() {
    const captchaResult = app.globalData.captchaResult
    app.globalData.captchaResult = null // 验证码的验证code是一次性的,取完需要置空
    if (captchaResult && captchaResult.ret === 0) {
      // 将验证码的结果返回至服务端校验
      // const validate = captchaResult.validate
      // ...
    }
  },
  // ...
})
Online Chat Tel:95163223