WEB/WAP/H5端接入

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,结构如下:

属性名类型是否必须作用
productNumberString产品编号
protocolString数据传输的协议,取值http或https,默认根据当前页面的协议适配
autoBoolean是否启用自动化模式,默认true(推荐);若需使用高级模式,请设置false
onloadFunction初始化完成之后的回调函数,SDK对象将以回调函数参数的形式提供
onerrorFunction初始化失败的回调函数

初始化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

接口说明如下:

  • 调用方式:wm.getToken(businessId, callback)
  • 接口描述:获取唯一凭证token
  • 返回值:void
参数名类型是否必须作用
businessIdString业务id
callback(token)Function获取token之后的回调函数,token将以回调函数参数的形式提供

获取查询token的示例代码如下:

wm && wm.getToken('YOUR_BUSINESS_ID', function(token) {
    // 将token作为参数提交到服务端 
});

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.jst=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);
        });
    }

Online Chat Tel:95163223