【原创 附源码】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.rhkb.cn/news/254597.html

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

相关文章

排序算法---快速排序

排序算法---快速排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 快速排序是一种常用的排序算法&#xff0c;采用分治的策略来进行排序。它的基本思想是选取一个元素作为基准&#xff08;通常是数组中的第一个元素&#xff09;&#xff0c;然后将数组分割成两部分&#xff0c;其中一部分的…
阅读更多...
JAVA设计模式之模版方法模式详解

JAVA设计模式之模版方法模式详解

模板方法模式 1 模板方法模式介绍 模板方法模式(template method pattern)原始定义是&#xff1a;在操作中定义算法的框架&#xff0c;将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。 模板方法中的算法可以理解为广义上的业务逻辑…
阅读更多...
了解海外云手机的多种功能

了解海外云手机的多种功能

随着社会的高度发展&#xff0c;海外云手机成为商家不可或缺的工具&#xff0c;为企业出海提供了便利的解决方案。然而&#xff0c;谈及海外云手机&#xff0c;很多人仍不了解其强大功能。究竟海外云手机有哪些功能&#xff0c;可以为我们做些什么呢&#xff1f; 由于国内电商竞…
阅读更多...
C++类和对象（上）

C++类和对象（上）

目录 1.面向对象和面向过程初步认识 2.类的引入 3.类的定义 3.1类的定义方法 3.2成员变量的命名规则 4.类的访问限定符及封装 4.1类的访问限定符 4.2类的声明和定义分离 4.3封装 5.类的实例化 6.类对象模型 6.1计算类的大小 6.2类对象的存储方式猜测 7.this指针 …
阅读更多...
Python初学者学习记录——python基础综合案例：数据可视化——动态柱状图

Python初学者学习记录——python基础综合案例：数据可视化——动态柱状图

一、案例效果 通过pyecharts可以实现数据的动态显示&#xff0c;直观的感受1960~2019年世界各国GDP的变化趋势 二、通过Bar构建基础柱状图 反转x轴和y轴 标签数值在右侧 from pyecharts.charts import Bar from pyecharts.options import LabelOpts# 构建柱状图对象 bar Bar()…
阅读更多...
基于图像掩膜和深度学习的花生豆分拣（附源码）

基于图像掩膜和深度学习的花生豆分拣（附源码）

目录 项目介绍 图像分类网络构建 处理花生豆图片完成预测 项目介绍 这是一个使用图像掩膜技术和深度学习技术实现的一个花生豆分拣系统 我们有大量的花生豆图片&#xff0c;并以及打好了标签&#xff0c;可以看一下目录结构和几张具体的图片 同时我们也有几张大的图片&…
阅读更多...
年假作业day2

年假作业day2

1.打印字母图形 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) { int i,j; char k; for(i1;i<7;i) { for(j1;j<i;j) { printf("%c",_); } for(j0,…
阅读更多...
Javaweb之SpringBootWeb案例之异常处理功能的详细解析

Javaweb之SpringBootWeb案例之异常处理功能的详细解析

3. 异常处理 3.1 当前问题 登录功能和登录校验功能我们都实现了&#xff0c;下面我们学习下今天最后一块技术点&#xff1a;异常处理。首先我们先来看一下系统出现异常之后会发生什么现象&#xff0c;再来介绍异常处理的方案。 我们打开浏览器&#xff0c;访问系统中的新增部…
阅读更多...
ARM PAC/BTI/MTE三剑客精讲与实战

ARM PAC/BTI/MTE三剑客精讲与实战

一、PAC指针认证精讲与实战 思考 1、什么是栈溢出攻击&#xff1f;什么是代码重用攻击&#xff1f;区别与联系&#xff1f; 2、栈溢出攻击的软&硬件缓解技术有哪些&#xff1f;在TF-A&OPTEE上的应用&#xff1f; 3、什么是ROP攻击&#xff1f;对ROP攻击的缓解技术&…
阅读更多...
idea（2023.3.3 ） spring boot热部署，修改热部署延迟时间

idea（2023.3.3 ） spring boot热部署，修改热部署延迟时间

1、添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency>载入依赖 2、设置编辑器 设置两个选项 设置热部署更新延迟时…
阅读更多...
LabVIEW热电偶自动校准系统

LabVIEW热电偶自动校准系统

设计并实现一套基于LabVIEW平台的工业热电偶自动校准系统&#xff0c;通过自动化技术提高校准效率和精度&#xff0c;降低人力成本&#xff0c;确保温度测量的准确性和可靠性。 工业生产过程中&#xff0c;温度的准确测量对产品质量控制至关重要。传统的热电偶校准方式依赖人工…
阅读更多...
H12-821_73

H12-821_73

73.某台路由器Router LSA如图所示&#xff0c;下列说法中错误的是&#xff1f; A.本路由器的Router ID为10.0.12.1 B.本路由器为DR C.本路由器已建立邻接关系 D.本路由器支持外部路由引入 答案&#xff1a;B 注释&#xff1a; LSA中的链路信息Link ID&#xff0c;Data&#xf…
阅读更多...
【大数据】Flink 中的 Slot、Task、Subtask、并行度

【大数据】Flink 中的 Slot、Task、Subtask、并行度

Flink 中的 Slot、Task、Subtask、并行度 1.并行度2.Task 与线程3.算子链与 slot 共享资源组4.Task slots 与系统资源5.总结 我们在使用 Flink 时&#xff0c;经常会听到 task&#xff0c;slot&#xff0c;线程 以及 并行度 这几个概念&#xff0c;对于初学者来说&#xff0c;这…
阅读更多...
ChatGPT高效提问—prompt常见用法（续篇五）

ChatGPT高效提问—prompt常见用法（续篇五）

ChatGPT高效提问—prompt常见用法&#xff08;续篇五&#xff09; 1.1 种子词 ​ 种子词&#xff08;seed word&#xff09;通常指的是在对话中使用的初始提示或关键词&#xff0c;用于引导ChatGPT生成相关回复。种子词可以是一个词、短语或句子&#xff0c;通常与对话的主题…
阅读更多...
数据结构——单向链表和双向链表的实现（C语言版）

数据结构——单向链表和双向链表的实现（C语言版）

目录 前言 1. 链表 1.1 链表的概念及结构 1.2 链表的分类 2. 单链表接口实现 2.1 数据结构设计与接口函数声明 2.2 创建结点&#xff0c;打印&#xff0c;查找 2.3 尾插&#xff0c;头插&#xff0c;尾删&#xff0c;头删 2.4 插入或删除 2.4.1在指定位置后 2.4.2在…
阅读更多...
LLM大语言模型（六）：RAG模式下基于PostgreSQL pgvector插件实现vector向量相似性检索

LLM大语言模型（六）：RAG模式下基于PostgreSQL pgvector插件实现vector向量相似性检索

目录 HightLightMac上安装PostgreSQLDBever图形界面管理端创建DB 使用向量检索vector相似度计算近似近邻索引HNSW近似近邻索引示例 HightLight 使用PostgreSQL来存储和检索vector&#xff0c;在数据规模非庞大的情况下&#xff0c;简单高效。 可以和在线业务共用一套DB&#…
阅读更多...
jquery写表格，通过后端传值，并合并单元格

jquery写表格，通过后端传值，并合并单元格

<!DOCTYPE html> <html> <head><title>Table Using jQuery</title><style>#tableWrapper {width: 100%;height: 200px; /* 设置表格容器的高度 */overflow: auto; /* 添加滚动条 */margin-top: -10px; /* 负的外边距值&#xff0c;根据实际…
阅读更多...
K8S之标签的介绍和使用

K8S之标签的介绍和使用

标签 标签定义标签实操1、对Node节点打标签2、对Pod资源打标签查看资源标签删除资源标签 标签定义 标签就是一对 key/value &#xff0c;被关联到对象上。 标签的使用让我们能够表示出对象的特点&#xff0c;比如使用在Pod上&#xff0c;能一眼看出这个Pod是干什么的。也可以用…
阅读更多...
Golang的for循环变量和goroutine的陷阱，1.22版本的更新

Golang的for循环变量和goroutine的陷阱，1.22版本的更新

先来看一段golang 1.22版本之前的for循环的代码 package mainimport "fmt"func main() {done : make(chan bool)values : []string{"chen", "hai", "feng"}for _, v : range values {fmt.Println("start")go func() {fmt.P…
阅读更多...
Android：Android Studio安装及环境配置

Android：Android Studio安装及环境配置

1开发环境搭建 Android开发需要使用java的jdk环境，所以需要下载JAVA JDK。 1.1安装配置JAVA JDK Java的JDK下载: https://www.oracle.com/technetwork/java/javase/downloads/index.html 配置java的环境变量： JAVA_HOME:java安装路径。 新增环境变量CLASSPATH 在Path环境…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023