0

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

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

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

4

1 回答 1

5

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

  1. 设置 tiktok 开发者账号https://developers.tiktok.com/

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

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

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

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

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

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

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

    (B)一旦用户完成授权，tiktok 会向你的回调 URL ( https://example.com/authCallback) 发送一个授权响应，其中包含一个变量code。使用 ，code您可以请求用户的access_tokenand open_id。

    (C)使用access_tokenandopen_id请求基本用户信息。

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

在您的前端，将用户重定向到https://example.com/auth. /auth然后在您的路线上运行以下 nodejs 后端代码。对于这个例子，我们使用一个快速应用程序（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 会向您的第二个后端服务器端点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!
于 2021-12-19T04:22:47.077 回答