Flutter TikTok API集成插件tiktok_api的使用

Flutter TikTok API集成插件tiktok_api的使用

<code>tiktok_api</code>项目开发了一个开源的Flutter插件库，用于与TikTok的API进行集成。该项目提供了更简单的方式来集成TikTok，因为根据TikTok的文档和支持，直接集成可能不会成功。

这个项目是免费的，但您可以支持作者。

特性

• (WIP) 集成Android
• (alpha) 集成iOS
• (计划中) 集成Web

要求

• Flutter版本 3.x.x
• Dart版本 3.x.x
• 一个网络服务器来存储App Link（Android）配置文件
• 一个网络服务器来存储Universal Link（iOS）配置文件
• 一个后端服务器来交换TikTok的授权码（登录成功后）与TikTok的访问令牌

开发状态

此项目仍在开发中。

Demo

入门指南

1. 在TikTok开发者网站上创建一个应用。
2. 添加Login Kit产品并为Android配置Login Kit。同时为iOS配置Login Kit。如果遇到重定向URI错误，可以在Login Kit的重定向URI末尾添加斜杠，例如：https://www.abc.com/login-callback/。
3. 为Android配置App Link（可以使用Uni Links包）并测试App Link是否正常工作。
4. 为iOS配置Universal Link（可以使用Uni Links包）并测试Universal Link是否正常工作。
5. 配置您的TikTok应用的范围。可以从user.info.basic开始。
6. 提交您的应用，并确保状态为Live in Production。
7. 安装此插件包 flutter pub add tiktok_api
8. 调用setup()方法并传递您的TikTok应用客户端密钥：_tiktokSDKApi.setup('<API_KEY>')
9. 调用login()方法并传递范围：_tiktokSDKApi.login(['user.info.basi'], 'https://www.abc.com/login-callback/', browserAuthEnabled)
10. 一旦用户授权了您的TikTok应用，那么TikTok登录工具包将通过App Link（Android）或Universal Link（iOS）重定向回您的应用。您的任务是处理App Link或Universal Link的重定向（上述步骤3），并检索授权码。您必须使用此授权码与访问令牌进行交换。一旦获取到访问令牌，就可以使用它调用所有TikTok的API。此交换过程必须在后端进行。您可以参考TikTok的文档来获取访问令牌在这里。

您可以在example文件夹中查看如何使用此插件库的示例代码。

行为准则

请参阅我们的行为准则文档以了解社区指南。

开发者指南

顺序图

有两个阶段。首先，我们必须做一些设置以便能够与原生侧通信。然后我们继续登录TikTok并向用户请求授权信息范围。一旦用户授权，我们就必须使用授权码换取访问令牌。访问令牌将包含模仿凭据和范围。一旦我们获得访问令牌，就可以使用它调用所有TikTok API。

设置阶段

sequenceDiagram
  Flutter App ->> Pigeon Host on Dart's side: setup()
  Pigeon Host on Dart's side ->> Pigeon Host on iOS/Android side: setup()
  Pigeon Host on iOS/Android side ->> Tiktok SDK: setup()

获取访问令牌

sequenceDiagram
  Flutter App ->> uni_link: setup App Link/Universal Link()
  Flutter App ->> Pigeon Host on Dart's side: login()
  Pigeon Host on Dart's side ->> Pigeon Host on iOS/Android side: login()
  Pigeon Host on iOS/Android side ->> Tiktok SDK: login()
  par Login Response and Web Browser running in parallel
    Tiktok SDK --> Pigeon Host on iOS/Android side: response{verifier, etc}
    Pigeon Host on iOS/Android side --> Pigeon Host on Dart's side: response{verifier, etc}
    Pigeon Host on Dart's side --> Flutter App: response{verifier, etc}
    Flutter App ->> Flutter App: save response{verifier, etc} and wait for uni_link callback
  and    
    par Web Browser Opening and the app put to background in parallel
      Native OS ->> Flutter App: put on background
    and
      
      Tiktok SDK ->> Web Browser: open Tiktok's Login site      
      Web Browser ->> Web Browser: succesful login
      Web Browser --> Native OS: App Link or Universal Link callback {Authorization Code}
      Native OS ->> Flutter App: put on foreground

      Flutter App --> Native OS: foreground success

      Native OS --> uni_link: App Link or Universal Link callback {Authorization Code}
      uni_link --> Flutter App: Retrieve Authorization Code from App Link/Universal Link
      Flutter App ->> Backend Server: exchange token {verifier, Authorization Code}
      Backend Server ->> Tiktok API: exchange token {verifier, Authorization Code}
      Tiktok API --> Backend Server: access token
      Backend Server --> Flutter App: access token
    end
  end

开发

我们使用Flutter的<a href="https://pub.dev/packages/pigeon">pigeon</a>包为我们提供双向通信所需的基础架构。

1. 我们定义了我们的pigeon.dart文件。包含代码生成器的配置、消息数据结构和主机接口。
2. 运行dart run pigeon --input pigeon.dart，pigeon将生成所有所需的通信基础架构以及主机接口的实现。
3. 设置原生侧主机实现。
4. 在Dart的一侧实例化主机接口实现，并对原生一侧进行远程调用。

示例代码

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:tiktok_api/tiktok_api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _tiktokApiPlugin = TiktokApi();

  [@override](/user/override)
  void initState() {
    super.initState();

    /// Step 1. Call the setup and passed the client key (this is applies to Android only)
    _tiktokApiPlugin.setup('<YOUR_TIKTOK_APP_CLIENT_KEY>');
  }

  // Platform messages are asynchronous, so we initialize in an async method.

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: TextButton(
            child: const Text('Login to Tikok'),
            onPressed: () async {
              /// Step 2. Call login and passed the scopes and redirect uri
              final result = await _tiktokApiPlugin.login(['user.info.basic'], '<YOUR_TIKTOK_APP_REDIRECT_URI>', true);

              /// Step 3. Store the code verifier, we will need this later on for getting the access token
              final codeVerifier = result.codeVerifier!;

              /// Step 4. Tiktok will redirect to your app redirect_uri and you can retrieve the code from the query string.
              /// You have to use App Link or Universal Link to make sure the OS can redirect to your app.
              /// Below is an example using uni_link package
              /*
              if(link.startsWith('<REDIRECT_URI>')){
                final authCode = link.replaceAll("<REDIRECT_URI>?code=", "");

                /// Once we got the authCode we can exchange it with the access token
                /// Read more here: https://developers.tiktok.com/doc/oauth-user-access-token-management
                
              } 
              */

            },
          ),
        ),
      ),
    );
  }
}