Alipay

The WeChat mini program provides two integration methods: plug-in docking and SDK docking. Please select the appropriate docking method according to the comparison below

Comparison between plug-in and SDK:

1. Plug-in code does not directly provide SDK source code, does not occupy a mini program volume
2. After the new version of the plug-in is released, the manager of the mini program will receive the update notification and can experience the new version of the plug-in and update the mini program. The mini-program release does not need to be reviewed again
3. Mini program can call plug-ins, and plug-ins can no longer call other plug-ins
4. Plugins do not support earlier versions of 8-digit applets with Appids

Plug-in version

1.1 Mini program management background add plug-in

1. Login Log in to the Open platform console(https://open.alipay.com/develop/manage) to access the plug-in service under development
2. Click to order additional plug-ins
3. Search for 设备指纹插件, select plug-in, click Order, and confirm to obtain the plug-in
4. Select the authorization and bind the applet

1.2 Integrate mini program code

1.app.json declares the plugin

{


  "plugins": {
    "tdfp-plugin": {
      "version": "*", // Alipay plug-in currently only supports setting *, automatically selects the version, which version can be configured in the background
      "provider": "2021003160688029"
    }
  },


}

• Note: The tripartite framework can be added accordingly. For example, in uni-app, you can add the above declaration to the mp-alipay module of the manifest.json file

2. Initialize the plug-in js

Our device fingerprint object lives in the lifecycle of a Page (or Component), so an instance needs to be created for each page that needs to get device information. For example, in pages/index/index.js, the plugin and global variables are referenced at the top of the file:

const plugin = requirePlugin('tdfp-plugin')
const app = getApp()

Then initialize the object in the onLoad callback of the Page:

onLoad: function() {
    var that = this
    var fmagent = new plugin.FMAgent(app.globalData._fmOpt) //Some necessary configurations
    ......
}

Configuration of FMAgent
In the above code, you can see that when you initialize the object, you need to pass in a configuration object. Since this configuration should be the same throughout the App, in the demo we put the configuration in globalData of the app object, and we strongly recommend that you do the same.
partnerCode and appName are required parameters, and initialization throws an exception if none is passed.
In app.js:

App({
  ......
  globalData: {
    ......
    _fmOpt: {
      partnerCode: "", // Please fill in your partner code
      appName: "", // Please fill in your app name
      env: "PRODUCTION" // Use 'SANDBOX' for test environment and 'PRODUCTION' for production environment
    }
  }
})

• Note: After initialization, you can see a log on the console:

FMAgent: init succeeded.

3. Get BlackBox
   After the device fingerprint object is initialized, the device information can be obtained. Our device fingerprint SDK adopts a call mode similar to WeChat API and supports passing success, fail, complete callback, and other configuration fields:

fmagent.getInfo({
  page: that,
  mode:'plugin',
  // If you have the unionid function enabled, pass in the encrypted user unionid
  // Please pass in the encrypted openid of the user (ensure that the encrypted openid is one-to-one corresponding to the original openid).
  unionid: '', 
  success: function (res) {},//Successful callback, res is BlackBox string
  fail: function (res) {},// Failure callback, res for various exception objects
  complete: function (res) {} // Complete callback, res for BlackBox string or various exception objects
})

2. SDK Mode

1. Adding a Domain Name

In Settings - development Settings - server domain request legal domain add:

Note:

• If the online version applet will only access the same production environment, add the first production domain name
• The Fingerprint SDK for Tongdun Alipay mini program devices only supports wechat clients with the version of the client base library (SDKVersion, obtained through wx.getSystemInfo API) above 1.20.0

2. Insert canvas node

Import in the corresponding axml file that needs to call the sdk

<view>
    <canvas id='tdcanvas' style="visibility: hidden;position: fixed;z-index: -999;left: 9999px;"></canvas>
</view>

Note: You are advised to introduce it as a component

3. Initialization

Our device fingerprint object lives in the lifecycle of a Page (or Component), so an instance needs to be created for each page that needs to get device information. For example, in pages/index/index.js, first reference the SDK file at the top of the file:

import FMAgent from '../../fmsdk/fm-xxx-es.min.js'

Initialize the object in the onLoad callback of the Page:

onLoad: function() {
	var that = this
	var fmagent = new FMAgent(app.globalData._fmOpt) // Some necessary configurations
	......
}

Configuration of FMAgent
In the globalData of the app object in the app.js file

App({
	......
	globalData: {
		......
		_fmOpt: {
			partnerCode: "", // Please fill in your partner code
			appName: "", // Please fill in your app name
			env: "PRODUCTION" // Use 'SANDBOX' for test environment and 'PRODUCTION' for production environment
		 }
	}
})

After the initialization is successful, you can see a log on the console:
FMAgent: init succeeded.

4. Get blackBox

After the device fingerprint object is initialized, the device information can be obtained. Our device fingerprint SDK adopts a call mode similar to wechat API, and supports passing success, fail, complete callback, and other configuration fields:

fmagent.getInfo({
    page: that, // The Page or Component object where FMAgent resides
    unionid: '', // User id
    success: function (res) {
    // Successful callback, res is blackBox string
    },
    fail: function (res) {
    // Failure callback, res for various exception objects
    },
    complete: function (res) {
    // Complete callback, res for BlackBox string or various exception objects
    }
})

API Parameter Description