Andrea's WebDev log

Andrea's WebDev log

How to implement TikTok Login Kit for Web in PHP

How to implement TikTok Login Kit for Web in PHP

Official API implementation via Open Source SDK

TikTok has recently released their new API to allow Social Login via their platform. They called it Login Kit for Web.

With more Gen-Z and Millennials in the platform, allowing the simplified signup and login process via TikTok is the logical step for many Web Apps, including our very own Lnk.Bio.

While the implementation is a very basic oauth2 flow, there were no published class nor guides specific to PHP implementation, so I thought useful to publish an Open-source class and this quick tutorial based on such class.

Step 1: Register your App

First of all, you need to register in the TikTok Developers platform](https://developers.tiktok.com/). Process is easy and approval is quite fast; it took us just 24hrs to get approved with Lnk.Bio.

Pay attention to the approved redirect URLs. While the TikTok page calls them “Redirect Domains”, they actually require full URLs, so the full path of the page where you’re redirected after the TikTok login.

After you register your application you will receive, as usual a Client Key and Client Secret.

Step 2: Install helper class

Use Composer to install the PHP helper

composer require gimucco/tiktok-loginkit

If, for any reason, you’re not using Composer, you can download the class from Github. Current stable is v0.1.

Step 3: Full Login Example

The login flow is typical:

  • Generate a Redirect Url to send the user to TikTok to authorise your app
  • Receive the Authorisation Token
  • Exchange the Authorisation Token with an Access Token that you can use for the rest of the calls
  • Make a sample call to retrieve the User Information

Here’s a quick code sample

session_start(); // Important! Required for STATE Variable check and prevent CSRF attacks
require_once __DIR__.'/../../../autoload.php';
use gimucco\TikTokLoginKit;

$api_key = ''; // Your API Key, as obtained from TikTok Developers portal
$api_secret = ''; // Your API Secret, as obtained from TikTok Developers portal
$redirect_uri = ''; // Where to return after authorization. Must be approved in the TikTok Developers portal
$_TK = new TikTokLoginKit($api_key, $api_secret, $redirect_uri);

if (TikTokLoginKit\Connector::receivingResponse()) { // Check if you're receiving the Authorisation Code
    try {
        $token = $_TK->verifyCode($_GET[TikTokLoginKit\Connector::CODE_PARAM]); // Verify the Authorisation code and get the Access Token

        // ** Your logic to store the access token goes here

        $user = $_TK->getUser(); // Retrieve the User Object

        // ** Your logic to store or use the User Info goes here

        // Print some HTML as example
        echo <<<HTML
        <table width="500">
            <tr>
                <td with="200"><img src="{$user->getAvatarLarger()}"></td>
                <td>
                    <br />
                    <strong>ID</strong>: {$user->getOpenID()}<br /><br />
                    <strong>Name</strong>: {$user->getDisplayName()}
                </td>
            </tr>
        </table>
HTML;
    } catch (Exception $e) {
        echo "Error: ".$e->getMessage();
        echo '<br /><a href="?">Retry</a>';
    }
} else { // Print the initial login button that redirects to TikTok
    echo '<a href="'.$_TK->getRedirect().'">Log in with TikTok</a>';
}

All done! If you have any suggestion on the class or its implementation please feel free to reach out on GitHub or Twitter.

 
Share this