支付宝小程序

支付宝小程序提供两种对接方式：插件化对接与sdk对接，请根据下方的对比选择合适的对接方式接入

插件化与sdk接入区别

• 插件化代码不直接提供sdk代码，对接更为便捷
• 插件发布新版本后，插件订购者可在小程序内使用指定版本插件，享受更高效的插件服务。
• 小程序可以调用插件，插件不能再调用其他插件
• 插件化不支持较早版本的 APPID 为 8 位数字的小程序

1. 插件化方式

• 登陆登录开放平台控制台（https://open.alipay.com/develop/manage），进入 开发 中的插件服务
• 点击订购其他插件
• 搜索 设备指纹插件 ，选择插件，点击订购，确认获取该插件
• 选择授权并绑定小程序

小程序代码集成

1. 小程序app.json里生命插件

{


  "plugins": {
    "tdfp-plugin": {
      "version": "*", //支付宝目前只支持设置 * ，自动选择版本，后台可以配置使用哪个版本
      "provider": "2021003160688029"
    }
  },
  

}

Note: 三方框架可对应添加 如uni-app，可在manifest.json文件的mp-alipay模块中添加上述声明

2. 初始化插件 js
   我们的设备指纹对象存活在一个 Page（或Component）的生命周期中，所以在每一个需要获取设备信息的页面都需要创建一个实例。比如：在 pages/index/index.js 中，先在文件顶部引用插件及全局变量：

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

然后在 Page 的 onLoad 回调中初始化对象：

// 示例
onLoad: function() {
    var that = this
    var fmagent = new plugin.FMAgent(app.globalData._fmOpt) // 这里需要传入一些必要配置
    ......
}

关于FMAgent的配置

在上面代码中，可以看到初始化对象时，需要传入一个配置对象。因为这个配置在整个App中应该都是相同的，所以在demo中我们把配置放在了app对象的globalData里，我们强烈建议你也这么做。

partnerCode和appName为必要参数，如果没有传入则初始化时会抛出异常。 在app.js中：

App({
  
  globalData: {
  
    _fmOpt: {
      partnerCode: "", // 请填入您的partner code
      appName: "", // 请填入您的app name 同一个公司的不同小程序请填入不同的AppName
      env: "PRODUCTION" // 谨慎配置，测试环境请使用'SANDBOX',确认生产环境请使用'PRODUCTION'
    }
  }
})

初始化成功可以在 console 里看到一条日志：
FMAgent: init succeeded.

3. 获取blackbox

fmagent.getInfo({
  page: that,
  mode:'plugin',
  // 请传入用户userid(可以加密或者不加密，若加密需保证加密后的userid与原始userid是一一对应关系)
  unionid: '', 
  success: function (res) {},// 成功回调，res为blackbox字符串
  fail: function (res) {},// 失败回调，res为各种exception对象
  complete: function (res) {}
})

2. 标准版 SDK

1. 添加同盾域名

小程序对各种请求接口都做了域名限制，所以需要在小程序网站后台页面中添加同盾域名才可以保证小程序能正常给同盾设备指纹服务器发送信息

在 设置-开发设置-服务器域名白名单 中添加：

注意：1、如果线上版本小程序仅会访问同盾生产环境，那么添加第一个生产域名即可

2. 同盾支付宝小程序设备指纹 SDK 仅支持客户端基础库版本 为 1.20.0 以上的支付宝客户端,在小程序后台可以设置最低基础库版本，当低于该版本的用户打开时会提示用户升级支付宝

2. 插入 canvas 节点

同盾小程序设备指纹中使用了 canvas 指纹技术，由于目前支付宝的限制，我们无法通过 JS 来动态创建 DOM 节点，所以需要在集成时手动加入。假设我们想在 index 页面中采集设备信息，那么就需要在 pages/index/index.axml 文件末尾添加以下代码：

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

注意：

• canvas 标签中的 margin-top 样式的值 请按照您页面的布局更改 ，确保在不滑动屏幕的前提下，用户无法看到这个 canvas 即可
• 在采集完成后，设备指纹 SDK 会立即隐藏这个节点，SDK 会在用户感知不到的时间内完成采集
• 请勿修改 if 语句中的条件及 id，修改会导致 SDK 无法正常工作

3. 初始化 SDK

我们的设备指纹对象存活在一个 Page（或 Component）的生命周期中，所以在每一个需要获取设备信息的页面都需要创建一个实例。比如：在 pages/index/index.js 中，先在文件顶部引用 SDK 文件：

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

然后在 Page 的 onLoad 回调中初始化对象：

onLoad: function() {
	var that = this
	var fmagent = new FMAgent(app.globalData._fmOpt) // 这里需要传入一些必要配置
	......
}

初始化成功可以在 console 里看到一条日志：
FMAgent: init succeeded.

关于 FMAgent 的配置

在上面代码中，可以看到初始化对象时，需要传入一个配置对象。因为这个配置在整个 app 中应该都是相同的，所以在 demo 中我们把配置放在了 app 对象的 globalData 里，我们强烈建议你也这么做

partnerCode 和 appName 为必要参数，如果没有传入则初始化时会抛出异常

在 app.js 中：

App({
	......
	globalData: {
		......
		_fmOpt: {
			partnerCode: "", // 请填入您的 partner code
			appName: "", // 请填入您的 app name
			env: "PRODUCTION" // 谨慎配置，测试环境请使用'SANDBOX',确认生产环境请使用'PRODUCTION'
		}
	}
})

4. 获取blackbox

在设备指纹对象初始化完成后，就可以获取设备信息了。我们的设备指纹 SDK 采用回调函数模式，支持传入 success、fail、complete 三个回调及其它配置字段：

fmagent.getInfo({
    page: that, // 请传入 FMAgent 所在的 Page 或 Component 对象
    // unionid 字段，如果您开通了支付宝的 userid 功能，请传入加密的用户 userid，
    // 否则留空即可
    unionid: '', 
    success: function (res) {
    // 成功回调，res 为 blackBox 字符串
    },
    fail: function (res) {
    // 失败回调，res 为各种 exception 对象
    },
    complete: function (res) {
    // 完成回调，res为blackbox字符串或者exception 对象
    }
})

设备指纹参数说明