Fraud Detection:SDK for WeChat Mini Program

1. Import the SDK

Download the WeChat Mini Program SDK from the Fraud Detection console.

Import the SDK on the index page (the mini program homepage) and mount the AliyunFP object globally so that other pages can access it.

const AliyunFP = require('./feilin.weixin.xxxx.js');
const app = getApp();
app.AliyunFP = AliyunFP;

2. Configure the canvas element

Add a feilin-view node to the axml file of the page where the SDK collects device fingerprints.

<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>

3. Initialize the SDK

Call AliyunFP.init() in the onReady lifecycle of the page.

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: 'WeChat Mini Program user ID (recommended)',
        endpoints: [
          'https://cloudauth-device.ap-southeast-1.aliyuncs.com'
        ],
      },
      (initStatus, deviceToken) => {
        console.log("initStatus:" + initStatus + "  deviceToken:" + deviceToken);
      }
    );
  }
});

Default endpoint addresses:

4. Obtain the deviceToken

Obtain the deviceToken from the callback of AliyunFP.init(). You can also call AliyunFP.getToken() when a user triggers a business action such as registration, login, or placing an order. Wait at least 1 second between the two calls.

AliyunFP.getToken()

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

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)

The SDK import and canvas configuration are the same as described in Step 1 and Step 2. The following example shows the onLogin handler that is unique to the integration example:

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

  onLogin() {
    // Obtain the deviceToken when the user taps the login button, and report it with the business request
    const deviceToken = AliyunFP.getToken();
    const data = {
      "deviceToken": deviceToken,
      "Other business parameters": ""
    };
    // Send the deviceToken with the business request to your backend. The backend uses the deviceToken to query device risk information.
  }
});