当前位置: 首页 > news >正文

【原创 附源码】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登录最详细流程

最近接触了几个海外登录的平台&#xff0c;踩了很多坑&#xff0c;也总结了很多东西&#xff0c;决定记录下来给路过的兄弟坐个参考&#xff0c;也留着以后留着回顾。更新时间为2024年2月7日&#xff0c;后续集成方式可能会有变动&#xff0c;所以目前的集成流程仅供参考&#…...

国内chatGPT3.5升级到chatGPT4.0的教程(24年2月更新)

最新的充值方法看这里。 通过虚拟卡 WildCard 的方式来升级 GPT 4.0 最快了&#xff0c;大概2分钟就可以升级完成, 而且升级 GPT 4.0 价钱也不贵&#xff0c;虚拟卡一年10美元&#xff0c;GPT4 每个月也才 20美元。如果你觉得 GPT 4.0 对你可能有帮助&#xff0c;那就赶快来升级…...

【python量化交易】qteasy使用教程01 - 安装方法及初始化配置

qteasy教程1 - 安装方法及初始化配置 qteasy教程1 - 安装方法及初始配置qteasy安装前的准备工作1&#xff0c; 创建安装环境2&#xff0c;安装MySQL数据库 (可选)安装pymysql 3&#xff0c;创建tushare账号并获取API token (可选)4&#xff0c;安装TA-lib (可选)WindowsMac OSL…...

UML 2.5图形库

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

分享springboot框架的一个开源的本地开发部署教程(若依开源项目开发部署过程分享持续更新二开宝藏项目PostgresSQL数据库版)

1首先介绍下若依项目&#xff1a; 若依是一个基于Spring Boot和Spring Cloud技术栈开发的多租户权限管理系统。该开源项目提供了一套完整的权限管理解决方案&#xff0c;包括用户管理、角色管理、菜单管理、部门管理、岗位管理等功能。 若依项目采用前后端分离的架构&#xf…...

打卡今天学习 Linux

过年了&#xff0c;祝大家过年快乐 在今天的学习中&#xff0c;我们涉及了一些关键的 Linux 系统管理知识点&#xff0c;包括 systemctl、IP 地址配置、域名解析、映射的创建、软链接等。让我们简要回顾一下这些主题。 1. systemctl systemctl 是一个强大的 Linux 系统管理工…...

单片机精进之路-3流水灯

P1代表单片机的P1口的8个io的寄存器&#xff0c;使用_crol_函数&#xff1a;将 k进行1位左位移&#xff0c;并将值以unsigned char类型返回&#xff0c;再将K的值赋给P1&#xff0c;这样就点亮了P1口对应的IO为低电平的led灯。 //flow light and beep #include <reg51.h>…...

c# File.WriteAllLines 和 File.WriteAllText

File.WriteAllLines 和 File.WriteAllText 都是 C# 中用于写入文本文件的方法&#xff0c;但它们有一些区别。 1. File.WriteAllLines 方法&#xff1a; File.WriteAllLines 方法用于将字符串数组的内容按行写入文本文件。每个数组元素都被写入文件的一行&#xff0c;且方法会…...

linux系统定时任务管理

crontab使用 一、crontab简介 crontab 这个指令所设置的工作将会循环的一直进行下去&#xff01;可循环的时间为分钟、小时、每周、每月或每年等。crontab 除了可以使用指令执行外&#xff0c;亦可编辑 /etc/crontab 来支持。 至于让 crontab 可以生效的服务则是 crond 这个服…...

mysql的慢sql优化

为什么要优化慢sql &#xff1f; 慢sql会长时间占用 数据库连接数&#xff0c;如果项目中有大量的慢sql&#xff0c;那么可用的数据库连接数就会变少&#xff0c;进而会影响业务。 慢sql优化 优化慢sql&#xff0c;最常见的就是添加索引。查询语句中不要使用select *尽量减少…...

排序算法---插入排序

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

迷你世界勒索病毒,你的文件被删了吗?

前言 笔者在某恶意软件沙箱平台分析样本的时候&#xff0c;发现了一款比较有意思的勒索病毒MiniWorld迷你世界勒索病毒&#xff0c;它的解密界面与此前的WannaCry勒索病毒的界面相似&#xff0c;应该是作者仿冒的WannaCry的UI&#xff0c;如下所示&#xff1a; 这款勒索病毒既…...

QT styleSheet——控件设置样式表

QT开发中&#xff0c;需要设置多种多样的控件表现形式&#xff0c;QT实现的styleSheet能够满足多种多样的场景&#xff0c;这里简单的记录下一些我常用的 设置透明背景&#xff0c;鼠标悬浮时&#xff0c;设置背景色&#xff1a; pushButton->setStyleSheet("QPushBu…...

Linux学习

1 Linux的目录结构介绍 bin存放常用的命令etc存放配置文件bootlinux启动的文件home存放用户lib存放动态库&#xff0c;给应用程序使用lostfound一般是空的&#xff0c;但系统异常关机会产生文件media自动挂载&#xff0c;如u盘&#xff0c;光盘mnt手动挂载&#xff0c;一般自己…...

MFC研发自验用例编写应注意哪些关键测试点

MFC&#xff08;Microsoft Foundation Classes&#xff09;是一个用于开发Windows应用程序的C类库。在MFC应用程序的研发过程中&#xff0c;自验用例&#xff08;自我验证测试用例&#xff09;的编写是非常重要的一环&#xff0c;它有助于确保代码的质量、稳定性和功能正确性。…...

ChatGPT升级版本GPT-4V(ision)支持多模态语音和图像

ChatGPT升级指南&#xff1a;迎接GPT-4V(ision)的全新多模态时代 ChatGPT最新升级引入了GPT-4V(ision)&#xff0c;这是一个突破性的多模态版本&#xff0c;支持语音和图像输入。现在&#xff0c;用户可以与ChatGPT进行更加丰富和互动的对话。以下是您升级到GPT-4V(ision)所需…...

机器人搬砖 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 机器人搬砖&#xff0c;一共有N堆砖存放在N个不同的仓库中&#xff0c;第 i 堆中有 bricks[i] 块砖头&#xff0c;要求在8小时内搬完。 机器人每小时能搬砖的数量…...

10分钟快速入门正则表达式

在力扣上看了一本付费书籍&#xff0c;终于让我入门了正则表达事... 问题&#xff1a; "^1[3-9]\\d{9}$" 是啥意思 读完本篇小笔记&#xff0c;你就知道&#xff0c;啥是"^1[3-9]\\d{9}$" 这个是啥意思了。 首先&#xff0c;正则表达式&#xff0c;这个名…...

【C++】C++的简要介绍

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

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏&#xff1a;https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...