功能描述:首先为商家做好了礼品领取页的二维码,用户扫码可进入网页端,用户答应抖音发布视频授权之后可以领取礼品,领取后会自动在用户抖音上发布一条推广视频,推广视频上带有商家小程序的链接,可供观看视频的人点击进入领取商品再分享,实现裂变。
这里就涉及到了网页端获取抖音授权和小程序端获取抖音授权的两条路线。
因为我们需要同时在网页端和字节小程序端的使用,所以我这边使用的是uni-app来编写以供多端使用。
首先是二维码
根据抖音开发平台(抖音开放平台)介绍,可以拼接如下的url生成二维码供用户扫码。
注意下面的client_key换成自己的client_key,scope是指需要授权的权限,相应的权限需要在抖音开放平台申请,redirect_uri是指扫码授权之后的跳转网页,比如网址百度如下需要经过转义,这个网页域名还需要申请抖音平台审核,通过才能做跳转。
将上面的URL用草料二维码生成一个二维码可供用户扫码。
获取授权code
网页端获取code
上面的二维码扫码之后授权完会跳转目标网页并在其后拼接一个code ,如http://www.baidu.com?code=xxxxxxx
这里有个坑,前端最好使用history模式的路由,不然code拼的位置会有问题。
小程序端获取code
可以参考字节小程序文档这部分(https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/open-interface/authorization/tt-show-douyin-open-auth)
通过如下代码申请权限,scopes中填入需要申请的权限,比如下面的video.create是创建视频的权限,0表示用户必选这权限,如果写1就表示非必选,默认选中;写2就表示非必选,默认不选中。
这里用户授权之后会在res中返回ticket字段,相当于网页端的code。
tt.showDouyinOpenAuth({
scopes: {
"video.create": 0
},
success: (res) => {
console.log("success", res);
console.log("code="+res.ticket);
},
fail: (res) => {
console.log("fail", res);
},
complete: (res) => {
console.log("complete", res);
},
});
后端编写接口
上面两种方式获取到的code可以用来获取access_token和openId用于抖音发布视频接口等功能,为了安全性和复用性所以这些放在后端做。
其他的坑
需要注意的是,网页端和小程序端需要分开来申请权限,一个是在抖音开放平台,一个在字节小程序平台。然后想要获取用户手机号,在发布的抖音视频上带跳转链接还需要抖音小程序评级,我的创建完只有C级,没有该权限,还得升级。