Tiktok (web)流登录实例

Question

我希望一个用户在网上登录，并获得他的基本信息，如：

• avarat_url
• union_id (tiktok提供的uniq用户标识符)
• display_name

用于Web文档的Tiktok登录工具包似乎缺少一个关于如何实现完整调用序列的完整示例。另外，有些事情根本没有解释(比如回调URL)。有人可以分享他们的完整解决方案与代码示例如何集成tiktok登录到一个网页。

Answer 1

以下是用于web实现的tiktok登录的完整示例：

1. 设置tiktok开发人员帐户https://developers.tiktok.com/
2. 创建一个新的应用程序，这将生成一个CLIENT_KEY和CLIENT_SECRET。
3. 创建您控制的两个后端端点，例如：

- [https://example.com/auth](https://example.com/auth) : builds a tiktok URL and redirects the user to that endpoint (where the user will be prompted to login).
- [https://example.com/authCallback](https://example.com/authCallback) : once the user has finished the login with tiktok flow, tiktok sends an authorizationResponse to this endpoint. The authorizationResponse contains info that you need to fetch the users data.

1. 在"Platform Info“一节中插入callback URL和redirect domain。回调URL是上面列出的两个服务器端点中的第二个。一旦用户成功登录，Tiktok将将authorizationResponse发送到该URL，并授予或拒绝所需的权限。在重定向域中，只是简单地添加域，而不需要精确的路径。

1. 填写您的应用程序的所有信息，等待批准，这可能需要1-3天。
2. 一旦获得批准，您就可以实现完整的流程，该流程由多个步骤/请求组成。 (A)将用户从前端发送到第一个后端端点https://example.com/auth。从那里，用户将被重定向到tiktok auth页面。 (B)在用户完成授权后，tiktok向回调URL (https://example.com/authCallback)发送一个authorizationResponse，其中包含一个变量code。使用code，您可以请求用户的access_token和open_id。 (C)使用access_token和open_id请求基本用户信息。

(A)将用户发送到Tiktok身份验证页面

在您的前端，将用户重定向到https://example.com/auth。然后在/auth路由上运行以下nodejs后端代码。在本例中，我们使用了express应用程序(req = request对象，res = response对象)：

// IMPORTANT, it is your responsibility to store a csrf token
// in your database, to be able to prevent xss attacks, read more
// here (section 2.1) =>  https://developers.tiktok.com/doc/login-kit-web
const createCsrfState = () => Math.random().toString(36).substring(7);
const csrfState = createCsrfState(); 
res.cookie('csrfState', csrfState, { maxAge: 60000 });

let url = 'https://open-api.tiktok.com/platform/oauth/connect/';

url += `?client_key=${CLIENT_KEY}`;
url += '&scope=user.info.basic';
url += '&response_type=code';
url += `&redirect_uri=${encodeURIComponent('https://example.com/authCallback')}`;
url += '&state=' + csrfState;

// redirect the user to the generated URL
// user will be prompted to login with tiktok
// and authorize needed permissions
res.redirect(url);

此代码将用户重定向到tiktok url，其中提示用户使用tiktok登录并授予访问权限。

​

(B)处理authorizationResponse，使用code获取access_token和open_id

一旦用户完成登录过程，tiktok将向您的第二个后端服务器端点authorizationResponse发送一个https://example.com/authCallback。在这个回调中，您会收到变量state和code。

// express example with
// `req` = request object
// `res` = response object

// check if the csrf token is valid
// its the developers responsibility
// to setup a validation logic.
if (!validateCsrfToken(req.query.state)) {
  throw new Error("invalid csrf token");
}

async function getAccessTokenAndOpenId(code, TIKTOK_CLIENT_KEY, TIKTOK_CLIENT_SECRET) {
  let urlAccessToken = 'https://open-api.tiktok.com/oauth/access_token/';
  urlAccessToken += '?client_key=' + TIKTOK_CLIENT_KEY;
  urlAccessToken += '&client_secret=' + TIKTOK_CLIENT_SECRET;
  urlAccessToken += '&code=' + code;
  urlAccessToken += '&grant_type=authorization_code';
  const resp = await axios.post(urlAccessToken);
  return {
    accessToken: resp.data.data.access_token,
    openId: resp.data.data.open_id,
  };
}

const code = req.query.code;
const { openId, accessToken } = await getAccessTokenAndOpenId(code, TIKTOK_CLIENT_KEY, TIKTOK_CLIENT_SECRET);

(C)获取basic user info

async function getBasicInfo(accessToken, openId) {
  let urlBasicInfo = `https://open-api.tiktok.com/user/info/`;
  const data = {
    access_token: accessToken,
    open_id: openId,
    fields: [
      "open_id",
      "union_id",
      "avatar_url",
      "avatar_url_100",
      "avatar_url_200",
      "avatar_large_url",
      "display_name",
    ],
  };
  const resp = await axios.post(urlBasicInfo, data);
  return resp.data.data.user;
}

const userBasicInfo = await getBasicInfo(accessToken, openId);
//  done!