In this article, you will learn how to set up and configure TikTok API in order to integrate TikTok login into Magento 2 Social Login Pro plugin. Please follow the step-by-step instructions below to set up the integration correctly.
How to Set Up TikTok API for Magento 2
In order to get TikTok API credentials, you need to create a developer application. First, go to developers.tiktok.com and register a TikTok developer account.
Step-by-step guide:
- Log in to the TikTok platform for developers with the account you just created. Click Manage apps on the right side of the header navigation bar.
- Click Connect an app to create a new app.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 1](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-1.png&nocache=1)
App Details
The App Details section provides you with your TikTok API app credentials. Later, you will need to use the following credentials to set up the Magento 2 TikTok integration in the Magento admin panel. Note that the credentials will be valid after the application is reviewed and approved.
Step-by-step guide:
- “Client key“: this is your API Key to be pasted in the TikTok integration settings in the Magneto 2 admin panel.
- “Client secret“: this is your Client Secret to be pasted in the TikTok integration settings in the Magneto 2 admin panel.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 2](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-2.png&nocache=1)
Configuration
The Configuration section displays and collects basic app information. Please fill in the necessary information in order for your application to be reviewed.
Step-by-step guide:
- “App icon“: upload your App icon that will be displayed in the TikTok ecosystem.
- “App name“: provide the descriptive name for your application to be displayed on the TikTok ecosystem.
- “Category“: selecting a category the application will be used under.
- “Description“: include a description of the app and how it will be used.
- Under the Platform section, switch the Configure for Web toggle to On to indicate that you will run your app on the web.
- “Website URL“: provide your website URL where you are going to implement the TikTok Login.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 3](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-3.png&nocache=1)
Products
In this section, you should add and set up products in your app.
Step-by-step guide:
- On the left-hand side navigational panel, click +Add products.
- Click Add for the Login Kit and Webhooks products.
- Click Done to start configuring the products.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 4](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-4.png&nocache=1)
Step-by-step guide:
- Under Login Kit, provide the URLs of your website’s Terms of Service and Privacy Policy, as well as your website domain without http/https or path.
- Under Webhooks, paste the Callback URL from the TikTok settings in the Magento admin panel.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 5](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-5.png&nocache=1)
Step-by-step guide:
- Scroll up and click Save changes to save current progress.
- Click Submit for review once you have completed, and the application we will be reviewing by TikTok.
- You can always come back and check the Status field. Once submitted for review, the status is Under review, and once approved, it changes to Live in production.
![Magento 2 TikTok Login Integration - Setting Up applicaiton 6](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-6.png&nocache=1)
Configuring TikTok Integration in Magento 2 Social Login Pro Extension
At this point, you should paste the created API keys into your Magento 2 Social Login Pro Extension configuration. In the main Magento menu, go to Plumrocket -> Social Login Pro -> Configuration -> TikTok, and perform the following steps:
Step-by-step guide:
- Set the Enable option to Yes to enable TikTok Login on your Magento 2 website.
- Paste the API Key and API Secret you got when setting up a TikTok application.
- This Redirect URI is to be pasted during the TikTok application configurations.
- Skip this step to have the extension use the default icons for the TikTok login buttons, or select the files to use your own.
- Specify the text to be displayed on the TikTok login buttons.
- Click Save Config to save the configurations.
![Setting Up Magento 2 TikTok Login Integration](https://plumrocket.com/docs/wp-content/webpc-passthru.php?src=https://plumrocket.com/docs/wp-content/uploads/2022/08/magento-2-social-login-extension-tiktok-api-configuration-7.png&nocache=1)