Login Kit for Web

Overview

This guide details how to enable authentication from your web app to TikTok. After successfully completing authentication with TikTok, developers can obtain an access_token for the TikTok user.

Prerequisites

Obtain a client key and secret from the developer portal on https://developers.tiktok.com under Manage apps.

Integration Guide

1. Implement Frontend Code

Get started by connecting your frontend login button to the server endpoint. The following is an example in HTML:

<a href='{SERVER_ENDPOINT_OAUTH}'>Continue with TikTok</a>

2. Implement Server Code to Handle Authorization Grant Flow

The server code must be responsible for the following:

• Ensuring that the client secret and refresh token are stored securely.
• Ensuring that the security for each user is protected by preventing request forgery attacks.
• Handling the refresh flow before access token expiry.
• Managing the access token request flow for each user.

2.1 Redirect Request to TikTok's Authorization Server

Create an Anti-Forgery State Token

You must prevent request forgery attacks to protect the security of your users. The first step before making the redirect request to TikTok's authorization server is to create a unique session token to maintain the state between the request and callback.

You will later match this unique session token with the authentication response to verify that the user is making the request and not a malicious attacker.

One of the simple approaches to a state token is a random generated alphanumeric string constructed using a random-number generator.

const csrfState = Math.random().toString(36).substring(2);

Initial Redirect to TikTok's Authorization Page

To make the initial redirect request to TikTok's authorization server, the following query parameters below must be added to the Authorization Page URL.

Redirect your users to the authorization page URL and supply the necessary query parameters. It's important to note that the page can only be accessed through HTTPS.

Example using Node, Express, JavaScript:

const express = require('express');
const app = express();
const fetch = require('node-fetch');
const cookieParser = require('cookie-parser');
const cors = require('cors');

app.use(cookieParser());
app.use(cors());
app.listen(process.env.PORT || 5000).

const CLIENT_KEY = 'abc' // this value can be found in app's developer portal

app.get('/oauth', (req, res) => {
    const csrfState = Math.random().toString(36).substring(2);
    res.cookie('csrfState', csrfState, { maxAge: 60000 });

    let url = 'https://www.tiktok.com/auth/authorize/';

    url += '?client_key={CLIENT_KEY}';
    url += '&scope=user.info.basic,video.list';
    url += '&response_type=code';
    url += '&redirect_uri={SERVER_ENDPOINT_REDIRECT}';
    url += '&state=' + csrfState;

    res.redirect(url);
})

2.2 TikTok Prompts User to Login or Signup

The authorization page takes the user to the TikTok website if the user is not logged in. They are then prompted to log in or sign up for TikTok.

2.3 TikTok Prompts User for Consent

After logging in or signing up, an authorization page asks the user for consent to allow your application to access your requested permissions.

2.4 Manage Authorization Response

If the user authorizes access, they will be redirected to the redirect_uri with the following query parameters appended:

2.5 Manage Access Token

Using the code appended to your redirect_uri, you can obtain an access_token for the user, which completes the Login with TikTok flow.

See Manage User Access Tokens for related endpoints.