【原创 附源码】Flutter安卓及iOS海外登录--Facebook登录最详细流程

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

整个记录会包含源码。

dart环境：sdk: '>=2.7.0 <3.0.0'

集成海外登录需要科学上网，一共涉及四个平台，Tiktok，Facebook，Google以及Apple登录。我会分别一一整理记录，所以我的项目就命名为fgta_login (Facebook,Google,Tiktok,Apple登录)，奇怪的命名+1。

这篇文章只记录Facebook登录的详细流程，其他几个平台的集成流程如下：

【原创 附源码】Flutter安卓及iOS海外登录--Google登录最详细流程

【原创 附源码】Flutter安卓及iOS海外登录--Tiktok登录最详细流程​​​​​​​

​​​​​​​

一 去Facebook开发者官网创建并配置app

facebook开发者官网地址:https://developers.facebook.com/?no_redirect=1

 打开facebook开发者官网注册登录之后，点击【我的应用】

点击创建应用

选择配置登录授权功能，然后点击继续 

选择是否构建游戏，然后点击继续

填写应用名称，然后点击创建应用

然后就可以开始配置我们的应用了，facebook配置应用的方式很有意思，他不想其他平台给你一个单独的页面去配置你的APP，而是从【定制如何添加Facebook登录按钮】的功能指引入口，类似于引导说明一样，边引导你如何使用，边让你填入应用信息，准备开始吧，点击入口

如果你的业务需要获取 用户邮箱的话，点击这里添加一下

添加完状态变成这样

点击前往快速启动：

安卓端和iOS端的配置我分开记录，兄弟们按需浏览

配置安卓端：

因为我们使用的是fluuter的框架，所以不需要单独引入安卓端sdk，所以第一步跳过，点击继续

第二步也跳过，点击继续

第三步填写应用信息，然后点击保存

参数说明及获取指引：

软件包名称在这里获取：

默认活动类名称：一般都是软件包名+MainActivity，如果自己有单独配置的活动类名的话，就按照自己的配置一下，我的包名是 ，所以我这里填写的是com.example.fgta_login.MainActivity 

填写完是这样，然后点击save,sava完成之后点击继续

第四步 添加开发和发布秘钥散列

注意，这个地方是最容易踩坑出错的，务必详细阅读

官方平台的操作如下

但是我们做开发更多的时候是每个应用单独配置一个签名文件，所以这里就需要对上面的命令进行改动，以重新创建一个签名文件为例子（已有的可以跳过创建过程直接看如何获取秘钥散列）：

点击next:

创建一个新的：

重点：

文件命名为debug.store

密码设置为123456 

然后将这个文件复制一下，在桌面创建一个新文件夹，文件夹命名为keystore，然后将复制的签名文件放进去，放进去如下：（注意文件夹命名和内部文件）

然后在终端cd到该文件夹，然后执行如下命令：

keytool -exportcert -alias key0 -keystore debug.keystore | openssl sha1 -binary | openssl base64

对该命令感兴趣的兄弟可以参考命令解释如下：

原命令为 keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

执行的时候将：

YOUR_RELEASE_KEY_ALIAS 替换为当前别名

YOUR_RELEASE_KEY_PATH 替换为当前key的路径 

所有命令执行结果如下：

会提示你输入的秘钥口令，我们创建的签名文件的秘钥就是123456，输入后点击回车，秘钥散列就打印出来了，然后复制填写完，保存，继续，结果如下

​​​​​​​​​​​​​​​​​​​​​​​​​​​​

第五步，根据自己需求选择，然后点击继续

第六步 配置APP内的facebook登录信息

说明的很详细，根据提示来就可以，一共需要facebook_app_id、fb_login_protocol_scheme 以及 facebook_client_token 这三个值，获取位置如下：

facebook_app_id：点开项目管理主页，点击【基本】选项卡，如下面截图所示，就是应用编号

fb_login_protocol_scheme：就是【fb + facebook_app_id】,例如我的就是fb925337525864482

facebook_client_token：切换到【高级】选项卡，客户端口令就是facebook_client_token，如下图

好，开始配置，共有三处，配置也很简单

第一处

 在values文件夹下的strings.xml文件里增加如下参数，如果没有的话就新建一个，我这里就是新建的：

添加完如下所示：找不到的地方的兄弟可以找找对比一下，格式和数据如下，直接复制添加修改即可


<string name="facebook_app_id">1234</string>
<string name="fb_login_protocol_scheme">fb1234</string>
<string name="facebook_client_token">56789</string>

第二处  位置及添加内容如下

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>

 第三处  增加网络权限，内容及位置如下：


<uses-permission android:name="android.permission.INTERNET"/>

​​​​​​​

这样，安卓端就配置完了。 

配置iOS端：

回调当前页面顶部，切换到iOS选项卡

第一步跳过，点击继续：

第二步设置Bundle ID，点击保存

Bundle ID获取位置如下，复制到对应位置：

填写完点击保存，然后点击继续：

第三步按需选择，然后点击继续

第四步 配置Info.plist文件，引导文档说明的很清晰

所需参数及获取位置说明如下：

APP-ID：点开项目管理主页，点击【基本】选项卡，如下面截图所示，就是应用编号

fbAPP-ID：就是【fb + facebook_app_id】,例如我的就是fb925337525864482

CLIENT-TOKEN:​​​​​​​facebook_client_token：切换到【高级】选项卡，客户端口令就是facebook_client_token，如下图

​​​​​​​

FacebookDisplayName:​​​​​​​Facebook登录唤醒的时候显示的APP名称，我这里设置为【FGTA登录测试】

配置内容及位置如下：

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

 配置完如下，找不到位置和格式的兄弟直接参考：

iOS端配置完成

添加测试用户

在测试facebook登录的时候，你需要在开发者账户官网添加一个测试登录账户，否则在应用正式上线之前其他人无法正常登录：

添加的测试用户必须有facebook账户，才可以进行测试： 

二 Flutter端集成Facebook登录

终于到调用这一步了，调用就很简单啦

flutter端使用的到第三方插件是：

flutter_facebook_auth: ^4.4.1+1

该插件官方地址为：flutter_facebook_auth | Flutter package

在pubspec.yaml文件内添加第三方库，然后执行flutter pub get:

在flutter端添加了新的插件，别忘了去ios端执行pos install和去安卓端执行sync gradle来同步更新第三方库

如果项目中插件比较多的兄弟，推荐使用flutter pub add flutter_facebook_auth指令来添加第三方库，flutter会自动根据当前已经存在插件的依赖关系来选择合适的flutter_facebook_auth插件进行添加，避免依赖增加后报错。新项目的话还是使用我这个插件版本，对比下面的使用方法直接粘贴复制调用更香。

然后使用下面的方法进行调用,很简单，文件引用自己添加一下，方法我封装好了：

void facebookLogin() async{
    final LoginResult result = await FacebookAuth.instance.login(); // by default we request the email and the public profile
    if (result.status == LoginStatus.success) {
      // you are logged
      final AccessToken accessToken = result.accessToken;

      Map<String, dynamic> userData = await FacebookAuth.instance.getUserData();
      print("facebook 获取登录用户信息" + userData.toString());

    } else {
      print("facebook 登录失败");
      print(result.status);
      print(result.message);
    }
  }

测试登录时记得科学上网


三 测试

点击登录提示输入facebook账户：

提示应用还未通过审核:

成功获取到用户信息：

完成~

测试期间出现的问题：

1.安卓端报错代码行数大于65536

在gradle文件增加:

multiDexEnabled true

位置如下:

2.最典型的提示报错：Invalid key hash. The key hash xxxxxxxx does not match any stored key hashes. Configure your app key hashes at https://developers.facebook.com/apps/xxxxx​​​​​​

这是你的开发秘钥配置的不对

原因是签名不对，进行如下操作

生成发布密钥散列

Android 应用必须先使用发布密钥进行电子签名，然后才能上传到商店中。如要生成发布密钥散列，请在 Mac 或 Windows 内运行以下命令，并替换您的发布密钥别名和密钥库路径

YOUR_RELEASE_KEY_ALIAS 替换为当前别名

YOUR_RELEASE_KEY_PATH 替换为当前key的路径

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

然后替换掉Facebook里的

 

源码地址：https://github.com/TheRuningAnt/FGTALogin.git  

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

unity学习案例总结

unity学习案例总结

动态标签 GitHub - SarahMit/DynamicLabel3D: Simple dynamic labels for a 3D Unity scene
阅读更多...
案例：CentOS8 在 MySQL8.0 实现半同步复制

案例：CentOS8 在 MySQL8.0 实现半同步复制

异步复制 MySQL 默认的复制即是异步的&#xff0c;主库在执行完客户端提交的事务后会立即将结果返给给客户端&#xff0c;并不关心从库是否已经接收并处理&#xff0c;这样就会有一个问题&#xff0c;主节点如果 crash 掉了&#xff0c;此时主节点上已经提交的事务可能并没有传…
阅读更多...
c语言求多边形面积

c语言求多边形面积

多边形有现成的面积公式&#xff0c;直接套用即可。area函数接受两个参数&#xff1a;顶点坐标&#xff0c;顶点个数。 #include <stdio.h> #include <math.h>struct point {int x;int y; };float area(point p[], int n) {int i;float sum 0.0;for (i 0; i <…
阅读更多...
labelImg和labelme区别

labelImg和labelme区别

LabelImg和LabelMe是两种常用的标注工具&#xff0c;用于创建标注数据集以供机器学习和计算机视觉任务使用。虽然它们都具有相似的目标&#xff0c;即方便用户进行图像标注&#xff0c;但在某些方面存在一些区别。下面将介绍LabelImg和LabelMe的区别及联系&#xff0c;同时提供…
阅读更多...
Win10截图的四种方式

Win10截图的四种方式

截图不一定要依靠通讯软件&#xff0c;现在系统自己就带有这些功能。 1.Win Shift S组合键&#xff1a;选择微信截图&#xff0c;部分截图&#xff0c;随心所欲&#xff1b; 2.Win W组合键&#xff1a;呼出屏幕右侧的工作区&#xff0c;选择屏幕草图&#xff0c;支持裁剪、编辑…
阅读更多...
Java基础：值传递和引用传递

Java基础：值传递和引用传递

Java在给方法传递参数时&#xff0c;有值传递和引用传递两种方式。 基本概念 值传递&#xff1a;传递对象的一个副本&#xff0c;即使副本被改变&#xff0c;也不会影响源对象&#xff0c;因为值传递的时候&#xff0c;实际上是将实参的值复制一份给形参。 引用传递&#xf…
阅读更多...
【C语言】C的整理记录

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上&#xff0c;笔者对C语言的知识和注意事项进行整理记录&#xff0c;便于后期查阅&#xff0c;反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用&#xff0c;然而发觉这些是编程语言所共通的作用&#…
阅读更多...
react中hook封装一个table组件 与 useColumns组件

react中hook封装一个table组件 与 useColumns组件

目录 1&#xff1a;react中hook封装一个table组件依赖CommonTable / index.tsx使用组件效果 2&#xff1a;useColumns组件useColumns.tsx使用 1&#xff1a;react中hook封装一个table组件 依赖 cnpm i react-resizable --save cnpm i ahooks cnpm i --save-dev types/react-r…
阅读更多...
第三节 zookeeper基础应用与实战2

第三节 zookeeper基础应用与实战2

目录 1. Watch事件监听 1.1 一次性监听方式&#xff1a;Watcher 1.2 Curator事件监听机制 2. 事务&异步操作演示 2.1 事务演示 2.2 异步操作 3. Zookeeper权限控制 3.1 zk权限控制介绍 3.2 Scheme 权限模式 3.3 ID 授权对象 3.4 Permission权限类型 3.5 在控制台…
阅读更多...
springboot181基于springboot的乐享田园系统

springboot181基于springboot的乐享田园系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…
阅读更多...
【AIGC风格prompt深度指南】掌握绘画风格关键词，实现艺术模仿的革新实践

【AIGC风格prompt深度指南】掌握绘画风格关键词，实现艺术模仿的革新实践

[小提琴家]ASCII风格&#xff0c;点&#xff0c;爆炸&#xff0c;光&#xff0c;射线&#xff0c;计算机代码 由冰和水制成的和平标志]非常详细&#xff0c;寒冷&#xff0c;冰冻&#xff0c;大气&#xff0c;照片逼真&#xff0c;流动&#xff0c;16K 胡迪尼模拟火和水&#x…
阅读更多...
Visual Studio使用Git忽略不想上传到远程仓库的文件

Visual Studio使用Git忽略不想上传到远程仓库的文件

前言 作为一个.NET开发者而言&#xff0c;有着宇宙最强IDE&#xff1a;Visual Studio加持&#xff0c;让我们的开发效率得到了更好的提升。我们不需要担心环境变量的配置和其他代码管理工具&#xff0c;因为Visual Studio有着众多的拓展工具。废话不多说&#xff0c;直接进入正…
阅读更多...
假期刷题打卡--Day26

假期刷题打卡--Day26

1、MT1212乘法表 请编写一个简单程序&#xff0c;输出九九乘法表。输入n&#xff0c;就输出乘法表到n的地方。 格式 输入格式&#xff1a; 输入整型 输出格式&#xff1a; 输出整型。形式如&#xff1a;1*11 样例 1 输入&#xff1a; 5输出&#xff1a; 1*11 2*12 …
阅读更多...
品牌如何营造生活感氛围？媒介盒子分享

品牌如何营造生活感氛围？媒介盒子分享

「生活感」简而言之是指人们对生活的感受和意义&#xff0c;它往往没有充斥在各种重要的场合和事件中&#xff0c;而是更隐藏在细碎平凡的生活场景中。在营销越来越同质化的当下&#xff0c;品牌应该如何打破常规模式&#xff0c;洞察消费情绪&#xff0c;找到更能打动消费者心…
阅读更多...
2024-02-11 Unity 编辑器开发之编辑器拓展2 —— 自定义窗口

2024-02-11 Unity 编辑器开发之编辑器拓展2 —— 自定义窗口

文章目录 1 创建窗口类2 显示窗口3 窗口事件回调函数4 窗口中常用的生命周期函数5 编辑器窗口类中的常用成员6 小结 1 创建窗口类 ​ 当想为 Unity 拓展一个自定义窗口时&#xff0c;只需实现继承 EditorWindow 的类即可&#xff0c;并在该类的 OnGUI 函数中编写面板控件相关的…
阅读更多...
【JavaEE Spring 项目】博客系统

【JavaEE Spring 项目】博客系统

博客系统 前⾔项⽬介绍1. 准备⼯作1.1 数据准备1.2 创建项⽬1.3 准备前端⻚⾯1.4 配置配置⽂件1.5 测试 2. 项⽬公共模块2.1 实体类的编写2.2 公共层 3. 业务代码3.1 持久层3.2 实现博客列表3.3 实现博客详情3.4 实现登陆令牌技术JWT令牌介绍JWT令牌⽣成和校验 3.5 实现强制要求…
阅读更多...
使用C++从零开始，自己写一个MiniWeb

使用C++从零开始，自己写一个MiniWeb

第一步&#xff1a;新建项目 1、打开VS点击创建新项目 2、选择空项目并点下一步&#xff08;切记不能选错项目类型&#xff09; 3、填写项目名称和路径&#xff0c;点击创建即可 新建好后项目是这样的比较干净 4、右击源文件&#xff0c;点击添加&#xff0c;新建http.cpp文件…
阅读更多...
Python在金融大数据分析中的AI应用实战

Python在金融大数据分析中的AI应用实战

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 随着人工智能时代的到来&#xff0c;Python作为…
阅读更多...
【深度学习 目标检测】R-CNN系列算法全面概述（一文搞懂R-CNN、Fast R-CNN、Faster R-CNN的来龙去脉）

【深度学习 目标检测】R-CNN系列算法全面概述（一文搞懂R-CNN、Fast R-CNN、Faster R-CNN的来龙去脉）

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;相关专栏&#xff1a; 深度学习 &#xff1a;现代人工智能的主流技术介绍 机器学习 &#xff1a;相对完整的机器学习基础教学&#xff01; &#x1f4a1;往期推荐&#xff1a; 【机器学…
阅读更多...
tab 切换类交互功能实现

tab 切换类交互功能实现

tab切换类交互&#xff1a; 记录激活项&#xff08;整个对象/id/index)动态类型控制 下面以一个地址 tab 切换业务功能为例&#xff1a; <div class"text item" :class"{active : activeAddress.id item.id}" click"switchAddress(item)"…
阅读更多...
最新文章

Copyright @ 2022~2023