JS接入指南

使用步骤

一、申请网站应用

如还未申请过网站应用，请先访问 https://open.douyin.com/platform/apply?type=web 申请网站应用。网站应用申请审核通过后，可以获得该应用所属的 Client Key 和 Client Secret。

二、申请JSBridge能力

在网站应用申请通过后，在管理中心的应用详情内，找到JSBridge选项卡，申请需要的JSBridge能力。

三、填写JSBridge安全域名

JSBridge能力申请通过后，在该应用管理中心的基础信息选项卡，修改JSBridge安全域名。安全域名用于初始化验证签名过程，只有在安全域名内的页面才能通过签名验证。

四、引入JSSDK文件

在页面中引入以下JS文件（支持模块加载） https://unpkg.pstatp.com/bridge/douyin_open/1.0.7/lib/douyin_open.umd.js

注意

openConfig 验签上线抖音版本为10.4.0， showOpenAuth上线时间为10.8.0，低版本抖音是无法吊起半屏授权的，所以请先判断抖音版本号，在符合要求的版本上面再使用该功能。

五、通过config方法验证签名

const sdk = window.DouyinOpenJSBridge;

const timestamp = String(parseInt(Date.now() / 1000));

const nonceStr = ''; // 生成签名用的随机字符串

const url = location.href;

sdk.config({

  params: {

    client_key: clientKey, // clientKey在你的网页应用申请通过后得到

    signature: calcSig(timestamp, nonceStr, url), // 服务端计算的签名，该签名被抖音开放平台验证通过后方可调用jsb方法

    timestamp, // 时间戳

    nonce_str: nonceStr,

    url, // 为应用申请的 JSB安全域名，需要携带协议。e.g. https://test.com

  }

});

点此查看签名算法

六、通过ready方法处理成功验证

sdk.ready(() => {

 // Config Ready回调

});

七、通过error方法处理失败验证

sdk.error(res => {

 // Config error回调

});

八、调用申请通过的JSBridge能力

// 授权JSB 

sdk.jumpOpenAuth({

  params: {

    ... // JSB方法参数

  },

  success: res => {

    // 成功回调

  },

  error: res => {

    // 失败回调

  }

});

// 其他JSB方法

sdk.bridge.call(

  'jsbName', // JSB方法名，如 music

  {

    ... // JSB方法参数

  },

  res => {

    // 成功回调，必需

  },

  res => {

    // 失败回调，必需

  }

);