【原创 附源码】Flutter海外登录--Tiktok登录最详细流程
最近接触了几个海外登录的平台,踩了很多坑,也总结了很多东西,决定记录下来给路过的兄弟坐个参考,也留着以后留着回顾。更新时间为2024年2月7日,后续集成方式可能会有变动,所以目前的集成流程仅供参考,但是绝对详细。
整个记录会包含源码。
dart环境:sdk: '>=2.7.0 <3.0.0'
集成海外登录需要科学上网,一共涉及四个平台,Tiktok,Facebook,Google以及Apple登录。我会分别一一整理记录,所以我的项目就命名为fgta_login (Facebook,Google,Tiktok,Apple登录),奇怪的命名+1。
这篇文章只记录TikTok登录的详细流程,其他几个平台的登录会陆续更新,
一 TikTok开发者官网配置
首先去TikTok开发者官网去注册账号,并创建一个app,登记上安卓和iOS端的信息
TikTok开发者官网地址:https://developers.tiktok.com/
进来后点击用户头像,然后点击【应用管理】
然后点击创建app
输入创建的项目名
然后根据你的app,配置完所有信息,app图标、说明、隐私协议之类的。
打开安卓和iOS平台的配置,按需选择,做哪个平台启用哪个平台就好了
开始安卓端配配置,需要如下几个参数:
Android package name:在安卓项目这里找
Google Play Store URL:谷歌商店链接,这个需要你的安卓端在谷歌商店审核通过之后才会有,如果审核不通过的话,Tiktok这里创建的app提交之后也是不通过的。建议谷歌商店审核通过之后再来做安卓端的Tiktok集成。
App signature 应用签名:告诉大家一个快捷的获取方法,使用android studio提供的gradle插件,点击如下两个地方,切记粘贴到Tiktok上的时候,要去掉中间链接的【:】号,不然会报错
Signing certificate fingerprints 证书指纹:也在同样的地方获取,这个不需要去除中间的冒号
安卓端的配置就完成了,最后配置结果如下
开始iOS端配配置:
App Store URL :苹果商店的链接,在苹果开发者中心创建app之后就会有
格式如下:https://apps.apple.com/cn/app/idxxxxxxxxxx
Bundle ID:在iOS项目这里获取:
填写完如下:
至此,平台上的安卓和IOS的基本配置就完成了,接下来是增加登录套件。
点击【Add products】
选择Login Kit
然后在这里分别配置安卓和IOS的Redirect URI回调,这个网络上资料很多,各位自行去查找吧,配置好放在这里就可以了
重要提醒:截止到2024年2月7日,TikTok新版本的登录套件在iOS端是使用swfit集成的,唤醒Tiktok登录授权成功之后使用iOS Universal Link 来将用户信息回调给app; 在安卓端是使用Kotlin写的,使用Android App Link将用户信息回调给app,如果使用新版本的话,需要单独在每个端去集成TikTok登录,然后在Flutter中使用channel通道与原生app通信来获取Tiktok授权后的用户基本信息。
新版本文档在这里:
https://developers.tiktok.com/doc/overview/
这里使用的Flutter的第三方库使用的是老版本的登录套件,老版本在IOS端是用OC写的,在安卓端是用JAVA写的,如果你跟我一样使用的是Flutter的第三方库,那么请继续往下看,如果你的项目想用新版本的话,那么我们的缘分就到这里,本篇文章下面的内容可以略过了~
老版本的文档在这里:https://developers.tiktok.com/doc/getting-started-ios-quickstart-objective-c/
二 Flutter 第三方库配置
项目使用的dart环境
dart环境:sdk: '>=2.7.0 <3.0.0'
flutter 中使用的 tiktok登录插件有两个:
flutter_tiktok_sdk: ^0.2.6 dio: ^3.0.0
是的,这里还需要用dio网络请求的组件,原因为什么后面会讲,
flutter_tiktok_sdk插件的地址在这:flutter_tiktok_sdk | Flutter package
dio库的地址就不贴了,不是本篇的重点
直接添加到项目库里,然后执行flutter pub get
记得分别在ios端执行pod install 以及安卓端执行 gradle sync 来同步代码
三 IOS端APP配置
1.在Info.plist文件里增加如下信息:(引用自官方文档 https://developers.tiktok.com/doc/getting-started-ios-quickstart-objective-c/)
<key>LSApplicationQueriesSchemes</key>
<array><string>tiktokopensdk</string><string>tiktoksharesdk</string><string>snssdk1180</string><string>snssdk1233</string>
</array>
<key>TikTokAppID</key>
<string>$TikTokAppID</string>
<key>CFBundleURLTypes</key>
<array><dict><key>CFBundleURLSchemes</key><array><string>$TikTokAppID</string></array></dict>
</array>
但是你不要相信他,因为这里是错的,格式没问题,但是这里的TiktokAppID,全部都应该是Client key,他在欺骗你!!
Client Key在这里:
2.配置完iOS的Info.plist文件应如下所示:
3.在APPDelegate文件夹里添加如下代码:
#import <TikTokOpenSDK/TikTokOpenSDKAuth.h>
[[TikTokOpenSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
添加完如下所示:
iOS端就配置完了
四 安卓端配置
1.在AndroidManifest.xml添加如下代码
<activityandroid:name="com.k9i.flutter_tiktok_sdk.TikTokEntryActivity"android:exported="true" />
文件位置及添加完效果如下所示:
2.还是在这个文件里,添加如下代码:
<queries><package android:name="com.zhiliaoapp.musically" /><package android:name="com.ss.android.ugc.trill" /></queries>
位置如图:
3.去build.gradle(project)文件添加如下代码:
maven { url "https://artifact.bytedance.com/repository/AwemeOpenSDK" }
添加完如图所示:
4.去build.gradle(app)文件添加如下代码:
dependencies {implementation 'com.bytedance.ies.ugc.aweme:opensdk-oversea-external:0.2.1.2'}
添加完如下所示:
5.添加完成之后点击gradle sync同步框架,点击这里,记得翻墙
6.然后去MainActivity添加如下代码:
String clientKey = "[你的Client key]";TikTokOpenConfig tiktokOpenConfig = new TikTokOpenConfig(clientKey);TikTokOpenApiFactory.init(tiktokOpenConfig);
位置及添加完效果如下所示:
截图里的类引用我也贴出来了,这两个类库如果没自动导入的话可以手动引入一下,好人快夸我。import com.bytedance.sdk.open.tiktok.TikTokOpenApiFactory; import com.bytedance.sdk.open.tiktok.TikTokOpenConfig;
五 Flutter Tiktok登录代码调用
打开Flutter项目
在项目入口调用:(来自第三方插件的示例)
TikTokSDK.instance.setup(clientKey: 'TikTokAppID');
注意第三方插件这里也有个坑,第三方的示例文档写的是TikTokAppID,但是这里填的不是APPID,而是Client Key ,估计这开发插件的老哥的占位符写错了,注意啊,踩坑踩坑!
clientKey在这里获取:
添加完代码里是这样
接下来就要开始调用TikTok登录了,先说明一下Tiktok登录授权的逻辑。
理解这个流程很重要,他不像国内的微信微博或者国外的facebook、谷歌的登录套件调用登录API之后直接就返回用户信息,而是需要进行三步操作:
第一步:调用Tiktok提供的登录api获取到用户的authCode(在其他的平台这一步就直接拿到用户信息了)
第二步:使用第一步获取到的authCode调用Tiktok提供的官方查询接口去获取accesstoken
第三步:使用第二步获取到的accesstoken再次调用Tiktok提供的查询接口去查询用户信息
怎么样,这个流程是不是感觉有点难受,但是放心,坑我都踩过了,我们一步一步来:
第一步:调用Tiktok提供的登录api获取到用户的authCode
final result = await TikTokSDK.instance.login(permissions: {TikTokPermissionType.userInfoBasic,},
);
if(result.status == TikTokLoginStatus.success){
print("获取authCode ==" + result.authCode);
}else{print("tiktok 登录失败 " + result.errorMessage);
}
调用成功后获取到的结果如下:
可以看到authCode已经正常返回了
第二步:调用Tiktok提供的查询接口查询accesstoken
文档地址:https://developers.tiktok.com/doc/legacy-user-access-guide/
需要传入的参数说明:
client_key :如下截图
client_secret:如下截图
code:传第一步获取到的 authCode
grant_type:固定传【authorization_code】
注意坑点来了:官方文档示例写的是Post,但是如果你用Post请求,是直接失败的,会返回307的错误,在这个地方,你要用Get请求,血泪坑啊,不要封装参数什么的,就用最原始的方法拼接请求链接,才可以正常获取结果
代码示例如下:
/** TikTok获取accessToken* */static Future<Map<dynamic, dynamic>> getTikTokAccessToken({String authCode}) async {String requestUrl = "https://open-api.tiktok.com/oauth/access_token?client_key=aw7p7k5kjcuhthn9&client_secret=pf0kTB5lMjFaQioQYco3mt1FAxpdaNMs&code=" + Uri.decodeFull(authCode) + "&grant_type=authorization_code";Dio dio = Dio();final option = Options(method: "get",);Response response = await dio.request(requestUrl,options: option);Map<dynamic, dynamic> mapResult;if (response.data is String) {mapResult = convert.jsonDecode(response.data);} else {mapResult = response.data as Map;}return mapResult;}
调用后返回结果如下:
可以看到access_token已经正常返回了
第三步:使用accesstoken再次调用Tiktok提供的查询接口去查询用户信息
官方文档如下:
地址 https://developers.tiktok.com/doc/tiktok-api-v1-user-info/
注意里面的这个fields参数,这里传递的是你想查询的用户信息字段,下面有说明:
想要什么就去传什么字段,查询方法也封装好了,拿去用:
/** TikTok获取用户信息* */static Future<Map<String, dynamic>> getTikTokUserInfo({String accessToken}) async {Map<String, dynamic> arguments = Map();arguments["access_token"] = accessToken;arguments["fields"] = ["open_id", "union_id", "avatar_url","display_name"];Dio dio = Dio();Map<String, dynamic> headers = Map();// headers["content-Type"] = "application/json";final option = Options(method: "post",);Response response = await dio.request(tikTokGetUserInfoUrl,data: arguments,options: option);Map<dynamic, dynamic> mapResult;if (response.data is String) {mapResult = convert.jsonDecode(response.data);} else {mapResult = response.data as Map;}return mapResult;}
调用成功之后返回信息如下:
至此,TikTok的登录就完成了。
源码地址:https://github.com/TheRuningAnt/FGTALogin.git
(该源码配置的TikTok项目未审核通过,所以点击登录会提示失败,但是该项目已经使用审核通过的TikTok项目项目参数key,appid等替换验证,可以正常实现Tiktok的登录授权,所以配置和调用方式可以直接参考)
相关文章:

【原创 附源码】Flutter海外登录--Tiktok登录最详细流程
最近接触了几个海外登录的平台,踩了很多坑,也总结了很多东西,决定记录下来给路过的兄弟坐个参考,也留着以后留着回顾。更新时间为2024年2月7日,后续集成方式可能会有变动,所以目前的集成流程仅供参考&#…...
国内chatGPT3.5升级到chatGPT4.0的教程(24年2月更新)
最新的充值方法看这里。 通过虚拟卡 WildCard 的方式来升级 GPT 4.0 最快了,大概2分钟就可以升级完成, 而且升级 GPT 4.0 价钱也不贵,虚拟卡一年10美元,GPT4 每个月也才 20美元。如果你觉得 GPT 4.0 对你可能有帮助,那就赶快来升级…...

【python量化交易】qteasy使用教程01 - 安装方法及初始化配置
qteasy教程1 - 安装方法及初始化配置 qteasy教程1 - 安装方法及初始配置qteasy安装前的准备工作1, 创建安装环境2,安装MySQL数据库 (可选)安装pymysql 3,创建tushare账号并获取API token (可选)4,安装TA-lib (可选)WindowsMac OSL…...

UML 2.5图形库
UML 2.5图形库 drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能,并实现了云端存储&#…...

分享springboot框架的一个开源的本地开发部署教程(若依开源项目开发部署过程分享持续更新二开宝藏项目PostgresSQL数据库版)
1首先介绍下若依项目: 若依是一个基于Spring Boot和Spring Cloud技术栈开发的多租户权限管理系统。该开源项目提供了一套完整的权限管理解决方案,包括用户管理、角色管理、菜单管理、部门管理、岗位管理等功能。 若依项目采用前后端分离的架构…...
打卡今天学习 Linux
过年了,祝大家过年快乐 在今天的学习中,我们涉及了一些关键的 Linux 系统管理知识点,包括 systemctl、IP 地址配置、域名解析、映射的创建、软链接等。让我们简要回顾一下这些主题。 1. systemctl systemctl 是一个强大的 Linux 系统管理工…...
单片机精进之路-3流水灯
P1代表单片机的P1口的8个io的寄存器,使用_crol_函数:将 k进行1位左位移,并将值以unsigned char类型返回,再将K的值赋给P1,这样就点亮了P1口对应的IO为低电平的led灯。 //flow light and beep #include <reg51.h>…...
c# File.WriteAllLines 和 File.WriteAllText
File.WriteAllLines 和 File.WriteAllText 都是 C# 中用于写入文本文件的方法,但它们有一些区别。 1. File.WriteAllLines 方法: File.WriteAllLines 方法用于将字符串数组的内容按行写入文本文件。每个数组元素都被写入文件的一行,且方法会…...

linux系统定时任务管理
crontab使用 一、crontab简介 crontab 这个指令所设置的工作将会循环的一直进行下去!可循环的时间为分钟、小时、每周、每月或每年等。crontab 除了可以使用指令执行外,亦可编辑 /etc/crontab 来支持。 至于让 crontab 可以生效的服务则是 crond 这个服…...
mysql的慢sql优化
为什么要优化慢sql ? 慢sql会长时间占用 数据库连接数,如果项目中有大量的慢sql,那么可用的数据库连接数就会变少,进而会影响业务。 慢sql优化 优化慢sql,最常见的就是添加索引。查询语句中不要使用select *尽量减少…...

排序算法---插入排序
原创不易,转载请注明出处。欢迎点赞收藏~ 插入排序是一种简单直观的排序算法,它的基本思想是将待排序的元素分为已排序和未排序两部分,每次从未排序部分中选择一个元素插入到已排序部分的合适位置,直到所有元素都插入到已排序部分…...

迷你世界勒索病毒,你的文件被删了吗?
前言 笔者在某恶意软件沙箱平台分析样本的时候,发现了一款比较有意思的勒索病毒MiniWorld迷你世界勒索病毒,它的解密界面与此前的WannaCry勒索病毒的界面相似,应该是作者仿冒的WannaCry的UI,如下所示: 这款勒索病毒既…...
QT styleSheet——控件设置样式表
QT开发中,需要设置多种多样的控件表现形式,QT实现的styleSheet能够满足多种多样的场景,这里简单的记录下一些我常用的 设置透明背景,鼠标悬浮时,设置背景色: pushButton->setStyleSheet("QPushBu…...
Linux学习
1 Linux的目录结构介绍 bin存放常用的命令etc存放配置文件bootlinux启动的文件home存放用户lib存放动态库,给应用程序使用lostfound一般是空的,但系统异常关机会产生文件media自动挂载,如u盘,光盘mnt手动挂载,一般自己…...
MFC研发自验用例编写应注意哪些关键测试点
MFC(Microsoft Foundation Classes)是一个用于开发Windows应用程序的C类库。在MFC应用程序的研发过程中,自验用例(自我验证测试用例)的编写是非常重要的一环,它有助于确保代码的质量、稳定性和功能正确性。…...
ChatGPT升级版本GPT-4V(ision)支持多模态语音和图像
ChatGPT升级指南:迎接GPT-4V(ision)的全新多模态时代 ChatGPT最新升级引入了GPT-4V(ision),这是一个突破性的多模态版本,支持语音和图像输入。现在,用户可以与ChatGPT进行更加丰富和互动的对话。以下是您升级到GPT-4V(ision)所需…...

机器人搬砖 - 华为OD统一考试
OD统一考试(C卷) 分值: 100分 题解: Java / Python / C 题目描述 机器人搬砖,一共有N堆砖存放在N个不同的仓库中,第 i 堆中有 bricks[i] 块砖头,要求在8小时内搬完。 机器人每小时能搬砖的数量…...
10分钟快速入门正则表达式
在力扣上看了一本付费书籍,终于让我入门了正则表达事... 问题: "^1[3-9]\\d{9}$" 是啥意思 读完本篇小笔记,你就知道,啥是"^1[3-9]\\d{9}$" 这个是啥意思了。 首先,正则表达式,这个名…...

【C++】C++的简要介绍
简单不先于复杂,而是在复杂之后。 文章目录 1. 什么是C2. C的发展史3. C的重要性3.1 语言的使用广泛度3.2 在工作领域3.3 在校招领域3.3.1 岗位需求3.3.2 笔试题 3.3.3 面试题 4. 如何学习C4.1 别人怎么学? 1. 什么是C C语言是结构化和模块化的语言&…...

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏:https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...