The verification service uses the fingerprint to detect whether it is a risky device. This document describes how to integrate the fingerprint plug-in and verification plug-in.

Add plug-in on the WeChat Official Accounts Platform

• Sign in to the WeChat official accounts platform and click the Settings menu on the lower left side
• Go to the Settings page and click the Vendor Settings tab
• In the Plug-in Management module, click the Add Plug-in button
• Search the fingerprint plug-in wxfp, select the plug-in, and complete the addition. The same way to search 同盾智能验证 and complete the addition.

After applying for the plug-in, the plug-in manager can only receive the application reminder on WeChat the next day. So after the application, you can directly contact the operator of TD and pass the application in time.

Mini program integration

1. Declare plug-ins in app.json

{

  "plugins": {
    "tdfp-plugin": {
      "Version": "1.6.7",
      "provider": "wxc3b909c3d24c5417"
    },
    "tdcaptcha-plugin": {
      "Version": "1.3.0",
      "provider": "wxfd9bc9da56439da8"
    }
  },

}

2. Get the blackbox

Import plug-ins in the page that requires the fingerprint, such as pages/index/index.js:

const fpPlugin = requirePlugin('tdfp-plugin')

Then get the blackbox in the onLoad method, the blackbox only needs to get once:

// Example
onLoad: function() {
  const that = this;
  // partnerCode-Partner identifier, assigned by the TD, appName-Application identifier, assigned by TD
  const fmagent = new fpPlugin.FMAgent({partnerCode:"", appName:"", env:"PRODUCTION"})

  fmagent.getInfo({
    page: that,
    mode: 'plugin',
    // If openid or unionid is empty or undefined, do not encrypt it, pass an empty string
    // If you have unionid, please pass it with the encrypted form,
    // Please pass the encrypted openid(ensure that the encrypted openid is one-to-one corresponding to the original openid).
    openid: '',
    unionid: '',
    noClipboard: true, // do not collect the clipboard information
    success: function (res) {
      // Get the blackbox success callback, res is the blackbox string
      // You can save it to the page data, and pass to the verification API
      that.setData({blackbox: res});
    }
  })
}

fmagent.getInfo API Parameter Description

Parameter	Type	Required	Description	Example
mode	String	Yes	integrated mode	'plugin'
page	Object	Yes	current page object or a component object	that
openid	String	Yes	the encrypted user openid; you can choose any encryption algorithm, please ensure that the encrypted one-to-one correspondence relationship, we recommend using MD5 or SHA256; if the value is null, please send an empty String	ef54040ea***58fe66157
unionid	String	No	the encrypted user unionid; you can choose any encryption algorithm, please ensure that the encrypted one-to-one correspondence relationship, we recommend using MD5 or SHA256; if the value is null, please send an empty String	ef54040ea***58fe66157
timeout	Number	No	API timeout (2500ms by default)	6000
noClipboard	Boolean	No	if don't collect the clipboard data (some mobile phones will give a reminder with "get the data of your clipboard").True by default.	true
success	Function	Yes	The callback function, the parameter of the function is the blackbox.	function(res){// res is the blackbox}

3. Add reference components

Add the tdcaptcha component to the .json file that requires the captcha challenge

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

4. Add tdcaptcha dom element

Add the tdcaptcha component node to the .wxml file that requires the captcha challenge

<tdcaptcha id="td-captcha" />

5. Trigger the captcha

Trigger the captcha to verify in the .js file of the page that requires the captcha challenge

// Example
triggerCaptcha: function() {
   // Get an instance of the captcha plug-in. Below id-selector should match the id of the node in the .wxml file
   const td = this.selectComponent('#td-captcha');

   // Invoke the API and trigger the captcha to pop up
   td.captcha.triggerCaptcha({
      partnerCode: '', // Partner identifier, assigned by TD
      appName: '', // Application identifier, assigned by TD
      env: 1, // 1-production, 0-test environment
      blackbox: this.data.blackbox || '',  // the blackbox obtained from the fingerprint
      onSuccess: this.onSuccess, // success callback from the verification
      onFail: this.onFail, // failure callback from the verification
      onClose: this.onClose, // callback function after the captcha dialog closed
   });
},

onSuccess: function(validateToken) {
   // The verification is successful
   // Pass the validateToken to the server for secondary verification
},

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

The Captcha API Parameter Description

Parameter	Type	Description	Required
partnerCode	String	partner identifier, assigned by TD	Yes
appName	String	application identifier, assigned by TD	Yes
env	Number	1: production environment; 0: test environment	No
blackbox	String	the blackbox obtained from the fingerprint	No
maskClose	Number	1: the captcha dialog can be closed by clicking the mask layer; 0: can not	No
onSuccess	Function	Callback function after verifying success, the callback parameter isvalidateToken which you need to pass to the backend service to recheck.	Yes
onFail	Function	Callback function after verifying failed. The captcha will refresh after verifying failure, and the callback parameter will return 'opFail', which generally does not need further processing. For other errors, such as too many attempts to, request timeout, we suggest giving a toast to the user.	No
onClose	Function	Callback function after the captcha closed	No
mfaId	String	If you have connected to the MFA product (the parameter can be ignored if the MFA is not connected), please set the mfa_id which is obtained from the MFA process to the configuration parameter	No

Note

1. After the plug-in version is updated, the manager of the mini program will receive the update notice and can experience the new version of the plug-in, update, and release the mini program. The release of the mini program does not need to be reviewed.
2. The captcha picture is rendered by canvas API, but the emulator is abnormally displayed at too high a level. Please use preview mode for the integration test.