【原创 附源码】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的登录授权，所以配置和调用方式可以直接参考）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2775859.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

ad18学习笔记十八：如何放置丝印层敷铜？

ad18学习笔记十八：如何放置丝印层敷铜？

我画板的时候&#xff0c;需要把板卡顶面丝印层的一个矩形区域&#xff0c;画成白色&#xff0c;但是这个区域内有好几个焊盘&#xff0c;丝印涂色的地方需要避开这几个焊盘&#xff0c;我觉得不能简单的在丝印层画一个矩形完事&#xff0c;最好让丝印层的这个区域&#xff0c;…
阅读更多...
自然语言学习nlp 六

自然语言学习nlp 六

https://www.bilibili.com/video/BV1UG411p7zv?p118 Delta Tuning&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;和机器学习领域中&#xff0c;通常指的是对预训练模型进行微调的一种策略。这种策略不是直接更新整个预训练模型的权重&#xff0c;而是仅针对模型…
阅读更多...
精简还是全能？如何在 Full 和 Lite 之间做出最佳选择！关于Configuration注解的Full模式与Lite模式（SpringBoot2）

精简还是全能？如何在 Full 和 Lite 之间做出最佳选择！关于Configuration注解的Full模式与Lite模式（SpringBoot2）

&#x1f3c3;‍♂️ 微信公众号: 朕在debugger© 版权: 本文由【朕在debugger】原创、需要转载请联系博主&#x1f4d5; 如果文章对您有所帮助&#xff0c;欢迎关注、点赞、转发和订阅专栏&#xff01; 前言 关于 Configuration 注解&#xff0c;相信在座的各位 Javaer 都…
阅读更多...
[Python] 深入理解列表和元组

[Python] 深入理解列表和元组

在学习的C语言中有数组可以用来存储数据&#xff0c;那么在Python中是否也有这样的工具呢&#xff1f;接下来让可莉来给大家讲解列表和元组这两个强力工具吧~ 专栏&#xff1a;《Python》 blog&#xff1a;Keven ’ s blog 在 Python 中&#xff0c;列表和元组是两种常用的序列…
阅读更多...
Linux系统安装（CentOS Vmware）

Linux系统安装（CentOS Vmware）

学习环境安装 VMware安装 VMware下载&安装 访问官网&#xff1a;https://www.vmware.com 在此处可以选择语言 点击China&#xff08;简体中文&#xff09; 点击产品&#xff0c;点击Workstation Pro 下滑&#xff0c;点击下载试用版 下滑找到Workstation 17 Pro for Wi…
阅读更多...
【RPA】浅谈RPA技术及其应用

【RPA】浅谈RPA技术及其应用

摘要&#xff1a;随着信息技术的飞速发展&#xff0c;企业对于自动化、智能化的需求日益增强。RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;技术应运而生&#xff0c;为企业提供了全新的自动化解决方案。本文首先介绍了RPA技术的基本概…
阅读更多...
Github 2024-02-09 开源项目日报 Top10

Github 2024-02-09 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-09统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4Go项目2Scala项目1PLpgSQL项目1Ruby项目1HTML项目1Solidity项目1Lua项目1 开源个人理财应用 Mayb…
阅读更多...
8868体育助力法甲巴黎圣日耳曼俱乐部 运作球员转会

8868体育助力法甲巴黎圣日耳曼俱乐部 运作球员转会

法甲的巴黎圣日耳曼足球俱乐部是8868的体育助力球队之一&#xff0c;根据法国媒体RMC的消息&#xff0c;巴黎圣日尔曼仍然希望在一月份增强球队的后防实力。虽然之前球队已经从圣保罗引进了20岁的巴西中后卫卢卡斯-贝拉尔多&#xff0c;而这名小将也将会是巴黎圣日耳曼冬窗的一…
阅读更多...
ruoyi若依框架SpringSecurity实现分析

ruoyi若依框架SpringSecurity实现分析

系列文章 ruoyi若依框架学习笔记-01 ruoyi若依框架分页实现分析 ruoyi若依框架SpringSecurity实现分析 文章目录 系列文章前言具体分析一、项目中的SpringSecurity版本二、登录认证流程分析三、权限鉴定四、退出登录五、SpringSecurity配置类 总结 前言 在ruoyi-vue若依框…
阅读更多...
Java汽车销售管理

Java汽车销售管理

技术架构&#xff1a; springboot mybatis Mysql5.7 vue2 npm node 有需要该项目的小伙伴可以私信我你的Q。 功能描述&#xff1a; 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能&#xff0c;提供经理和销售两种角色进行管理 效果图&…
阅读更多...
Seurat - 聚类教程 (1)

Seurat - 聚类教程 (1)

设置 Seurat 对象 在本教程[1]中&#xff0c;我们将分析 10X Genomics 免费提供的外周血单核细胞 (PBMC) 数据集。在 Illumina NextSeq 500 上对 2,700 个单细胞进行了测序。可以在此处[2]找到原始数据。 我们首先读取数据。 Read10X() 函数从 10X 读取 cellranger 管道的输出&…
阅读更多...
第十六篇【传奇开心果系列】Python的OpenCV库技术点案例示例：图像质量评估

第十六篇【传奇开心果系列】Python的OpenCV库技术点案例示例：图像质量评估

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例短博文系列博文目录前言一、图像质量评估方法和相关函数的介绍二、均方误差示例代码三、峰值信噪比示例代码四、结构相似性指数示例代码五、视频质量评估示例代码六、OpenCV均方根误差计算示例代码七、OpenC…
阅读更多...
贵金属交易包括哪些？香港有哪些贵金属交易平台？

贵金属交易包括哪些？香港有哪些贵金属交易平台？

随着金融市场的不断发展&#xff0c;贵金属交易作为一种投资方式&#xff0c;越来越受到投资者的关注。贵金属交易不仅具有投资价值&#xff0c;还能够为投资者提供规避风险和保值的工具。本文将介绍贵金属交易的种类和香港的贵金属交易平台。 一、贵金属交易的种类 贵金属交…
阅读更多...
运维的利器--监控--zabbix--第一步：建设zabbix

运维的利器--监控--zabbix--第一步：建设zabbix

文章目录 准备工作安装要求安装包获取安装环境 安装工作一、zabbix server服务端安装1.安装mysql2.安装zabbix server及配置环境3.设置并访问zabbix页面5.配置自我监控二、被监控端zabbix agent安装三、在服务端中添加被监控端 思维导图 准备工作 安装要求 为啥要确保正常上网…
阅读更多...
【Java】苍穹外卖 Day01

【Java】苍穹外卖 Day01

苍穹外卖-day01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; 管理端-外卖商家使用用户端-点餐用户使用当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名软件开…
阅读更多...
【C语言】SYSCALL_DEFINE3(socket, int, family, int, type, int, protocol)

【C语言】SYSCALL_DEFINE3(socket, int, family, int, type, int, protocol)

一、SYSCALL_DEFINE3与系统调用 在Linux操作系统中&#xff0c;为了从用户空间跳转到内核空间执行特定的内核级操作&#xff0c;使用了一种机制叫做"系统调用"&#xff08;System Call&#xff09;。系统调用是操作系统提供给程序员访问和使用内核功能的接口。例如&…
阅读更多...
Android开发-之屏幕适配

Android开发-之屏幕适配

Android开发-之屏幕适配 前言 Android 系统能发展到今天&#xff0c;离不开其开源性&#xff0c;但是随着越来越多的设备接入 Android 系统&#xff0c;并对 Android 系统进行各种各样的定制&#xff0c;导致长期以来出现了各种碎片化严重的问题。例如&#xff0c;Android 屏…
阅读更多...
【新书推荐】7.2 while语句

【新书推荐】7.2 while语句

本节必须掌握的知识点&#xff1a; 掌握if语句语法 熟练使用if语句 7.2.1 示例二十三 ■while语句其语法形式&#xff1a; while(表达式) { 语句块&#xff1b; } ●语法解析&#xff1a; 第一步&#xff1a;执行表达式&#xff0c;如果表达式为真&#xff0c;则执行第…
阅读更多...
【代码】Processing笔触手写板笔刷代码合集

【代码】Processing笔触手写板笔刷代码合集

代码来源于openprocessing&#xff0c;考虑到国内不是很好访问&#xff0c;我把我找到的比较好的搬运过来&#xff01; 合集 参考&#xff1a;https://openprocessing.org/sketch/793375 https://github.com/SourceOf0-HTML/processing-p5.js/tree/master 这个可以体验6种笔触…
阅读更多...
Netty连接通道中的Channel参数模型

Netty连接通道中的Channel参数模型

ChannelOption(Channel中的连接参数) ChannelOption.SOBACKLOG ChannelOption.SO_BACKLOG对应的是tcp/ip协议listen函数中的backlog参数&#xff0c;服务端处理客户端连接请求是顺序处理的&#xff0c;所以同一时间只能处理一个客户端连接&#xff0c;多个客户端来的时候&…
阅读更多...
最新文章

Copyright @ 2022~2023