JS接入指南
使用步骤
一、申请网站应用
如还未申请过网站应用，请先访问 https://open.douyin.com/platform/apply?type=web 申请网站应用。网站应用申请审核通过后，可以获得该应用所属的 Client Key 和 Client Secret。
二、申请JSBridge能力
在网站应用申请通过后，在管理中心的应用详情内，找到JSBridge选项卡，申请需要的JSBridge能力。
三、填写JSBridge安全域名
JSBridge能力申请通过后，在该应用管理中心的基础信息选项卡，修改JSBridge安全域名。安全域名用于初始化验证签名过程，只有在安全域名内的页面才能通过签名验证。
四、引入JSSDK文件
在页面中引入以下JS文件（支持模块加载） https://unpkg.byted-static.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)); // 类型为 String
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://jsb.security.domain/page.html
}
});六、通过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 => {
// 失败回调，必需
}
); 抖音版本要求
JSSDK在10.4以上版本的抖音APP内可用
代码示例
点击查看React代码示例
常见问题
1. Host 不合法
答： 确认页面所在域名，是否与应用配置的 JSB 安全域名一致。JSB 安全域名可在 官网 -> 管理中心 -> 应用管理 -> 应用详情 -> 基础信息 中进行配置和修改。
2. 签名不正确
答： 下载 React 示例代码，查看签名算法文档，确认是按照配置与示例进行签名生成。
常见的签名不正确的原因有：a) timestamp 类型为 String； b) sdk.config 用的 url 必须是调用JS接口页面的完整URL（但是不包括#及后面部分）。
诚邀您对本文档易读易用性进行评价
好用
不好用