如何用TikTok API V2结合HTML+JS获取并展示最新视频信息

1. 先获取授权AccessToken #

要调用TikTok的video.list接口，必须先通过Login Kit获取目标账号的授权AccessToken，这是接口调用的核心凭证：

• 引导需展示视频的组织TikTok账号，通过Login Kit完成授权流程，获取access_token和open_id（用户唯一标识）。
• 确认你申请的user.info.basic和video.list权限已通过TikTok审核，否则接口会返回权限不足的错误。

2. HTML+JavaScript测试请求方案 #

以下是可直接测试的前端代码，用于获取并展示最新视频的标题、发布日期和封面图：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TikTok最新视频展示</title>
    <style>
        .video-item {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            width: 320px;
        }
        .video-cover {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>最新TikTok视频</h1>
    <div id="video-container"></div>

    <script>
        // 替换为你实际获取到的凭证
        const ACCESS_TOKEN = '你的access_token';
        const OPEN_ID = '你的open_id';
        // 注意：前端直接调用会有跨域问题，建议先通过后端代理（见下方说明）
        const API_URL = `https://open.tiktokapis.com/v2/video/list/?open_id=${OPEN_ID}`;

        async function fetchTikTokVideos() {
            try {
                const response = await fetch(API_URL, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${ACCESS_TOKEN}`,
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status}`);
                }

                const data = await response.json();
                console.log('接口返回完整JSON:', data); // 控制台查看返回数据
                renderVideos(data.data.videos);
            } catch (error) {
                console.error('获取视频失败:', error);
                document.getElementById('video-container').innerHTML = '<p>加载视频失败，请检查凭证和权限</p>';
            }
        }

        function renderVideos(videos) {
            const container = document.getElementById('video-container');
            if (videos.length === 0) {
                container.innerHTML = '<p>暂无视频</p>';
                return;
            }

            videos.forEach(video => {
                const videoItem = document.createElement('div');
                videoItem.className = 'video-item';
                // 把时间戳转为本地可读日期
                const publishTime = new Date(video.create_time * 1000).toLocaleString();
                videoItem.innerHTML = `
                    <h3>${video.title || '无标题'}</h3>
                    <p>发布时间: ${publishTime}</p>
                    <img src="${video.cover_image.url}" alt="${video.title || '视频封面'}" class="video-cover">
                `;
                container.appendChild(videoItem);
            });
        }

        // 页面加载时发起请求
        window.onload = fetchTikTokVideos;
    </script>
</body>
</html>

3. 跨域问题解决 #

前端直接调用TikTok API会触发浏览器跨域限制，建议搭建简单后端代理转发请求，示例Node.js代理代码：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = 3000;

app.get('/api/tiktok-videos', async (req, res) => {
    const ACCESS_TOKEN = '你的access_token';
    const OPEN_ID = '你的open_id';
    const API_URL = `https://open.tiktokapis.com/v2/video/list/?open_id=${OPEN_ID}`;

    try {
        const response = await fetch(API_URL, {
            headers: {
                'Authorization': `Bearer ${ACCESS_TOKEN}`,
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        res.json(data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.listen(PORT, () => {
    console.log(`代理服务器运行在 http://localhost:${PORT}`);
});

此时前端的API_URL需修改为http://localhost:3000/api/tiktok-videos。

4. 额外注意事项 #

• AccessToken有有效期，需实现Token刷新机制，避免过期后无法调用接口。
• 可通过max_count和cursor参数实现视频列表的分页查询。

参考文档中文翻译 #

展示API快速入门 #

1. 注册TikTok开发者账号并创建应用，获取应用凭证（app_id、client_key、client_secret）。
2. 申请所需API权限并提交审核，审核通过后方可调用对应接口。
3. 集成Login Kit获取用户授权，获取AccessToken用于后续接口调用。
4. 按照接口规范发起请求，注意参数格式、请求头配置和返回数据结构。

TikTok API v2 视频列表接口 #

• 接口用途：获取授权用户发布的视频列表，支持分页查询。
• 请求方式：GET
• 核心请求参数：
  • open_id：授权用户的唯一标识
  • max_count（可选）：单次请求返回的最大视频数，默认20，上限100
  • cursor（可选）：分页游标，用于获取下一页数据
• 返回数据：包含视频标题、发布时间戳、封面图URL、视频ID等基础信息。

内容的提问来源于stack exchange，提问作者serhumanos