WeChat

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

ParameterTypeRequiredDescriptionExample
modeStringYesintegrated mode'plugin'
pageObjectYescurrent page object or a component objectthat
openidStringYesthe 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
unionidStringNothe 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
timeoutNumberNoAPI timeout (2500ms by default)6000
noClipboardBooleanNoif don't collect the clipboard data (some mobile phones will give a reminder with "get the data of your clipboard").True by default.true
successFunctionYesThe 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

ParameterTypeDescriptionRequired
partnerCodeStringpartner identifier, assigned by TDYes
appNameStringapplication identifier, assigned by TDYes
envNumber1: production environment; 0: test environmentNo
blackboxStringthe blackbox obtained from the fingerprintNo
maskCloseNumber1: the captcha dialog can be closed by clicking the mask layer; 0: can notNo
onSuccessFunctionCallback function after verifying success, the callback parameter isvalidateToken which you need to pass to the backend service to recheck.Yes
onFailFunctionCallback 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
onCloseFunctionCallback function after the captcha closedNo
mfaIdStringIf 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 parameterNo

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.