> >

概述及资源

插件与 qq 小程序自定义组件使用方式一致,本文主要描述极验小程序插件的使用流程，文档中的接入 demo 可在 GitHub 上获取 (demo 地址)。

环境要求

条目
开发工具	qq 开发者工具
调试基础库	1.15.2

安装

准备工作

1.服务端部署完成(服务端部署文档)

2.小程序后台添加合法域名 https://gcaptcha4.geetest.com

插件获取

组件下载

下载组件后添加到项目内

使用插件

使用方法和普通自定义组件一致。在页面 .json 文件定义需要引入的自定义组件。

代码示例:

{
  "usingComponents": {
    "captcha4": "/components/captcha4/captcha4"
  }
}

模板插入

qml 中插入 captcha4 模板,示例中的参数为必传参数，其它拓展参数参考 api 文档。

代码示例:

<captcha4
  id="captcha"
  qq:if="{{loadCaptcha}}"
  captchaId="{{captchaId}}"
  onSuccess="captchaSuccess"
/>

初始化

在需要渲染插件的时候，使用 setData 传入必须的参数进行初始化。

代码示例:

onLoad: function() {
     this.setData({ loadCaptcha:true,captchaId:'wxxxxxxxxxxxx'})
 }

获取成功凭证

成功完成验证码后，会触发用户自定义的 captchaSuccess 函数，将验证结果存储在 result(这里用户可自定义)，等待二次验证时提取上传,无按钮模式时可以直接在此处进行二次验证。

代码示例:

captchaSuccess:function(result){
  console.log("captcha-Success!");
    this.setData({
        result: result.detail
    })
  }

二次验证

用户点击提交按钮触发提交，进行二次验证。

代码示例:

captchaValidate: function(){
    var self = this;
    var data = self.data.result; // 获取完成验证码时存储的验证结果
    if(typeof data !== 'object'){
      console.log("请先完成验证！")
      return
    }
    // 将结果提交给用户服务端进行二次验证
    qq.request({
      url: "用户业务接口）",
      method: 'POST',
      dataType: 'json',
      data: Object.assign({},data, {
        captcha_id: self.data.captchaId
      }),
      success: function (res) {
        qq.showToast({
          title: res.data.result
        })
      },
      fail: function () {
        console.log('error')
      }
    })
  }

配置参数

这里说的配置参数，是指初始化时调用 setData 时,传入的值。

以下为必需配置的参数，建议按照上述示例代码方式填写：

参数	类型	说明
captchaId	字符串	验证 id，极验后台申请得到

以上是必需配置的参数，可选配置参数参考 MiniProgram API 的参数配置。

概述及资源

环境要求

安装

准备工作

插件获取

使用插件

模板插入

初始化

获取成功凭证

二次验证

配置参数

体验 demo