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

奔跑的蚂蚁01

已于 2024-06-06 16:59:27 修改

阅读量3.3k

点赞数 27

文章标签： flutter Google

于 2024-02-08 16:08:58 首次发布

本文链接：https://blog.csdn.net/mumubumaopao/article/details/136078053

版权

本文详细介绍了如何在Flutter项目中集成Google登录功能，包括Firebase平台的配置、添加第三方库、获取用户信息的步骤，适用于需要海外登录的开发者作为参考。

摘要由CSDN通过智能技术生成

最近接触了几个海外登录的平台，踩了很多坑，也总结了很多东西，决定记录下来给路过的兄弟坐个参考，也留着以后留着回顾。更新时间为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登录最详细流程

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

【原创附源码】Flutter集成Apple支付详细流程(附源码)

【原创附源码】Flutter集成谷歌支付详细流程(附源码)

一 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，然后点击保存:

注意：这个指纹只在开发版本有效，当你的应用再谷歌商店上正式发布之后，之前自己的签名就无效了，谷歌会统一对签名管理，对app重新进行签名，所以线上发布之后，需要在谷歌后台获取到sha1签名在这里进行添加，原有的可以不删除，在开发环境下可以使用，这样从谷歌商店下载的包也就可以正常使用谷歌登录了

审核通过之后在这里找sha-1

添加完成下载配置文件：

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

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

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

iOS还需要额外增加一个配置，需要添加Url Schemes,操作方法如下

将此处的REVERSED_CLIENT_ID复制，

然后点击+新建一个url type,将刚才复制的内容添加进去

至此，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()}");

执行效果如下：