支付宝小程序设备 SDK 接入

更新时间:
复制为 MD 格式

本文介绍如何在支付宝小程序中接入设备风险 SDK,采集设备指纹信息并获取 deviceToken,联动风险识别服务防范设备伪造、批量注册、恶意登录等风险。

背景信息

支付宝小程序 SDK 是专为小程序环境设计的设备风险识别工具,通过嵌入 SDK,开发者可以快速集成设备指纹能力,实时获取设备信息并联动风险识别服务。该 SDK 支持多种场景,如注册、登录、营销活动等,有效防范黑产攻击,提升业务安全性。详情请参见支付宝小程序

SDK 集成指南

  1. 下载并引入小程序 SDK

    下载支付宝小程序 SDK,建议在小程序首屏引入 SDK,并将 AliyunFP 对象全局挂载,方便其他页面调用。

    import * as AliyunFP from './feilin.alipay.xxx.js';
    const app = getApp();
    app.AliyunFP = AliyunFP;
  2. 添加配置信息

    在调用小程序 SDK 接口前,需在对应的 axml 中加入 feilin-view 节点:

    <view>
      <view> 业务的 UI 布局 </view>
    
      <view id="feilin-view" style="position:fixed;top:99999rpx;">
        <canvas id="feilin-canvas" type="2d" style="width:150px;height:150px;"></canvas>
        <canvas id="feilin-webgl" type="webgl" style="width:150px;height:150px;"></canvas>
      </view>
    </view>
    说明

    隐藏节点的 style="position:fixed;top:99999rpx;" 用于将采集元素移出可视区域,不影响页面正常展示。

  3. 初始化 SDK

    引入小程序 SDK 后,在页面 onReady 时初始化 SDK。

    Page({
      onReady() {
        AliyunFP.init(
          {
            appKey: '这里填写风险识别控制台申请的 AppKey',
            appName: '这里填小程序应用名称,客户自定义',
            openId: '支付宝小程序用户 ID,非必填,建议传入',
            endpoints: ['https://cloudauth-device.aliyuncs.com'],
          },
          (initStatus, deviceToken) => {
            console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
          }
        );
      }
    });
    重要

    如果不指定服务地址,则 endpoints 会读取默认配置。请务必将 endpoints 中的域名添加至小程序后台的请求域名白名单,以确保相关功能正常运行。

    endpoints 默认服务地址:

    地域

    服务地址

    中国内地(默认)

    https://cloudauth-device.aliyuncs.com

  4. 获取 deviceToken

    推荐使用 AliyunFP.init 接口回调返回的 deviceToken 值。也可以在发起业务行为(如注册、登录、订购等)时调用 AliyunFP.getToken 获取。AliyunFP.getTokenAliyunFP.init 之间建议预留 1 秒左右的时间差。

    // 无参获取
    AliyunFP.getToken()
    
    // 传入 bizId,将本次 token 与业务唯一认证 ID 绑定
    AliyunFP.getToken(bizId)

接入示例

页面结构(axml)

<view>
  <view class="page-description">
    {{ message }}
  </view>

  <button type="primary" onTap="onLogin">
    登录
  </button>

  <view id="feilin-view" style="position:fixed;top:99999rpx;">
    <canvas id="feilin-canvas" type="2d" style="width:150px;height:150px;"></canvas>
    <canvas id="feilin-webgl" type="webgl" style="width:150px;height:150px;"></canvas>
  </view>
</view>

逻辑实现(js)

import * as AliyunFP from './feilin.alipay.xxx.js';
const app = getApp();
app.AliyunFP = AliyunFP;

Page({
  onReady() {
    AliyunFP.init({
      appKey: '这里填写风险识别控制台申请的 AppKey',
      appName: '这里填小程序应用名称,客户自定义',
      openId: '支付宝小程序用户 ID,非必填,建议传入',
      endpoints: ['https://cloudauth-device.aliyuncs.com']
    }, (initStatus, deviceToken) => {
      console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
    });
  },

  onLogin() {
    // 以登录行为为例
    console.info("onLogin!");
    const deviceToken = AliyunFP.getToken();
    // 将 deviceToken 传入业务服务端
    const data = {
      "deviceToken": deviceToken,
      "其他业务参数": ""
    };
    // 发送后台请求,服务端通过 deviceToken 查询风险信息
  }
});

调用风险识别 API 接口

将 deviceToken 与其他参数,参考服务端API接口接入,请求风险识别 API 接口进行识别。