WEB/WAP/H5端接入

2022.08.09 11:37:27

    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

    接口说明如下:

    • 调用方式: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);
            });
        }
    
    
    Online Chat Tel:95163223