Flutter TikTok SDK集成插件tiktok_sdk_v2的使用

tiktok_sdk_v2

Native SDK documentation 👉 https://developers.tiktok.com/doc/getting-started-create-an-app/

iOS Configuration

Step 1: Configure TikTok App Settings for iOS

前往 TikTok 开发者应用注册页面创建您的应用。审核通过后，您将获得 Client Key 和 Client Secret。

Step 2: Configure Xcode Project

配置 Info.plist 文件：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>tiktokopensdk</string>
    <string>tiktoksharesdk</string>
    <string>snssdk1180</string>
    <string>snssdk1233</string>
</array>
<key>TikTokClientKey</key>
<string>$TikTokClientKey</string>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>$TikTokClientKey</string>
    </array>
  </dict>
</array>

Step 3: Edit AppDelegate.swift

在 AppDelegate.swift 文件中添加以下代码：

import UIKit
import Flutter

// Add this line
import TikTokOpenSDKCore

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  // Add this function
  override func application(
      _ app: UIApplication,
      open url: URL,
      options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
      if TikTokURLHandler.handleOpenURL(url) {
          return true
      }
      return false
  }
  
  // Add this function
  override func application(
      _ application: UIApplication,
      continue userActivity: NSUserActivity,
      restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
  ) -> Bool {
      if (TikTokURLHandler.handleOpenURL(userActivity.webpageURL)) {
          return true
      }
      return false
  }
}

Android Configuration

Step 1: Configure TikTok App Settings for Android

使用开发者门户申请 Android client_key 和 client_secret 访问权限。申请审核通过后，开发者门户将提供这些密钥的访问权限。

Step 2: Edit Your Manifest

由于 Android 11 对包可见性的更改，当在目标为 Android 11 及更高版本的设备上实现 TikTok SDK 时，需要在 AndroidManifest.xml 文件中添加以下内容：

<queries>
    <package android:name="com.zhiliaoapp.musically" />
    <package android:name="com.ss.android.ugc.trill" />
</queries>

Flutter

Step 1: Setup config

await TikTokSDK.instance.setup(clientKey: DefaultConfig.user.tiktokClientKey);

Step 2: Call login

final result = await TikTokSDK.instance.login(permissions: {
  TikTokPermissionType.userInfoBasic,
  TikTokPermissionType.videoList
}, redirectUri: DefaultConfig.system.redirectUri);

Example Code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:tiktok_sdk_v2/tiktok_sdk_v2.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  TikTokSDK.instance.setup(clientKey: 'TikTokAppID');
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String loginResult = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  final result = await TikTokSDK.instance.login(permissions: {
                    TikTokPermissionType.userInfoBasic,
                    TikTokPermissionType.videoList
                  }, redirectUri: "...");
                  setState(() => loginResult = result.toString());
                },
                child: const Text('Tiktok sdk 2.0 Login'),
              ),
              const SizedBox(height: 16),
              Text('Login result: $loginResult'),
            ],
          ),
        ),
      ),
    );
  }
}

以上是一个完整的示例，展示了如何在 Flutter 应用中集成 tiktok_sdk_v2 插件并进行登录操作。希望对您有所帮助！