Embed the device risk SDK on key pages such as logon, registration, and transaction pages to collect device fingerprint information and identify fraud risks. This topic describes the Web/H5 integration process and API usage.
Prerequisites
A Web/H5 application has been created in the Fraud Detection console and an AppKey has been obtained.
Step 1: Embed the JS SDK
Add the following script to the <head> or <body> of the page you want to protect to import the device risk SDK:
<script src="https://o.alicdn.com/captcha-frontend/aliyunFP/fp.min.js"></script>The JS file is updated periodically. Do not download it to a local server. Always load it from the CDN URL to avoid failures caused by outdated files.
You only need to embed the JS SDK once per page (including single-page applications). After embedding, you can initialize the SDK anywhere on the page.
Step 2: Initialize the SDK
Initialize the SDK immediately after embedding the JS SDK (only initialize once) to obtain the SDK object:
ALIYUN_FP.use('um', (state, um) => {
if (state === 'loaded') {
um.init({
// Enter the AppKey obtained from the Fraud Detection console
appKey: 'your_app_key',
// Enter a custom name for your Web application
appName: 'your_web_app_name'
endpoints : ['https://cloudauth-device.ap-southeast-1.aliyuncs.com']
}, (state) => {
// state = success indicates successful initialization
console.info(state);
});
}
});
If you do not specify a service address, endpoints uses the default configuration.
Default endpoint addresses:
|
Region |
Service address |
|
Singapore |
|
|
China (Hong Kong) |
|
|
Germany (Frankfurt) |
|
|
US (Silicon Valley) |
init parameters
|
Parameter |
Type |
Required |
Description |
|
|
String |
Yes |
Identifies your application. You can obtain it from Device App Management in the Alibaba Cloud console. |
|
|
String |
Yes |
A custom name for your Web application. |
|
|
Array |
No |
An array of service addresses. If not specified, the default address is used. |
Step 3: Get the deviceToken
Call the getToken API to obtain the device fingerprint deviceToken. We recommend that you call this API when a user triggers a business event. Allow an interval of at least 3 seconds between calling init and getToken to ensure initialization is complete.
// Get the deviceToken without passing bizId
window.z_um.getToken();
// Pass bizId to bind this token to a unique business identifier
window.z_um.getToken(bizId);Parameters
|
Parameter |
Type |
Description |
|
|
String |
Optional. A unique business identifier. If specified, the token is bound to this bizId. |
Full integration example
The following example shows the complete process of embedding the JS SDK, initializing the SDK, and sending a request after obtaining the deviceToken:
<body>
<button type="button" id='register' onclick="login();">Log on</button>
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunFP/fp.min.js"></script>
<script>
// Initialize as soon as the page loads
ALIYUN_FP.use('um', (state, um) => {
if (state === 'loaded') {
um.init({
appKey: 'your_app_key',
appName: 'your_web_app_name'
//endpoints : ['https://cloudauth-device.aliyuncs.com']
}, (state) => {
// success indicates successful initialization
console.info(state);
});
}
});
// Business function, for example logon
function login(){
// Get the device fingerprint deviceToken. Allow at least 2 seconds between getToken and init.
deviceToken = window.z_um.getToken();
// Pass the deviceToken to the business server
var data = {
"deviceToken": deviceToken,
"otherBusinessParams":""
};
// Send a backend request... the server queries risk information using the deviceToken
}
</script>
</body>Step 4: Call the Fraud Detection API
Send the deviceToken along with other parameters to the Fraud Detection API. For more information, see API integration.