Create a Custom Social Connection with TikTok
Before you start
Before you start configuring your application to use TikTok as a social connection, you need:
An Auth0 account with an application using Auth0 to authenticate your users.
A URL for your Terms of Services page for the TikTok Application Review Process.
Configure TikTok
You can use TikTok as a social login to your application. Access and configure your TikTok developer account using the following steps:
In TikTok developer, select Manage apps.
Select Connect an app.
Under the Configuration section, add an application icon, application name, and description.
Under Platforms, choose your application type:
For Web applications, add a valid URL.
For Android, add the Android package name, Play Store URL, and application signature(s).
For iOS, add the App Store URL and Bundle ID.
Under the Product menu, select Add Product.
Select the Login Kit.
Then, select the TikTok API.
In the Product section, add the URL of your Terms of Service page, the URL of your Privacy Policy page, and your redirect domain to the Login Kit. The redirect domain is your Auth0 domain found in Dashboard > Applications > Applications under the Settings tab. For example:
dev-test-1.us.auth0.com
.Select Save Changes. Then, select Submit for review.
Wait until your application status moves from
Staging
toProduction
. It could take up to several hours for TikTok to review your application and update the status.
Configure Auth0
You must create a custom connection to associate your TikTok instance with Auth0.
Navigate to Auth0 Dashboard > Authentication > Social.
Choose Create Connection.
Scroll to the bottom of the list and choose Create Custom.
Enter the following to create a New Custom Social Connection:
Name: TikTok
Authorization URL: TikTok’s Authorization URL
https://www.tiktok.com/auth/authorize/
Token URL: This will eventually be your proxy. Use a placeholder URL:
https://example.com
Scope:
user.info.basic
Client ID: Client key assigned to you by TikTok
Client Secret: Client secret assigned to you by TikTok
Configure the Fetch User Profile Script to fetch profile information from TikTok's user_info endpoint. Map attributes to Auth0’s normalized user profile.
function fetchUserProfile(accessToken, context, cb) {
const axios = require('axios@0.22.0');
const userInfoEndpoint = 'https://open.tiktokapis.com/v2/user/info?fields=union_id';
const headers = { 'Authorization': 'Bearer ' + accessToken };
axios
.get(userInfoEndpoint, { headers })
.then(res => {
if (res.status !== 200) {
return cb(new Error(res.data));
}
const profile = {
user_id: res.data.user.union_id,
};
cb(null, profile);
})
.catch(err => cb(err));
}
Was this helpful?
6. Click Create.
7. Navigate to the application you want to use with the TikTok connection under Dashboard > Applications > Applications.
8. Under the Connections tab, toggle on the TikTok option.
Pass customs parameters to TikTok with the Management API
Since TikTok uses a client_key
parameter instead of client_id
, you must use the Management API to pass the client_key
parameter during authentication.
To use the Management API, you need to generate an access token.
Navigate to Auth0 Dashboard > Applications > APIs and select the Auth0 Management API.
Select the API Explorer tab.
Select Create & Authorize Test Application.
Copy the provided token.
Navigate to the Auth0 Management API Explorer. You may need to open an incognito window.
Select Set API Token in the top, left-hand corner.
Paste the token and select Set Token.
You should now be able to configure your Auth0 tenant with the Management API.
Configure the `client_key` field
Use the Get a connection method to retrieve the `options` object values. The following is a sample response object:
{
"options": {
"client_id": "",
"client_secret": "",
"scope": "user.info.basic"
}
}
Was this helpful?
2. Add the upstream_params
object with the client_key
field:
{
"options": {
"client_id": "",
"client_secret": "",
"scope": "user.info.basic",
"upstream_params": {
"client_key": { "value": "<Client Key from TikTok>" }
}
}
}
Was this helpful?
3. Use the Update a connection method with the options
object as the body. Auth0 will send the client_key=<value>
parameter to TikTok's authorization endpoint.
Access token request
You cannot pass custom parameters in a request to the Authentication API's /token
endpoint to gain an access or ID token. You must proxy the request to the token endpoint and append the client_key
parameter programmatically with proxy endpoints in your environment.
Deploy TikTok integration proxy
Use the sample code from the GitHub repository and follow the instructions in the README to install dependencies and start the development server.
The example server has one
POST
route,/proxy/token
. The server should be running onhttp://localhost:3333
.
Copy the proxy endpoint to be used in your TikTok Developer setup. The proxy endpoint should be something similar to:
https://405a-104-129-13b-250.ngrok.io/proxy/token
.In TikTok Developer, navigate back to the social connection configuration. Update the Token URL that you set to
https://example.com
and enter the proxy URL.
Once the configuration is saved, your users should be able to log in with TikTok.