Flutter开发的app,实现Google 登录

Google 登录配置步骤(HoloMotion Run)

本文档用于梳理app项目的 Google 登录接入与排查步骤,适用于 Flutter Android / iOS。

1. 现状与关键参数(来自当前项目)

  • Flutter 依赖:google_sign_in(见 pubspec.yaml
  • Android 包名:xxxx(见 android/app/build.gradle
  • iOS GIDClientIDxxxx.apps.googleusercontent.com(见 ios/Runner/Info.plist
  • iOS URL Scheme:com.googleusercontent.apps.xxxx(见 ios/Runner/Info.plist
  • Flutter 端 serverClientIdxxxx.apps.googleusercontent.com(见 lib/features/login/presentation/login_viewmodel.dart

说明:当前实现是"Google 原生授权 + 后端 OAuth 状态检查/登录"的模式,不依赖 Firebase Auth。

2. Google Cloud Console 创建 OAuth 客户端

在 Google Cloud Console 的"API 与服务 -> 凭据"中,至少创建以下 3 类 OAuth 客户端:

  1. Android 客户端

    • 包名:xxxx
    • SHA-1:调试签名 + 发布签名都要配置(建议都加)
  2. iOS 客户端

    • Bundle ID:xxxx
    • 生成 iOS Client ID(用于 GIDClientID 和 URL Scheme)
  3. Web 客户端

    • 用于移动端获取 idToken 时的 serverClientId
    • 对应本项目 LoginViewModelGoogleSignIn(serverClientId: ...)
  4. Google签名

    • 与Android客户端签名不同,Android客户端可以自己签名,release与debug版本编译都需要注意,最好用一个,可以配置。Google应用有一个Google签名,如果app是经由Google签名的,则需要新建一个在OAuth 客户端。
    • 将Google Play Console对应app项目下,找到应用完整性页面页面,往下拉,看到Play 应用签名点击右上角的设置,然后复制SHA-1到 对应的OAuth客户端配置项里。

同时确认 OAuth 同意屏幕已配置并发布到可测试状态(测试用户白名单要包含实际测试账号)。

3. Android 端配置

3.1 确认包名一致

文件:android/app/build.gradle

  • namespace = "xxxx"
  • applicationId = "xxxx"

两者需与 Google Console 中 Android OAuth 客户端包名完全一致。

3.2 获取并登记 SHA-1

调试包 SHA-1(macOS/Linux):

bash 复制代码
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

发布包 SHA-1:

  • 使用你们发布签名 keystore 执行同样命令
  • 将调试/发布 SHA-1 都添加到 Google Console Android OAuth 客户端

3.3 常见错误映射

  • ApiException: 10 (DEVELOPER_ERROR):通常是 SHA-1 未登记包名不一致
  • ApiException: 7:通常是网络问题
  • ApiException: 8:配置错误(OAuth 客户端/同意屏幕等)

4. iOS 端配置

文件:ios/Runner/Info.plist

必须包含:

  1. GIDClientID
  2. CFBundleURLTypes -> CFBundleURLSchemes,其值是 iOS Client ID 去掉 .apps.googleusercontent.com 后得到的 Scheme(com.googleusercontent.apps.xxx

当前项目已配置:

  • GIDClientID = xxxx.apps.googleusercontent.com
  • URL Scheme = com.googleusercontent.apps.xxxx

如果更换了 Google 项目或 OAuth 客户端,需要同步更新这两处并重新安装 App。

5. Flutter 代码侧配置

文件:lib/features/login/presentation/login_viewmodel.dart

Google 登录初始化核心代码:

dart 复制代码
      final GoogleSignIn googleSignIn = GoogleSignIn(
        scopes: ['email', 'profile'],
        serverClientId:
            'xxxx.apps.googleusercontent.com',
      );

这个serverClientId 使用 Web OAuth 客户端的 client_id,即客户端ID

要求:

  1. serverClientId 使用 Web OAuth 客户端 的 client id
  2. Android/iOS 原生客户端 id 在各自平台配置,不要互相混用
相关推荐
胖橘2 小时前
适用于Vue3的高集成度文件预览组件,支持多种类型的文件
前端·vue.js·开源
我叫黑大帅2 小时前
🚀 JS 最常用的性能优化 防抖和节流
前端·javascript·面试
啊丫丫2 小时前
【深入浅出地学习Vue】——vue2
前端·vue.js
求知若饥2 小时前
webpage-channel 让不同页面通信像组件通信一样简便
前端·typescript·node.js
图扑软件2 小时前
图扑 HT 帧动画 | 3D 动态渲染设计与实现
前端·javascript·3d·动画·数字孪生
chenzhen_09072 小时前
flutter布局规则
flutter
终端鹿2 小时前
Pinia 与 Vue Router 权限控制实战(衔接Pinia基础篇)
前端·javascript·vue.js
啥咕啦呛2 小时前
3个月前端转全栈计划
前端
BradyC2 小时前
laya编译内存溢出问题
前端