Docs
Get Started
This guide will show you how to get an authorization code and an access token in order to utilize the Display APIs. We will use the Display APIs to display a TikTok user's profile and videos on your platform.
Before You Start
You will need access to:
- A TikTok developer account on TikTok Developer Portal
- Approval for both a Login Kit and Open API products
- Granted
user.info
.basic
andvideo.list
scopes for your app
- A TikTok account with a few posted videos
Authorization
Get an Authorization Code
Follow these documents to integrate with our login kit, and use your TikTok account to authorize and get an access token. You will need to set scope=user.info.basic,video.list.
After following one of the tutorials to get user authorization, you will be able to get an authorization code that looks like the following:
wFPH5DePZMb07BPJvpWi-WotFlq1ISzFYQBDb9S9CBUQkGZRGW3zOAbYzhGXkoYkFx-aDeph0hTFk3l6ngGYuoixRvvZBWV1e3Q_BFoBELY*0!6410
Get an Access Token
Follow this tutorial to use the authorization code to retrieve the user's access token and open id.
{
"data": {
"access_token": "act.c39724355c65afcd2d7026dcdbd76d40LJQ7fHsqvfUVmZl5nxWKEJ1FU1wc!6393",
"captcha": "",
"desc_url": "",
"description": "",
"error_code": 0,
"expires_in": 86400,
"log_id": "20220714041044010002007735002037040BAF34",
"open_id": "cdbbfaea-34f6-4a45-ab45-b12f78b1813d",
"refresh_expires_in": 31536000,
"refresh_token": "rft.dc8946222f5c87a21f681dc7995e3hEuMiySL8qLspsKgovFb6D0NyMly!6418",
"scope": "user.info.basic"
},
"message": "success"
}
Display User's TikTok Profile
Step 1: Build the UI to link the TikTok account profile
Step 2: Call POST /user/info/ API using access_token to get user profile information
Example request:
curl --location --request POST 'https://open-api.tiktok.com/user/info/?access_token=act.1a4b9d05d9ad1a56294b93b5609cdfbdNzQgbpbUWyFNvhC9QqIvKEjuuPHn' \
--header 'Content-Type: application/json' \
--data-raw '{
"fields": ["open_id", "union_id", "avatar_url", "display_name"]
}'
Example response:
{
"data": {
"user": {
"open_id": "cdbbfaea-34f6-4a45-ab05-b11b78b1813d",
"union_id": "c2b29f6c-cc4c-4e46-9e92-2ec48fd143ac",
"avatar_url": "https://p16-sign-va.tiktokcdn.com/musically-maliva-obj/1594805258216454~c5_168x168.jpeg?x-expires=1657951200&x-signature=UdUSHGFtQjSt5Jf3BhKFJJ348o0%3D",
"display_name": "Tik Toker"
}
},
"error": {
"code": 0,
"message": ""
}
}
Step 3: Parse and store the TikTok user profile information, designing the UX to display it.
Display User's Recent TikTok Videos
Design and build the interface to encourage users to authorize displaying their recent TikTok videos on your platform.
Step 1: Call POST /video/list/ using the access token to get a list of a user's recent videos. The videos are returned sorted by the video's creation time in descending order.
Example request:
curl --location --request POST 'https://open-api.tiktok.com/video/list/?access_token=act.1a4b9d05d9ad1a56294b93b5609cdfbdNzQgbpbUWyFNvhC9QqIvKEjuuPHn' \
--header 'Content-Type: application/json' \
--data-raw '{
"fields": ["id", "title", "video_description", "duration", "cover_image_url", "embed_link"]
}'
Example response:
{
"data": {
"videos": [
{
"id": "7080213458555737986",
"title": "video 1",
"video_description": "Test video 1",
"duration": 2,
"cover_image_url": "https://p16-sign-sg.tiktokcdn.com/tos-alisg-p-0037/49b5eb2713004dfa429eab84566e~tplv-noop.image?x-expires=1657851434&x-signature=FjrSxXTCWpQUM57Ao2SNsoLtf%2B0%3D",
"share_url": "https://www.tiktok.com/@user_id/video/7080213458555737986?utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
"embed_link": "https://www.tiktok.com/static/profile-video?id=7080213458555737986&hide_author=1&utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
},
{
"id": "7080217258545735586",
"title": "video 2",
"video_description": "Test video 2",
"duration": 3,
"cover_image_url": "https://p16-sign-sg.tiktokcdn.com/tos-alisg-p-0037/49b5eb2713004dfa422dab84566e~tplv-noop.image?x-expires=1657851434&x-signature=FjrSxXTCWpQUM57Ao2SNsoLtf%2B0%3D",
"share_url": "https://www.tiktok.com/@user_id/video/7080217258545735586?utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
"embed_link": "https://www.tiktok.com/static/profile-video?id=7080217258545735586&hide_author=1&utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
},
...
],
"cursor": 1646883959000,
"has_more": true
},
"error": {
"code": 0,
"message": ""
}
}
Step 2: Design and build the interface to display a user's recent videos on their profile. Open a webview with the url embed_link
to consume the video on user clicks.
Step 3: Schedule background jobs to keep access token up-to-date using the Refresh Token. This will fetch and update the user's recent TikTok videos every 12 hours.
Display User's Self-Selected TikTok Videos
Design and build the interface to encourage users to bring their TikTok videos to your platform.
Step 1: Call POST /video/list/ using access token to get a list of user's videos. This part is same as displaying a user's recent TikTok videos.
Step 2: Design the UI to display the videos with cover_image_url
and duration
, and let the user select videos to add to your app. After they complete selection, save the metadata of the user's selected videos. Design the UI to present user's TikTok videos.
Step 3: The cover_image_url
will expire in some time, so we need to call POST /video/query/to query the video metadata filtered by video_id.
Example request:
curl --location --request POST 'https://open-api.tiktok.com/video/query/?access_token=act.1a4b9d05d9ad1a56294b93b5609cdfbdNzQgbpbUWyFNvhC9QqIvKEjuuPHn' \
--header 'Content-Type: application/json' \
--data-raw '{
"filters": {
"video_ids": [
"7077642457847994444",
"7080217258529732386"
]
},
"fields": ["id", "cover_image_url", "embed_link"]
}'
Example response:
{
"data": {
"videos": [
{
"cover_image_url": "https://p16-sign-sg.tiktokcdn.com/tos-alisg-p-0037/c5e4394893164bbf90605100e8bdd45c~tplv-noop.image?x-expires=1657852284&x-signature=e%2FMfIsqpUUUoXBe0mXuz5wVdfhc%3D",
"id": "7077642457847994444",
"embed_link": "https://www.tiktok.com/static/profile-video?id=7077642457847994444&hide_author=1&utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
},
{
"cover_image_url": "https://p16-sign-sg.tiktokcdn.com/tos-alisg-p-0037/49b5eb2713004cc2be8a429eab84566e~tplv-noop.image?x-expires=1657852284&x-signature=kNFfMCgOsal78%2BpX8alQooUpNbo%3D",
"id": "7080217258529732386",
"embed_link": "https://www.tiktok.com/static/profile-video?id=7080217258529732386&hide_author=1&utm_campaign=tt4d_open_api&utm_source=awbx37vxswqcvsf6",
}
],
"cursor": 0,
"has_more": false
},
"error": {
"code": 0,
"message": ""
}
}
Step 4: Open a webview with the url embed_link
to consume the video on user clicks. Users can now view TikTok videos on your platform to know more about the author.