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

Question

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

avarat_url
union_id（抖音提供的唯一用户标识）
display_name

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

Answer 1

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

设置抖音开发者账号https://developers.tiktok.com/
创建一个新应用，这将生成一个CLIENT_KEY和CLIENT_SECRET。
创建 2 个您控制的后端端点，例如：
- https://example.com/auth : 构建一个 tiktok URL 并将用户重定向到该端点（用户将被提示登录）。
- https://example.com/authCallback ：一旦用户完成了tiktok flow的登录，tiktok就会向这个端点发送一个authorizationResponse。 authorizationResponse 包含获取用户数据所需的信息。
在“平台信息”部分：插入callback URL和redirect domain。 回调 URL 是上面列出的 2 个服务器端点中的第二个。一旦用户成功登录并授予或拒绝所需的权限，Tiktok 将向 URL 发送 authorizationResponse。在 redirect domain 中只需添加没有确切路径的域。
为您的应用填写所有信息并等待批准，这最多可能需要 1-3 天。
一旦获得批准，您就可以实施完整的流程，其中包括多个 steps/requests。

(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) 将用户发送到 Tiktok 认证页面

在您的前端，将用户重定向到 https://example.com/auth。然后运行您的 /auth 路由上的以下 nodejs 后端代码。对于此示例，我们使用 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 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!

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

Example of Login with Tiktok (web) flow

oauth

tiktok

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

(A) 将用户发送到 Tiktok 认证页面

(B) 处理authorizationResponse，使用code得到access_token和open_id

(C) 获取 basic user info

(B) 处理`authorizationResponse`，使用`code`得到`access_token`和`open_id`

(C) 获取 `basic user info`