1.申请抖音开放平台移动应用,获取到client_key
2.下载抖音sdk.js文件,main.js全局引用或对应页面引用
import sdk from '/douyinsdk.js
Vue.prototype.sdk = sdk
3.通过服务端返回jsapi_ticket和client_key
jsapi_ticket获取方式参考:https://developer.open-douyin.com/docs/resource/zh-CN/dop/develop/openapi/tools-ability/jsb-management/get-jsticket
注入config, ready代表为成功,error失败;
sdk.config({
params: {
client_key: '', // clientKey在你的网页应用申请通过后得到
signature: '', // 计算的签名,该签名被抖音开放平台验证通过后方可调用jsb方法
timestamp:'', // 时间戳
nonce_str: '',// 生成签名用的随机字符串
url:'', // 为应用申请的 JSB 安全域名下的链接,需要携带协议。e.g. https://jsb.security.domain/page.html
},
});
sdk.ready((res) => {
// Config Ready回调
});
sdk.error((res) => {
alert(`失败${JSON.stringify(res)}`)
// Config error回调
});
前端生成签名方式参考(安全原因建议由服务端计算返回):
const url = window.location.href;
const timestamp = String(parseInt(Date.now() / 1000)); // 生成签名用的时间戳
const nonce_str = 'Wm3WZYTPz0wzccnW'; // 生成签名用的随机字符串
const str = `jsapi_ticket=${ticket}&nonce_str=${nonce_str}×tamp=${timestamp}&url=${url}`;
const sig = this.md5(str);
md5文件下载
4. 调用 sdk.showOpenAuth, scopes 应用申请的对应权限集
sdk.showOpenAuth({
params: {
client_key: 'client_key',
state: '',
scopes: {
// 'user_info': 0, // 0: 必选;1: 可选,默认不选中; 2: 可选,默认选中
// 'h5.share': 0,
// 'video.data': 0,
// 'aweme.share': 0,
// 'open.get.ticket': 0,
// 'poi.search': 0,
// 'mobile': 0,
},
response_type: 'code'
},
success: ({
ticket
}) => {
// alert(`授权成功${ticket}`)
}
})
5.获取ticket为用户授权code,通过access_token解析获取用户信息。