Alipay Mini Program Device SDK Integration

更新时间:
复制 MD 格式

This topic describes how to integrate the device risk SDK into an Alipay mini program to collect device fingerprint information, obtain a deviceToken, and call the Fraud Detection service to prevent device spoofing, batch registration, and malicious logons.

Background

The Alipay mini program SDK is a device risk detection tool designed for the mini program environment. By embedding this SDK, developers can quickly integrate device fingerprinting capabilities, collect device information in real time, and call the Fraud Detection service. The SDK supports various scenarios such as registration, logon, and marketing campaigns, effectively preventing fraudulent activities and enhancing business security. For more information, see Alipay mini program developer guide.

SDK integration guide

  1. Download and import the mini program SDK

    Download the Alipay mini program SDK. We recommend that you import the SDK on the first screen of the mini program and mount the AliyunFP object globally for other pages to call.

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

    Before calling the mini program SDK APIs, add the feilin-view node to the corresponding axml file:

    <view>
      <view> Business UI layout </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>
    Note

    The hidden node style style="position:fixed;top:99999rpx;" moves the data collection element out of the visible area without affecting the page layout.

  3. Initialize the SDK

    After importing the mini program SDK, initialize the SDK in the onReady lifecycle. The appKey identifies your application. You can obtain it from Device App Management in the Alibaba Cloud console.

    Page({
      onReady() {
        AliyunFP.init(
          {
            appKey: 'Identifies your application. Obtain from Device App Management in the console',
            appName: 'Your mini program name',
            openId: 'Alipay mini program user ID, optional but recommended',
            endpoints: ['https://cloudauth-device.aliyuncs.com'],
          },
          (initStatus, deviceToken) => {
            console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
          }
        );
      }
    });
    Important

    If you do not specify a service address, endpoints uses the default configuration. Make sure to add the domain names in endpoints to the request domain allowlist in the mini program management console to ensure proper functionality.

    Default endpoint addresses:

    Region

    Service address

    Chinese mainland (default)

    https://cloudauth-device.aliyuncs.com

  4. Get the deviceToken

    We recommend that you use the deviceToken returned by the AliyunFP.init callback. You can also call AliyunFP.getToken when a business event occurs (such as registration, logon, or purchase). We recommend an interval of at least 1 second between calling AliyunFP.getToken and AliyunFP.init.

    // Get the token without parameters
    AliyunFP.getToken()
    
    // Pass bizId to bind this token to a unique business identifier
    AliyunFP.getToken(bizId)

Integration example

Page structure (axml)

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

  <button type="primary" onTap="onLogin">
    Log on
  </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>

Logic implementation (js)

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

Page({
  onReady() {
    AliyunFP.init({
      appKey: 'Identifies your application. Obtain from Device App Management in the console',
      appName: 'Your mini program name',
      openId: 'Alipay mini program user ID, optional but recommended',
      endpoints: ['https://cloudauth-device.aliyuncs.com']
    }, (initStatus, deviceToken) => {
      console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
    });
  },

  onLogin() {
    // Example: logon action
    console.info("onLogin!");
    const deviceToken = AliyunFP.getToken();
    // Pass deviceToken to the business server
    const data = {
      "deviceToken": deviceToken,
      "otherBusinessParams": ""
    };
    // Send a request to the backend; the server queries risk information using the deviceToken
  }
});

Call the Fraud Detection API

Send the deviceToken along with other parameters to the Fraud Detection API. For more information, see API integration.