AccountInfo Implementation

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.

Douyin Account Information Retrieval

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.

Mission Accomplished

Through the above steps, we can get Douyin account information and display it to users.

Douyin Account Information Retrieval Development Record

AccountInfo Implementation

Douyin Account Information Retrieval

Mission Accomplished

On this page