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

小程序管理后台添加插件

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

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

小程序代码集成

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

{

  "plugins": {
    "tdfp-plugin": {
      "version": "1.6.7",
      "provider": "wxc3b909c3d24c5417"
    },
    "tdcaptcha-plugin": {
      "version": "1.4.0",
      "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 参数说明

参数	类型	是否 必填	描述	示例
page	Object	是	当前所在的page对象或component对象	that
mode	String	是	当前对接模式	'plugin'
openid	String	是	加密后的用户openid； 加密算法可以随意选择，请确保加密前后一一对应，建议使用MD5或SHA256； 没有值，请传空字符串	ef54040ea***58fe66157
unionid	String	否	加密后的用户unionid； 加密算法可以随意选择，请确保加密前后一一对应，建议使用MD5或SHA256； 没有值，请传空字符串	ef54040ea***58fe66157
timeout	Number	否	获取blackbox超时时间，单位毫秒； 默认2500，包括采集和发送请求的总时长，范围：2500-16000	6000
noClipboard	Boolean	否	是否不采集剪切板； 采集剪切板可部分增强设备指纹恢复能力，部分手机系统会提示采集了剪切板； 默认true，不采集	true
success	Function	是	获取设备指纹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 参数说明

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

备注

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