WEB/WAP/H5端接入
2023.04.26 14:33:25
WEB、WAP、H5网页共用一套JSSDK，SDK支持自动化模式和高级模式：
- 一般情况下，使用自动化模式接入即可；
- 若您是单页应用，且非常看重页面性能的情况下，才建议使用高级模式。
自动化模式（推荐）
自动化模式下，SDK组件的接入流程：
- 嵌入SDK
- init：初始化SDK以获取SDK对象，整个页面SDK初始化一次即可；
- getToken：调用getToken接口获取token，每次调用返回不同的token值。一般由用户操作（提交等）来触发getToken，请注意：一个token只能使用一次，如果在不刷新页面的情况下，业务功能允许用户多次操作，请多次调用getToken接口以获取不同的token。请勿在一次用户操作中，多次调用getToken接口；
- 提交token：将token作为请求参数提交到业务方后端。
高级模式
高级模式允许应用通过API自主控制SDK何时开始工作、何时结束工作；在自动化模式下，init之后SDK自动开启工作。除非您明确知道SDK何时应该开始、何时应该结束，否则不建议您使用高级模式。
高级模式下，SDK的接入流程：
- 嵌入SDK
- init：初始化SDK以获取SDK对象，整个页面SDK初始化一次即可；
- start：触发SDK开始工作，SDK开启事件监听等；
- getToken：调用getToken接口获取token，每次调用返回不同的token值。一般由用户操作（提交等）来触发getToken，请注意：一个token只能使用一次，如果在不刷新页面的情况下，业务功能允许用户多次操作，请多次调用getToken接口以获取不同的token。请勿在一次用户操作中，多次调用getToken接口；
- 提交token：将token作为请求参数提交到业务方后台；
- stop：SDK停止工作，不再监听事件。
嵌入JS SDK
在需要反作弊的页面嵌入JS SDK，注意：
- 一个网页（包括单页应用）嵌入一次即可；
- 请在标签之后嵌入；
http示例如下：
<script src="http://acstatic-dun.126.net/tool.min.js?t=201903281201"></script>
地址中的t参数强烈建议设置为分钟级别时间戳，避免该文件被浏览器长时间缓存。
https示例如下：
<script src="https://acstatic-dun.126.net/tool.min.js?t=201903281201"></script>
地址中的t参数强烈建议设置为分钟级别时间戳，避免该文件被浏览器长时间缓存。
init接口
嵌入JS SDK之后，可以立即初始化SDK（只需初始化一次），以获取SDK对象，拥有SDK对象才能调用SDK的其他接口。接口说明如下：
- 调用方式：initWatchman(options)
- 返回值：void
参数options是json，结构如下：
| 属性名 | 类型 | 是否必须 | 作用 |
|---|---|---|---|
| productNumber | String | 是 | 产品编号 |
| protocol | String | 否 | 数据传输的协议，取值http或https，默认根据当前页面的协议适配 |
| auto | Boolean | 否 | 是否启用自动化模式，默认true（推荐）；若需使用高级模式，请设置false |
| onload | Function | 是 | 初始化完成之后的回调函数，SDK对象将以回调函数参数的形式提供 |
| onerror | Function | 否 | 初始化失败的回调函数 |
初始化SDK的示例代码如下：
var wm = null;
// 只需初始化一次
initWatchman({
productNumber: 'YOUR_PRODUCT_NUMBER',
onload: function (instance) {
wm = instance
}
});
start接口
控制SDK开始工作，SDK将监听页面事件。请注意：
- 当init接口显示指定了auto为false时，才需要调用start接口
- 在单页应用的场景下，一般在需要易盾服务的子页面，调用start接口
接口说明如下：
- 调用方式：wm.start();
- 返回值：void
- 接口参数：无
示例代码如下：
wm && wm.start();
getToken接口
getToken接口返回唯一凭证token，业务方前端需要将此token提交到业务后端，业务后端再使用此token来check接口获取检测结果。注意：
- 在高级模式下，请确保先调用了start接口
- 一般由用户的操作来触发getToken调用，比如用户点击“提交”按钮等
- 一个token只能使用一次
- 如果在不刷新页面的情况下，业务功能允许用户多次操作，请多次调用getToken接口以获取不同的token
- 强烈建议：初始化init到gettoken时间间隔2s以上，并且由用户触发。
接口说明如下：
- 调用方式：wm.getToken(businessId, callback, errorCallback)
- 接口描述：获取唯一凭证token
- 返回值：void
| 参数名 | 类型 | 是否必须 | 作用 |
|---|---|---|---|
| businessId | String | 是 | 业务id |
| callback(token) | Function | 是 | 获取token之后的回调函数，token将以回调函数参数的形式提供 |
| errorCallback(Error) | Function | 否 | 当getToken出现错误时，如businessId不合法，会回调该函数，建议测试联调时使用 |
获取查询token的示例代码如下：
wm && wm.getToken('YOUR_BUSINESS_ID', function(token) {
// 将token作为参数提交到服务端
}, function(error) {
// 错误处理
});
stop接口
控制SDK结束工作，此时SDK不再监听页面事件。若需再次使用SDK，请再调用start接口激活SDK。接口说明如下：
- 调用方式：wm.stop();
- 返回值：void
- 接口参数：无
示例代码如下：
wm && wm.stop();
接入示例
<body>
<a href="javascript:rise();">赞</a>
</body>
<!-- 在<body>标签之后嵌入SDK -->
<script type="text/javascript" src="https://acstatic-dun.126.net/tool.min.js?t=201903281201"></script>
<!-- 地址中的t参数强烈建议设置为分钟级别时间戳，避免该文件被浏览器长时间缓存。-->
<script type="text/javascript">
var wm = null;
// 初始化SDK，只需初始化一次
// auto使用默认值，即自动化模式
initWatchman({
productNumber: 'YOUR_PRODUCT_NUMBER',
onload: function (instance) {
wm = instance
}
});
function submit(token) {
var data = {
"token": token
};
$.post("rise.do", data, function(data) {
// 处理点赞的响应
});
}
// 处理点赞业务
function rise() {
// 调用SDK的getToken接口，通过接口回调的方式获取token
wm && wm.getToken('YOUR_BUSINESS_ID', function(token) {
// 提交点赞业务请求
submit(token);
});
}
