使用 Tiktok（网页）流程登录示例

Question

我希望用户在网络上使用 tikok 登录并获取他的基本信息，例如：

• avarat_url
• union_id（抖音提供的uniq用户标识）
• display_name

Tiktok Login Kit for Web Documentation似乎缺少有关如何实现完整调用序列的完整示例。还有一些事情根本没有解释（比如回调 URL）。有人可以分享他们的完整解决方案以及如何将 tiktok 登录集成到网页上的代码示例吗？

Answer 1

以下是网络实现的 tiktok 登录的完整示例：

1. 设置 tiktok 开发者帐户https://developers.tiktok.com/

2. 创建一个新应用程序，这将生成一个CLIENT_KEY和CLIENT_SECRET。

3. 创建您控制的 2 个后端端点，例如：

   • https://example.com/auth：构建 tiktok URL 并将用户重定向到该端点（系统将提示用户登录）。
   • https://example.com/authCallback：用户完成 Tiktok 流程登录后，Tiktok 会向此端点发送一个 AuthorizationResponse。authorizationResponse 包含您获取用户数据所需的信息。

4. 在“平台信息”部分：插入callback URL和redirect domain。回调URL是上面列出的 2 个服务器端点中的第二个。一旦用户成功登录并授予或拒绝所需的权限，Tiktok 就会向该 URL 发送授权响应。在重定向域中，只需添加域而不添加确切的路径。

5. 填写您的应用程序的所有信息并等待批准，这最多可能需要 1-3 天。

6. 一旦获得批准，您就可以实施完整的流程，其中包括多个步骤/请求。

   (A)将用户从您的前端发送到您的第一个后端端点https://example.com/auth。从那里，用户将被重定向到 tiktok 身份验证页面。

   (B)用户完成授权后，抖音会向您的回调 URL ( https://example.com/authCallback) 发送一个authorizationResponse，其中包含一个变量code。通过 ，code您可以请求用户的access_token和。open_id

   (C)使用access_token和open_id来请求基本用户信息。

(A) 将用户引导至抖音认证页面

在您的前端，将用户重定向到https://example.com/auth. 然后在您的路线上运行以下 Nodejs 后端代码/auth。对于此示例，我们使用Express应用程序（req= 请求对象，res= 响应对象）：

// 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 网址，系统会提示用户使用 tiktok 登录并授予访问权限。

(B) 句柄authorizationResponse, 用于code获取access_token和open_id

用户完成登录过程后，tiktok 会向您的第二个后端服务器端点https://example.com/authCallback发送一个authorizationResponse 。在该回调中，您收到变量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);

（三）获取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!