web跳转方式

从抖音开放平台注册好并申请功能，配置回调地址

1.跳转

2.在回调地址后端通过拿到的code获取access_token

https://open.douyin.com/oauth/access_token/

（注意是POST，详情请看官方文档：https://developer.open-douyin.com/docs/resource/zh-CN/dop/develop/openapi/account-permission/get-access-token）

到此返回的格式如下：

{
  "data": {
    "access_token": "act.f7094fbf******",
    ...
    "open_id": "b9b71865-7fea-44cc-******",
    "refresh_token": "rft.713900b7******",
    "scope": "user_info"
  },
  "message": "success"
}

3.获取用户信息

https://open.douyin.com/oauth/userinfo/

用open_id和access_token通过以上接口POST获取用户信息（跟微信一样也就昵称和头像）

以上感觉挺简单，但发现抖音APP内打开总是风险提示，没办法，接着搞JS授权

JS获取授权方式

此方法就复杂些了，且官方文档有记录错误，导致找问题好久。。。

H5端：

页面引入：

https://unpkg.byted-static.com/bridge/douyin_open/1.0.10/lib/douyin_open.umd.js

const dySDK = window.douyin_open;
var dy_client_key;

function setToken(ticket) {
    axios({
        method: 'post',
        url: '获取access_token URL',
        data: { code: ticket }
    }).then(res => {
        var { state, result } = res.data;
        if (state) {
            window.localStorage.setItem('flashmeDYToken', JSON.stringify(result));
            store.dyToken = result;
        }
    })
}
export function dyLogin(login) {
    var browser = fBrowserRedirect();
    store.browser = browser;
    if (browser != 'douyin') {
        return login?'请使用抖音打开！':null;
    }
    const url = window.location.href;
    const timestamp = String(parseInt(Date.now() / 1000)); // 生成签名用的时间戳
    const nonce_str = "Dofbydgbviyfg618"; // 生成签名用的随机字符串

    var configStatus = ''
    if (dySDK) {
        configStatus = 'SDK Loaded'
        axios({
            method: 'post',
            url: '获取签名URL',
            data: { timestamp, nonce_str, url }
        }).then(res => {
            var { state, client_key, signature } = res.data;
            if (state) {
                dy_client_key = client_key;
                dySDK.config({
                    params: {
                        client_key,
                        signature,
                        timestamp,
                        nonce_str,
                        url
                    }
                });
            }
        }).catch(err => {
            const res = err.response;
        });

        dySDK.ready(() => {
            configStatus = 'SDK Config Ready'
            // 打开原生授权页面JSB
            dySDK.showOpenAuth({
                params: {
                    client_key: dy_client_key,
                    state: '',
                    scopes: { user_info: 0 },
                    response_type: 'code',
                },
                success: ({ ticket }) => {
                    console.log(`Auth Success: ${ticket}`);
                    setToken(ticket)
                },
                error: (res) => {
                    resultMsg.value = `Auth Error: ${JSON.stringify(res)}`
                },
            })
        })
        dySDK.error((res) => {
            configStatus = `SDK Config Error: ${JSON.stringify(res)}`
            console.log(configStatus);
        })
    }
}

后端：获取签名URL

为了上面H5端的dySDK.config()，需要先调用后端的计算签名接口

https://open.douyin.com/oauth/client_token/

通过此地址POST获取所需access_token（此token非前面所需token）

https://open.douyin.com/js/getticket/?access_token=刚刚拿到的token

在通过此地址GET获取 ticket，这里官方文档写的是access-token参数，再加上没注意突然变成GET方式，导致找问题好久！！！

计算签名

// 详细说明见 https://developer.open-douyin.com/docs/resource/zh-CN/dop/develop/sdk/web-app/js/signature
const calcSignature = ({ ticket, nonce_str, timestamp, url }) => {
    const str = `jsapi_ticket=${ticket}&nonce_str=${nonce_str}×tamp=${timestamp}&url=${url}`;
    const sig = crypto.createHash('md5').update(str).digest('hex');
    return sig;
};

通过刚刚拿到的ticket计算返回签名

获取access_token URL

前端执行dySDK.showOpenAuth()得到的 ticket 相当于web跳转方式获取到的code，使用此参数调用后端接口获取真正的access_token，与web跳转方式的第二步一样：

https://open.douyin.com/oauth/access_token/

后面获取用户信息同理，不再赘述。