网站升级页面连接设置,网站开发职责,有没有类似wordpress,pta编程网站最近接触了几个海外登录的平台#xff0c;踩了很多坑#xff0c;也总结了很多东西#xff0c;决定记录下来给路过的兄弟坐个参考#xff0c;也留着以后留着回顾。更新时间为2024年2月7日#xff0c;后续集成方式可能会有变动#xff0c;所以目前的集成流程仅供参考#…
最近接触了几个海外登录的平台踩了很多坑也总结了很多东西决定记录下来给路过的兄弟坐个参考也留着以后留着回顾。更新时间为2024年2月7日后续集成方式可能会有变动所以目前的集成流程仅供参考但是绝对详细。
整个记录会包含源码。
dart环境sdk: 2.7.0 3.0.0
集成海外登录需要科学上网一共涉及四个平台TiktokFacebookGoogle以及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/
keyLSApplicationQueriesSchemes/key
arraystringtiktokopensdk/stringstringtiktoksharesdk/stringstringsnssdk1180/stringstringsnssdk1233/string
/array
keyTikTokAppID/key
string$TikTokAppID/string
keyCFBundleURLTypes/key
arraydictkeyCFBundleURLSchemes/keyarraystring$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:namecom.k9i.flutter_tiktok_sdk.TikTokEntryActivityandroid:exportedtrue /
文件位置及添加完效果如下所示 2.还是在这个文件里添加如下代码 queriespackage android:namecom.zhiliaoapp.musically /package android:namecom.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 FutureMapdynamic, dynamic getTikTokAccessToken({String authCode}) async {String requestUrl https://open-api.tiktok.com/oauth/access_token?client_keyaw7p7k5kjcuhthn9client_secretpf0kTB5lMjFaQioQYco3mt1FAxpdaNMscode Uri.decodeFull(authCode) grant_typeauthorization_code;Dio dio Dio();final option Options(method: get,);Response response await dio.request(requestUrl,options: option);Mapdynamic, 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 FutureMapString, dynamic getTikTokUserInfo({String accessToken}) async {MapString, dynamic arguments Map();arguments[access_token] accessToken;arguments[fields] [open_id, union_id, avatar_url,display_name];Dio dio Dio();MapString, dynamic headers Map();// headers[content-Type] application/json;final option Options(method: post,);Response response await dio.request(tikTokGetUserInfoUrl,data: arguments,options: option);Mapdynamic, 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的登录授权所以配置和调用方式可以直接参考
