微信小程序

2021.07.20 16:32:36

    开通验证码服务

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

    插件式接入

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

    添加插件

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

    image

    集成插件

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

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

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

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

    使用插件

    API说明

    组件参数
    可配项 类型 默认值 描述
    captchaId String 验证码ID
    lang String 'zh-CN' 语言
    width String 'auto' 验证码弹框宽度,接受单位'rpx'/'px'/'rem'
    customStyles Object null 自定义验证码样式,包含imagePanel/controlBar/gap/popTitle/popPadding,详情查看下面
    customTexts Object null 自定义文本,用户可指定文本使用自定义,详情见下面customTexts配置项
    extraData String/Function 如果需要在check阶段透传业务数据,可以使用extraData配置,支持字符串。当调用二次校验结果接口时,会原样返回该字段,详见后端响应参数

    customStyles配置项

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

    customTexts的结构如下:

      {
        LOADING: String, // 加载中...
        LOAD_FAIL: String, // 加载失败
        VERIFY_SUCCESS: String, // 验证成功
        VERIFY_ERROR: String, // 验证失败,请重试
        VERIFY_OUT_OF_LIMIT: String, // 失败过多,点此重试
        CLICK_BUTTON: String, // 点此进行验证
        CLICK_IN_TURN: String, // 请依次点击
        SLIDE_TIP: String, // 向右拖动滑块填充拼图
        SMS_TIP: String, // 请按照上方图片提示完成验证
        WAIT_FOR_SMS: String, // 等待短信验证,剩余
        POPUP_TITLE: String // 请完成安全验证
      }
    
    组件事件
    事件名 参数 描述
    error 验证码配置失败
    init 验证码配置成功(初始化)
    ready 验证码准备就绪
    verify err,validate 验证码验证完成
    close 验证码弹框准备关闭
    组件方法
    • popup: 展示验证码,非智能无感知验证码使用
    • verify: 开始验证,仅智能无感知验证码可使用
    • 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) {
        // 如果使用了 mpvue,ev.detail 需要换成 ev.mp.detail
        if(!ev.detail[0]) {
            // 验证成功
    	console.log('verify:', ev.detail[1])
        } else {
            // 验证失败
    				  // 请不要在验证失败中调用reset,验证码内部会进行相应处理
        }
      },
    
      // 验证码初始化成功回调
      handlerInit: function () {
        console.log('验证码初始化成功')
      },
      
      // 验证码准备就绪
      handlerReady: function () {
        console.log('验证码准备就绪')
      },
      
      // 验证码出错
      handlerError: function (ev) {
        console.log(ev)
      }
    })
    
    智能无感知验证码示例代码

    在页面.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').verify()
        // 进行业务逻辑,若出现错误需重置验证码,执行以下方法
        // if (error) {
        //     this.selectComponent('#captcha').reset()
        // }
      },
    
      // 验证码验证结果回调
      handlerVerify: function (ev) {
        if(!ev.detail[0]) {
          // 验证成功
          console.log('verify:', ev.detail[1])
        } else {
          // 当前次验证失败
          // 请不要在验证失败中调用reset,验证码内部会进行相应处理
        }
      },
    
      // 验证码初始化成功回调
      handlerInit: function () {
        console.log('验证码初始化成功')
      },
      
      // 验证码准备就绪
      handlerReady: function () {
        console.log('验证码准备就绪')
      },
      
      // 验证码出错
      handlerError: function (ev) {
        console.log(ev)
      }
    })
    

    小程序插件使用案例

    1. 由于业务原因从易盾申请到的id用变量赋值(动态获取),建议使用下述接入方式
      // wxml
      <ne-captcha
        v-if="captchaId"
        id="captcha"
        captcha-id="{{captchaId}}"
        width="320px" />
    
      // js
      Page({
        data: {
          captchaId: ''
        },
        yourMethod () {
          // 业务处理
          this.setData({
            captchaId: '从易盾申请到的id'
          })
        }
      })
    
    1. 使用自定义 包括样式自定义和文案自定义
      // wxml
      <ne-captcha
        id="captcha"
        captcha-id="从易盾申请到的id"
        width="640rpx"
        custom-styles="{{customStyles}}"
        custom-texts="{{customTexts}}"
        binderror="handlerError"
        bindverify="handlerVerify"></ne-captcha>
    
      // js
      Page({
        data: {
          customStyles: {
            imagePanel: {
              borderRadius: '2px'
            },
            controlBar: {
              height: '50px'
            },
            gap: '30px',
            popPadding: '15px'
          },
          customTexts: {
            LOADING: '努力加载中...'
          }
        },
    
        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 {
            // 当前次验证失败
          }
        },
    
        // 验证码出错
        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)参数说明

    参数名 类型 说明
    ret Number 0为验证成功,1为验证失败
    validate String 仅验证成功时会有,验证成功的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