Fraud Detection:Device Risk SDK Alipay Mini Program Integration

Download and import the mini program SDK

Download the Alipay mini program SDK. It is recommended to import the SDK on the index page that loads first, and mount the AliyunFP object globally for use by other pages.

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

Add configuration

Before calling mini program SDK interfaces, 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>

Initialize the SDK

After importing the mini program SDK, initialize it in the onReady page lifecycle.

Page({
  onReady() {
    AliyunFP.init(
      {
        appKey: 'Enter the AppKey applied for in the Fraud Detection console',
        appName: 'Enter the mini program name, defined by the customer',
        openId: 'Alipay mini program user ID, optional but recommended',
        endpoints: ['https://cloudauth-device.ap-southeast-1.aliyuncs.com'],
      },(initStatus, deviceToken) => {
        console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
      }
    );
  }
});

Optional service addresses for endpoints:

Obtain the deviceToken

To obtain the deviceToken, use the value returned by the AliyunFP.init callback, or call it once when a business action starts (such as registration, login, or purchase). Allow at least 1 second between AliyunFP.getToken and AliyunFP.init.

AliyunFP.getToken()

//Pass bizId to bind this token to a unique business ID.
AliyunFP.getToken(bizId)

Page structure

<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

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


Page({
  onReady() {   
    AliyunFP.init({
      appKey: 'Enter the AppKey applied for in the Fraud Detection console',
      appName: 'Enter the mini program name, defined by the customer',
      openId: 'Alipay mini program user ID, optional but recommended',
      endpoints: ['https://cloudauth-device.ap-southeast-1.aliyuncs.com']
    }, (initStatus, deviceToken) => {
      console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
    });
  },
  
  onLogin() {
    // A business action click, login is used as the example here.
    console.info("onLogin!");
    const deviceToken = AliyunFP.getToken();
    // Pass the deviceToken to the customer's business server
    const data = {
      "deviceToken": deviceToken,
      "otherBusinessParams": ""
    };
    // Send backend request... The server queries risk information using the deviceToken
  }
});