【原创 附源码】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://www.mzph.cn/news/675603.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[BeginCTF]真龙之力

[BeginCTF]真龙之力

安装程序 双击安装 出现了安装失败的标签&#xff0c;开发者不允许测试。 查看Mainfest入口文件 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android" android:versionCo…
阅读更多...
71_Pandas.DataFrame排名

71_Pandas.DataFrame排名

71_Pandas.DataFrame排名 使用rank()方法对pandas.DataFrame和pandas.Series的行/列进行排名。 sort_values() 是一种按升序或降序对 pandas.DataFrame 列和 pandas.Series 进行排序的方法&#xff0c;但rank() 返回每个元素的排名而不对数据进行排序。 请参阅下面的文章了解…
阅读更多...
[vscode]ssh报错: Resolver error: Error: XHR failedscode错误

[vscode]ssh报错: Resolver error: Error: XHR failedscode错误

场景问题&#xff1a;通过vscode ssh连接远程服务器失败&#xff0c;报错&#xff1a;Resolver error: Error: XHR failedscode&#xff1a; 问题原因&#xff1a;~/.vscode-server/bin/一串数字下的vscode-server-linux-x64.tar.gz由于某种原因无法正常下载 解决方式&#x…
阅读更多...
JavaScript实现轮播图方法

JavaScript实现轮播图方法

效果图 先来看下效果图&#xff0c;嫌麻烦就不用具体图片来实现了&#xff0c;主要是理清思路。&#xff08;自动轮播&#xff0c;左右按钮切换图片&#xff0c;小圆点切换图片&#xff0c;鼠标移入暂停轮播&#xff0c;鼠标移出继续轮播&#xff09; HTML 首先是html内容&am…
阅读更多...
【QT学习十四】 文件目录操作

【QT学习十四】 文件目录操作

目录 一、概述 二、详解 1. QFile QFile 类中的一些静态方法&#xff1a; 使用示例&#xff1a; 注意事项&#xff1a; 2. QDir 成员函数 使用实例&#xff1a; 注意事项&#xff1a; 3. QFileInfo 成员函数 使用实例 4. QTemporaryFile 成员函数 使用实例 注…
阅读更多...
Rust语言之集合

Rust语言之集合

文章目录 一、元组&#xff08;tuple&#xff09;1.元组定义2.元组使用解构索引 3.元组修改非可变元组可变元组类型不一致 二、数组1.数组不可变数组定义可变数组定义数组使用数组修改数组的遍历 2.动态数组-向量&#xff08;Vector&#xff09;向量定义向量遍历向量追加向量插…
阅读更多...
MongoDB聚合： $sort

MongoDB聚合： $sort

聚合的$sort阶段对所有输入文件进行排序&#xff0c;并按排序顺序返回管道。 语法 { $sort: { <field1>: <sort order>, <field2>: <sort order> ... } }$sort阶段参数为一个文档&#xff0c;该文档指定了要排序的字段和相应的排序顺序。<sort or…
阅读更多...
[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

公安管理学就业方向及前景 公安管理学是中国普通高等学校本科专业。本专业文理兼收&#xff0c;学制4年&#xff0c;授予法学学士学位。本专业培养掌握马克思主义基本原理&#xff0c;政治坚定&#xff0c;坚持党和国家的路线、方针、政策&#xff0c;具有良好职业素养、科学素…
阅读更多...
获取视频帧图片

获取视频帧图片

在实现了minio文件上传的基础上进行操作 一、编写pom <dependency><groupId>org.jcodec</groupId><artifactId>jcodec</artifactId><version>0.2.5</version> </dependency> <dependency><groupId>org.jcodec<…
阅读更多...
【小程序】基础API——面板API接口介绍

【小程序】基础API——面板API接口介绍

ty.preloadPanel 面板预下载 需引入BizKit&#xff0c;且在>3.0.0版本才可使用 参数 Object object 属性类型默认值必填说明deviceIdstring是设备 idextraInfoPanelExtraParams否额外面板信息 当预下载的是二级面板时, 需要传递的额外信息completefunction否接口调用结束…
阅读更多...
PMP考试之20240209

PMP考试之20240209

1、生物制药公司ClinicaLabs的一位项目经理打算与她的经理讨论为其团队无法执行的复杂活动获取额外资源的问题。一旦活动完成&#xff0c;这些资源将立即投入项目。在这种情况下&#xff0c;项目经理最需要以下哪项技能&#xff1f; A.确定资源需求的规划技能 B.使经理相信她…
阅读更多...
git恢复rebase过程中遇到权限问题和丢失的提交

git恢复rebase过程中遇到权限问题和丢失的提交

文章目录 一、检查丢失的提交是否还在 reflog 中二、创建一个新分支来恢复丢失的提交三、处理权限问题四. 使用 git fsck 查找丢失对象1、创建一个新分支来恢复该提交2、检查和合并提交 五. 介绍git中命令reflog 与 fsck1、git reflog2、git fsck使用场景 一、检查丢失的提交是…
阅读更多...
freesql orm 使用 DynamicFilterInfo 拼接日期查询条件时间格式一个难得的经验

freesql orm 使用 DynamicFilterInfo 拼接日期查询条件时间格式一个难得的经验

文本到时间条件的转换 前端输入 1253-3 , 后台提示"varchar 数据类型到 datetime 数据类型的转换产生一个超出范围的值" 经查询, mssql 【datetime】数据类型&#xff1a;最大是9999年12 月31日&#xff0c;最小是1753年1月1日 所以要拼接限制一下, 只是 if (val.…
阅读更多...
迅为RK3588开发板ubuntu和window互传图形界面直接拖拽进行文件传输

迅为RK3588开发板ubuntu和window互传图形界面直接拖拽进行文件传输

确保以及安装了 VMware Tools。如下图所示表示已安装过了。 和 windows 端文件夹间传输一样直接拖拽进去即可&#xff0c;如下图所示&#xff1a; 也可拖拽到终端&#xff0c;如下图所示&#xff1a; 更多内容可以B站搜索迅为RK3588开发板
阅读更多...
什么是系统工程（字幕）22

什么是系统工程（字幕）22

0 00:00:00,650 --> 00:00:02,660 那么下一个呢&#xff0c;就是 1 00:00:03,200 --> 00:00:04,770 图16.12 2 00:00:05,740 --> 00:00:07,910 这是一个活动图 3 00:00:09,090 --> 00:00:11,930 表达了蒸馏这个水的 4 00:00:12,280 --> 00:00:13,470 过程的…
阅读更多...
一文彻底搞懂Redis的内存回收机制和内存过期淘汰策略

一文彻底搞懂Redis的内存回收机制和内存过期淘汰策略

文章目录 1. Redis内存回收机制2. Redis过期策略3. Redis淘汰策略3.1 LRU算法3.2 缓存清理配置3.3 Redis数据淘汰策略3.4 缓存清理的流程 4. 总结 关于 Redis 内存回收机制和内存过期淘汰策略的常见问题&#xff1a; 什么是 Redis 的内存回收机制&#xff1f; Redis 的内存回收…
阅读更多...
百家cms代审

百家cms代审

环境搭建 源码链接如下所示 https://gitee.com/openbaijia/baijiacms 安装至本地后 直接解压到phpstudy的www目录下即可 接下来去创建一个数据库用于存储CMS信息。&#xff08;在Mysql命令行中执行&#xff09; 接下来访问CMS&#xff0c;会默认跳转至安装界面 数据库名称和…
阅读更多...
原根primitive root

原根primitive root

&#xff08;a,m&#xff09;1&#xff0c;若,则称a为模N的原根。 以下程序只能判断结果为简化剩余系情况下的模N的原根。 对于模4的primitive_root3,模9的primitive_root2,5这些情况无法判断。 def find_primitive_root(n):for base in range(1,n):l[]for index in range(…
阅读更多...
uni使用openlayer加载本机离线地图

uni使用openlayer加载本机离线地图

manifest.json添加配置 "runmode": "liberate"(默认为normal) 把地图打包进apk&#xff0c;这样手机每次访问地图就可以访问到工程文件夹的地图资源了&#xff0c;不用每次都请求云资源&#xff0c;消耗流量太大了
阅读更多...
分治法求解最大子数组和问题

分治法求解最大子数组和问题

leetcode 53 53. 最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 #define max(a,b) ((a)>(b)?(a):(b)) int maxSubArr…
阅读更多...
最新文章

Copyright @ 2022~2023