JS-SDK使用步骤

具体步骤如下:

  1. 绑定域名
  2. 引入JS文件及权限验证配置
  3. 开放JS接口调用
第一步:绑定域名

如果在注册账号时已经绑定站点,则继续下一步。如果在注册账号时没有绑定站点,请在内容源设置进行站点关联。 该站点完整域名将作为JS-SDK的安全域名,只可以在该域名下使用JS-SDK。

内容源设置

内容源设置

第二步:引入JS文件及权限验证配置

在需要调用JS接口的页面的<head>标签内引入如下JS文件,(支持https),并在JS的URL后拼接好站点及权限验证配置的参数:

<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=${appid}&timestamp=${timestamp}&nonce_str=${nonce_str}&signature=${signature}&url=${url}"></script>

示例:

<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=1376009&timestamp=1501636739&nonce_str=safvdcgrdgasdIOJoiedfoiew&url=http://tool.chinaz.com/Tools/unixtime.aspx&signature=848ae6b0c57196a04b08193c3bc0ddfb81d5c30a"></script>

其中:

  • appid : 必填,熊掌ID,查看

  • timestamp: 必填,生成签名的时间戳
  • nonce_str: 必填,生成签名的随机串
  • signature: 必填,签名,见附录1
  • url: 必填,当前网页的URL,不包含#及其后面部分,必需要进行Urlencode。
注意事项

所有需要使用JS-SDK的页面必须在引入JS 时拼接好配置信息,否则将无法调用。

Signature签名计算必需在Server端完成。从安全性考虑,推荐将配置信息同步渲染到H5页面中。

如果无法将配置信息同步渲染到H5页面中,可由H5向站点Server异步请求配置后,动态加载JS。但是在Server端必需确保请求是自身站点的前端页面,避免Json劫持和CSRF漏洞。JS的加载是一个异步过程,所以如果需要在JS加载完成时就调用相关接口,则须把相关接口放在onload函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在onload函数中。下面是一个简单示例:

function asyncLoadOfficeSDK (opt) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
    s.charset = 'utf-8';
        s.onload = function () {
           cambrian.isBox({
                success: function (res) {
                    // 操作
                }
           });
        };
    s.src = 'https://xiongzhang.baidu.com/sdk/c.js?'
            + 'appid=' + opt.appid
            + '&timestamp=' + opt.timestamp
            + '&nonce_str=' + opt.nonce_str
            + '&signature=' + opt.signature
            + '&url' + opt.url;
        document.body.appendChild(s);
}
// 假设异步获取到了配置数据
var opt = asyncGetOfficeOptions();
// 拼接配置数据,异步加载JS-SDK
asyncLoadOfficeSDK (opt);
第三步:开放JS接口调用

所有接口通过cambrian对象来调用,参数是一个对象,含有以下通用参数:

  • data:可选,接口本身需要传的数据。
  • success:可选,接口调用成功时执行的回调函数。
  • fail:可选,接口调用失败时执行的回调函数。
  • complete:可选,接口调用完成时执行的回调函数,无论成功或失败都会执行。

以上3个函数(success、fail、complete)都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有两个通用属性status、msg,其值格式如下:

调用成功时:

{
        "status": 0, // 状态码,接口调用成功时,值固定为0
        "msg": "xxx:ok" // xxx为调用的接口名
}

调用失败时:

{
        "status": 100, // 状态码,不同错误状态返回不同的值
        "msg": "xxx" // 具体错误信息
}