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 在各自平台配置,不要互相混用
相关推荐
随风一样自由15 分钟前
【前端工程化】前端工程化解耦实践:从问题分析到架构重构
前端·重构·架构
vortex518 分钟前
Web 渗透测试:未授权与越权漏洞全流程挖掘思路
前端
我有满天星辰33 分钟前
【前端模块化】前端模块化演进之路:从脚本堆砌到标准统一
前端
我有满天星辰39 分钟前
Vue 3 响应式双雄:ref 与 reactive 完全指南
前端·javascript·vue.js
随风一样自由9 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH10 小时前
HTML 的 <data> 元素
前端·html
YHHLAI10 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
kyriewen12 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H13 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
ZZZMMM.zip13 小时前
基于鸿蒙HarmonyOS NEXT开发AI英语口语应用:智能口语练习新体验与鸿蒙Flutter框架跨端实
人工智能·flutter·华为·harmonyos·鸿蒙·鸿蒙系统