Uni-app&Vue抖音移动/网站应用JS授权

因为抖音提供的demo是react版的，所以记录一下vue版接入抖音sdk

首先引入抖音sdk，官网自行下载 抖音开放平台文档
文件名可自行设置，我这里为了方便区分改为“dy_sdk”

import dySdk from "@/common/dy_sdk.js"

从后台取这些配置参数,签名生成规则参考 抖音签名验证

//res为后台回传参数，请求时将当前页面url作为参数传给后台，生成签名时有用到
dySdk.config({
	params: {
		client_key: res.client_key, // clientKey在你的网页应用申请通过后得到
		signature: res.signature, // 服务端计算的签名，该签名被抖音开放平台验证通过后方可调用jsb方法
		timestamp: String(res.timestamp), // 时间戳必须是字符串
		nonce_str: res.nonce_str,//生成签名用的随机字符串
		url: location.href, // 为应用申请的 JSB 安全域名下的链接，需要携带协议。e.g. https://jsb.security.domain/page.html
	},
});

config生效后会自动调用ready并调用showOpenAuth拉起半屏授权窗口；

dySdk.ready(() => {
	// Config Ready回调
	dySdk.showOpenAuth({
		params: {
			client_key: res.client_key, // clientKey 在你的网页应用申请通过后得到
			scopes: {
				//此处配置想要获取的用户权限
				user_info: 0, // 0: 必选；1: 可选，默认不选中； 2: 可选，默认选中
			},
			response_type: "code", // 默认填‘code’
		},
		success: (res) => {
			//拿到返回值后， res.response.ticket相当于微信中的code；
			//调用接口把ticket传给后台，后台拿着这个ticket调用抖音api获取用户信息
		},
		error: (err) => {
			
		}
	})
})