We first defined the AccountInfo type for storing account information.
export interface AccountInfo {
provider: string;
accountId: string;
username: string;
description?: string;
profileUrl?: string;
avatarUrl?: string;
extraData: unknown;
}And attached it to the Platform type.
Then use the methods in the src/sync/account.ts file to get account information.
To display the currently logged-in account information to users on the frontend, we need to get Douyin account information.
The specific implementation is in the src/sync/account/douyin.ts file.
export async function getDouyinAccountInfo(): Promise<AccountInfo> {
// Access TikTok API to get user information
const response = await fetch('https://creator.douyin.com/web/api/media/user/info/', {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
credentials: 'include', // Include cookies to ensure authentication
});
if (!response.ok) {
throw new Error(`HTTP error, status code: ${response.status}`);
}
const responseData = await response.json();
if (!responseData.user) {
return null;
}
const result: AccountInfo = {
provider: 'douyin',
accountId: responseData.user.sec_uid,
username: responseData.user.nickname,
description: responseData.user.signature,
profileUrl: `https://www.douyin.com/user/${responseData.user.sec_uid}`,
avatarUrl: responseData.user.avatar_larger.url_list[0],
extraData: responseData,
};
return result;
}Through F12 in the Douyin backend, we found this interface for getting user information. After using fetch to get user information, we can display the currently logged-in account information to users on the frontend.
Then we mount this function to the getAccountInfo method in the src/sync/account.ts file.
The provider corresponds to the accountKey in PlatformInfo. Platform information will look up the corresponding account information in storage when returning.
Through the above steps, we can get Douyin account information and display it to users.