Flutter TikTok API集成插件idn_tiktok_api的使用

Flutter TikTok API集成插件idn_tiktok_api的使用

idn_tiktok_api项目开发了开源的Flutter插件库，用于与Tiktok的API进行集成。该项目提供了更简便的方法来集成Tiktok，因为我们发现遵循Tiktok的文档和支持可能不会奏效。

特性

• 支持Android集成
• 支持iOS集成

要求

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

开发状态

此项目仍在开发中。

示例

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

入门指南

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 Login Kit将通过App Link（Android）或Universal Link（iOS）重定向回您的应用。您需要处理App Link或Universal Link的重定向（如步骤3所示），并检索授权码。您必须使用该授权码换取访问令牌。一旦获得访问令牌，您可以使用它调用所有Tiktok的API。交换过程必须在后端进行。您可以遵循Tiktok的文档获取访问令牌此处。

代码示例

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

import 'package:flutter/services.dart';
import 'package:idn_tiktok_api/idn_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();

    /// 步骤1. 调用setup并传递客户端密钥（仅适用于Android）
    _tiktokApiPlugin.setup('<YOUR_TIKTOK_APP_CLIENT_KEY>');
  }

  // 平台消息异步初始化
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: TextButton(
            child: const Text('登录到Tiktok'),
            onPressed: () async {
              /// 步骤2. 调用login并传递作用域和重定向URI
              final result = await _tiktokApiPlugin.login(['user.info.basic'], '<YOUR_TIKTOK_APP_REDIRECT_URI>', true);

              /// 步骤3. 存储codeVerifier，我们稍后需要它来获取访问令牌
              final codeVerifier = result.codeVerifier!;

              /// 步骤4. Tiktok将重定向到您的应用重定向URI，您可以从查询字符串中检索代码。
              /// 您必须使用App Link或Universal Link以确保操作系统可以重定向到您的应用。
              /// 下面是一个使用uni_link包的示例
              /*
              if(link.startsWith('<REDIRECT_URI>')){
                final authCode = link.replaceAll("<REDIRECT_URI>?code=", "");

                /// 一旦我们得到authCode，我们可以将其兑换为访问令牌
                /// 了解更多详情：https://developers.tiktok.com/doc/oauth-user-access-token-management
                
              } 
              */

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