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

news/2024/9/9 13:47:46

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

整个记录会包含源码。

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

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

这篇文章只记录Google登录的详细流程,其他几个平台的集成流程如下:

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

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

一 Firebase平台配置

Firebase平台类似于国内的友盟,可以配置很多个平台的登录,支持创建Flutter的配置,使用起来也非常简单,官网地址如下:https://firebase.google.com/?hl=zh-cn

首先进入官网,点开控制台:

 点击添加项目:

输入项目名:

 点击创建项目:

 创建完成进入项目页面,点击Flutter 标记:

会提示你一步一步进行操作,很重要,每步都要执行:

这三步基本都是在终端执行的,一定要翻墙,在终端运行命令的时候,记得将自己使用的代理终端命令在终端执行一下,比如我用的小飞机,终端命令的复制使用方法是这样:

然后复制在终端执行:

这样终端的命令会也会在翻墙状态下执行。

 继续回到Firebase,执行终端命令:

第一步我这里已经创建过了,就不记录了

第二步: 

第一个命令执行:

dart pub global activate flutterfire_cli

进入Flutter项目文件夹一级目录,执行第二个命令:

flutterfire configure --project=fgtalogin

 这里会提示你选择哪些平台,按住空格键可进行勾选或者取消勾选,按上下键可以选择,我这里只选择安卓和IOS,其他两个取消勾选,然后回车:

一路按y,回车:

执行成功,现在firebase已经配置到你的项目里了。

 回到Firebase官网,点击授权管理:

选择google: 

选择启用:

选择一个邮箱,然后进行保存: 

 会提示你下载最新的配置文件更新,点完成。

进入项目设置页面:

 先配置安卓端,点击添加指纹,如果你们是团队开发的话,如果你不是项目的管理员则看不到这里,需要联系你的管理员去添加

安卓端的指纹在这里获取:

 点击之后再控制台找:

复制SHA1指纹到friebase,然后点击保存:

添加完成下载配置文件:

打开安卓项目文件夹,将下载完成的配置文件替换掉刚刚自动生成的,位置在这里,替换一下:

iOS的也需要下载替换一下:

注意命名要保持一致,iOS的在这里,将刚才下载下来的IOS的文件也替换一下:

至此,Firebase网页上的配置就完成了。

二 Flutter 项目配置

在项目中添加如下第三方库:

firebase_core: ^1.16.0
firebase_core_platform_interface: 4.5.1
google_sign_in: ^5.4.4

然后执行flutter pub get,如下图:

接着就可以调用google登录了:

 GoogleSignIn _googleSignIn = GoogleSignIn(scopes: <String>['email','https://www.googleapis.com/auth/contacts.readonly',],);GoogleSignInAccount googleUser = await _googleSignIn.signIn();print("googleUser:${googleUser.toString()}");

执行效果如下:

 点击高级:

 点击【转至project-810623983861 (不安全)】,一路授权完成之后,即可实现google登录成功,输出如下:

可以看到,已经获取到google的用户信息了

完成

 源码地址:GitHub - TheRuningAnt/FGTALogin: 使用Flutter 去集成海外平台第三方登录,包含Google、Tiktok、Facebook、Apple登录


https://www.xjx100.cn/news/3270630.html

相关文章

可视化地图十大样式,别说没告诉你。

地图在可视化界面设计应用十分广泛&#xff0c;一般也会占据界面的C位置&#xff0c;是可视化设计的灵魂所在&#xff0c;本文带来地图可视化设计的十大样式。 1.3D贴图地图 图片来自网络 2.飞溅地图 图片来自网络 3.烟花地图 图片来自网络 4.蝌蚪线地图 图片来自网络 5.热…

【MySQL】-18 MySQL综合-4(MySQL储存引擎精讲+MySQL数据类型简介+MySQL整数类型+MySQL小数类型)

MySQL储存引擎精讲MySQL数据类型简介MySQL整数类型MySQL小数类型 十一 MySQL存储引擎精讲11.1 什么是存储引擎11.2 MySQL 5.7 支持的存储引擎11.3 如何选择 MySQL 存储引擎11.4 MySQL 默认存储引擎 十二 MySQL数据类型简介12.1 MySQL 常见数据类型1) 整数类型2) 日期/时间类型3…

汉服租赁网站:Java技术的文化应用

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

elasticsearch增删改查

一、数据类型 1、字符串类型 &#xff08;1&#xff09;text &#xff08;2&#xff09;keyword 2、数值类型 &#xff08;1&#xff09;long、integer、short、byte、float、double 3、日期类型 &#xff08;1&#xff09;date 4、布尔类型 &#xff08;1&#xff0…

【回溯】37. 解数独

37. 解数独 解题思路 通过solveSudoku方法开始求解数独问题&#xff0c;然后调用backtrack方法进行递归回溯搜索。backtrack方法通过两个参数i和j来确定当前搜索的位置。 在backtrack方法中&#xff0c;首先检查当前位置是否超出了数独的边界&#xff0c;若超出&#xff0c;则…

[office] Excel2019函数MAXIFS怎么使用?Excel2019函数MAXIFS使用教程 #知识分享#微信#经验分享

Excel2019函数MAXIFS怎么使用&#xff1f;Excel2019函数MAXIFS使用教程 Excel2019函数MAXIFS怎么使用&#xff1f;这篇文章主要介绍了Excel2019函数MAXIFS使用教程,需要的朋友可以参考下 在今年&#xff0c;Excel除了新版本Excel2019&#xff0c;其中有一个新功能MAXIFS函数&am…

《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)

文章目录 6.1 使用 CSS 变量进行设计&#xff1a;魔法配方的调配6.1.1 基础知识6.1.2 重点案例&#xff1a;创建可定制的主题6.1.3 拓展案例 1&#xff1a;响应式字体大小6.1.4 拓展案例 2&#xff1a;使用 CSS 变量创建动态阴影效果 6.2 calc(), min(), max() 等函数的应用&am…

AcWing 1207 大臣的旅费(树状DP + 注释详解)

[题目概述] 很久以前&#xff0c;T 王国空前繁荣。 为了更好地管理国家&#xff0c;王国修建了大量的快速路&#xff0c;用于连接首都和王国内的各大城市。 为节省经费&#xff0c;T 国的大臣们经过思考&#xff0c;制定了一套优秀的修建方案&#xff0c;使得任何一个大城市都…