微信小程序

验证码依赖设备指纹检测设备环境,本文档描述了设备指纹插件和验证码插件的集成方式

小程序管理后台添加插件

  • 登录微信公众平台,点击左侧下方 设置 菜单
  • 进入设置页面,点击 第三方设置 标签页
  • 插件管理 模块中,点击 添加插件 按钮
  • 搜索设备指纹插件 wxfp ,选择插件,完成添加。同样方式搜索 同盾智能验证 并完成添加。

由于申请插件后,插件管理者微信第二天才能收到申请提醒。所以申请后,可以直接联系运营,及时通过申请。

小程序代码集成

1. 小程序 app.json 里声明插件

{

  "plugins": {
    "tdfp-plugin": {
      "version": "1.7.2",
      "provider": "wxc3b909c3d24c5417"
    },
    "tdcaptcha-plugin": {
      "version": "1.5.3",
      "provider": "wxfd9bc9da56439da8"
    }
  },
  
}

2. 获取设备指纹 blackbox

在需要设备指纹的页面,如 pages/index/index.js 中,引用插件:

const fpPlugin = requirePlugin('tdfp-plugin')

onLoad 函数中获取设备指纹blackbox,只需要获取一次。

// 示例
onLoad: function() {
    const that = this;
    // partnerCode-合作方标识,由同盾分配, appName-应用标识,由同盾分配
    const fmagent = new fpPlugin.FMAgent({partnerCode:"", appName:"", env:"PRODUCTION"}) 
  
    fmagent.getInfo({
      page: that,
      mode: 'plugin',
      // 如果 openid 或者 unionid 为空或者 undefined,请勿加密上传,传空字符串即可
      // 如果您开通了 unionid 功能,请传入加密的用户 unionid,
      // 请传入加密的用户 openid(需保证加密后的 openid 与原始 openid 是一一对应关系)
      openid: '', 
      unionid: '', 
      noClipboard: true, // 不采集剪切板信息
      success: function (res) {
        // 获取blackbox成功回调,res即设备指纹blackbox
        // 可以setData保存到页面,传给验证码API使用
        that.setData({blackbox: res});
      }
    })
}

设备指纹 API 参数说明

参数类型是否
必填
描述示例
pageObject当前所在的page对象或component对象that
modeString当前对接模式'plugin'
openidString加密后的用户openid;
加密算法可以随意选择,请确保加密前后一一对应,建议使用MD5或SHA256;
没有值,请传空字符串
ef54040ea***58fe66157
unionidString加密后的用户unionid;
加密算法可以随意选择,请确保加密前后一一对应,建议使用MD5或SHA256;
没有值,请传空字符串
ef54040ea***58fe66157
timeoutNumber获取blackbox超时时间,单位毫秒;
默认2500,包括采集和发送请求的总时长,范围:2500-16000
6000
noClipboardBoolean是否不采集剪切板;
采集剪切板可部分增强设备指纹恢复能力,部分手机系统会提示采集了剪切板;
默认true,不采集
true
successFunction获取设备指纹blackbox成功回调function(res){/res即blackbox/}

3. 引用 tdcaptcha 组件

在需要验证码页面的 .json 文件中引用 tdcaptcha 组件

{
  "usingComponents": {
    "tdcaptcha": "plugin://tdcaptcha-plugin/tdcaptcha"
  }
}

4. 添加 tdcaptcha 组件节点

在需要验证码页面的 .wxml 文件中添加 tdcaptcha 组件

<tdcaptcha id="td-captcha" />

5. 触发验证

在需要验证码页面的 .js 文件中触发验证码

// 示例
triggerCaptcha: function() {
    // 获取验证码插件实例,#id与wxml文件中组件节点id一致
    const td = this.selectComponent('#td-captcha');
  
    // 调用API,触发验证码弹出
    td.captcha.triggerCaptcha({
      partnerCode: '', // 合作方标识,由同盾分配
      appName: '', // 应用标识,由同盾分配
      env: 1, // 1-线上环境 0-测试环境
      blackbox: this.data.blackbox || "",  // 设备指纹blackbox
      onSuccess:this.onSuccess, // 自定义验证成功回调
      onFail: this.onFail, // 自定义验证失败回调,非必填
    });
},

onSuccess: function(validateToken) {
  // 验证通过
  // 将validateToken传递至服务端二次校验
},

onFail: function(msg) {
  // todo
},

验证码 API 参数说明

参数类型是否
必填
描述
partnerCodeString同盾合作方标识
appNameString同盾合作方应用标识
envNumber1:线上生产环境   0:测试环境
blackboxString设备指纹插件获取到的blackbox
maskCloseNumber点击蒙层是否关闭验证码 0:否   1:是
onSuccessFunction验证成功的回调函数,回调函数会把validateToken传递过来
onFailFunction验证失败的回调函数;
验证失败会返回新的验证码,此时onFail回传msg为 'opFail',一般不需要另行处理
onCloseFunction验证码弹窗关闭的回调函数,可根据需要自定义
mfaIdString如果您已对接MFA产品,请将MFA流程中接口获取的mfa_id赋值给验证码配置参数, 未对接可以忽略

备注

  1. 插件版本更新后,小程序管理者会收到更新通知,可体验新版插件并更新发布小程序,小程序发布不需要再审核
  2. 验证码图片使用canvas渲染,模拟器存在层级过高展示异常,请使用 预览模式 集成测试。