鸿蒙flutter第三方库适配 - Google登录演示

麒麟ZHAO2026-04-13 8:58

Google登录演示应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

一、项目概述

运行效果图

1.1 应用简介

Google登录演示是一款专注于展示Google账号登录功能的演示应用，旨在帮助开发者快速理解和集成Google登录服务。应用支持完整的登录流程、用户信息展示、登录状态管理、账号切换等功能，提供清晰直观的用户体验。

应用以经典蓝色为主色调，象征信任与专业。涵盖登录页面、个人资料、安全设置、应用设置四大核心模块。用户可以体验完整的Google登录流程，查看用户信息，管理登录状态，切换不同账号。

1.2 核心功能

功能模块 功能描述 实现方式
Google登录 使用Google账号登录应用 OAuth2.0
用户信息 展示用户基本信息 API获取
登录状态 管理用户登录状态 状态管理
账号切换 切换不同的Google账号 多账号支持
生物认证 使用指纹/面容保护账号 本地认证
安全设置 管理账号安全选项 设置管理
登录历史 查看登录活动记录 日志记录
退出登录 安全退出当前账号 状态清除

1.3 登录方式定义

序号 登录方式 图标 描述 安全级别
1 Google账号 G 使用Google账号OAuth登录 高
2 邮箱登录 ✉️ 使用邮箱和密码登录 中
3 手机登录 📱 使用手机号和验证码登录 中
4 访客模式 👤 无需登录的访客模式 低

1.4 用户信息字段

序号 字段名称 类型 描述 来源
1 id String 用户唯一标识 Google API
2 email String 用户邮箱地址 Google API
3 displayName String 用户显示名称 Google API
4 photoUrl String 用户头像URL Google API
5 firstName String 用户名 Google API
6 lastName String 用户姓 Google API
7 lastLoginAt DateTime 最后登录时间 本地记录
8 scopes List 授权权限列表 OAuth授权

1.5 授权权限定义

序号 权限名称 描述 用途
1 email 获取用户邮箱 账号识别
2 profile 获取用户资料 个人信息展示
3 openid OpenID认证 身份验证
4 https://www.googleapis.com/auth/userinfo.profile 详细资料 扩展信息

1.6 安全选项定义

序号 安全选项 图标 描述 默认状态
1 生物识别 🔐 指纹/面容解锁 关闭
2 两步验证 🔑 登录二次验证 关闭
3 登录通知 🔔 新设备登录提醒 开启
4 设备管理 📱 管理已登录设备 -

1.7 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 StatefulWidget -
Google登录 Google Sign In >= 6.0.0
状态存储 SharedPreferences >= 2.0.0
动画效果 Animations >= 2.0.0
生物认证 Local Auth >= 2.0.0
目标平台 鸿蒙OS / Web API 21+

1.8 项目结构

复制代码 
lib/
└── main_google_login.dart
    ├── GoogleLoginApp               # 应用入口
    ├── AuthWrapper                  # 认证包装器
    ├── User                         # 用户模型
    ├── LoginState                   # 登录状态模型
    ├── SplashScreen                 # 启动屏幕
    ├── LoginPage                    # 登录页面
    ├── HomePage                     # 主页面（底部导航）
    ├── _buildProfilePage            # 个人资料页
    ├── _buildSecurityPage           # 安全设置页
    └── _buildSettingsPage           # 应用设置页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
认证包装器

AuthWrapper
启动屏幕
登录页面
主页面
登录表单
最近账号
其他登录方式
个人资料页
安全设置页
应用设置页
认证管理器

AuthManager
用户管理器

UserManager
安全管理器

SecurityManager
状态管理器

StateManager
User

用户模型
LoginState

登录状态
SharedPreferences

本地存储
GoogleSignIn

Google服务

2.2 类图设计

manages
tracks
creates
displays
GoogleLoginApp
+Widget build()
AuthWrapper
-User currentUser
-bool isLoading
-bool isAuthenticated
+checkAuthStatus()
+onLogin()
+onLogout()
+onSwitchAccount()
User
+String id
+String email
+String displayName
+String photoUrl
+String firstName
+String lastName
+DateTime lastLoginAt
+List<String> scopes
+get initials
LoginState
+bool isLoggedIn
+User user
+String accessToken
+DateTime expiresAt
LoginPage
+Function onLogin
-List<User> recentAccounts
-bool isLoading
+signInWithGoogle()
+signInWithRecentAccount()
HomePage
+User user
+Function onLogout
+Function onSwitchAccount
+logout()
+switchAccount()

2.3 页面导航流程

已登录
未登录
是
否
应用启动
启动屏幕
检查登录状态
主页面
登录页面
选择登录方式
Google登录
邮箱登录
手机登录
访客模式
登录成功?
个人资料页
安全设置页
应用设置页
退出登录

2.4 登录认证流程

主页面 认证管理器 Google服务 登录页面 用户 主页面 认证管理器 Google服务 登录页面 用户 点击Google登录 发起OAuth请求 显示授权页面 确认授权 返回授权码 获取访问令牌 返回令牌和用户信息 保存登录状态 状态保存成功 跳转到主页 显示用户信息

三、核心模块设计

3.1 数据模型设计

3.1.1 用户模型 (User)
dart 复制代码 
class User {
  final String id;
  final String email;
  final String displayName;
  final String? photoUrl;
  final String? firstName;
  final String? lastName;
  final DateTime? lastLoginAt;
  final List<String> scopes;

  const User({
    required this.id,
    required this.email,
    required this.displayName,
    this.photoUrl,
    this.firstName,
    this.lastName,
    this.lastLoginAt,
    this.scopes = const [],
  });

  String get initials {
    if (displayName.isEmpty) return '?';
    final parts = displayName.split(' ');
    if (parts.length >= 2) {
      return '${parts[0][0]}${parts[1][0]}'.toUpperCase();
    }
    return displayName[0].toUpperCase();
  }
}
3.1.2 登录状态模型 (LoginState)
dart 复制代码 
class LoginState {
  final bool isLoggedIn;
  final User? user;
  final String? accessToken;
  final DateTime? expiresAt;

  const LoginState({
    required this.isLoggedIn,
    this.user,
    this.accessToken,
    this.expiresAt,
  });
}
3.1.3 用户登录状态分布

75% 25% 用户登录状态分布 已登录 未登录

3.2 页面结构设计

3.2.1 主页面布局

加载中
未登录
已登录
AuthWrapper
登录状态?
SplashScreen
LoginPage
HomePage
IndexedStack
个人资料页
安全设置页
应用设置页
NavigationBar

3.2.2 登录页面结构

登录页面
头部区域
登录卡片
底部区域
应用图标
欢迎文字
最近账号列表
Google登录按钮
其他登录方式
服务条款
隐私政策

3.2.3 个人资料页结构

个人资料页
SliverAppBar
账号信息卡片
登录状态卡片
授权权限卡片
用户头像
显示名称
邮箱地址
用户ID
邮箱
姓名
最后登录

3.2.4 安全设置页结构

安全设置页
生物识别卡片
安全选项卡片
活动日志卡片
指纹/面容开关
修改密码
设备管理
登录历史
安全通知
登录成功
安全检查
信息更新

3.3 认证流程逻辑

是
否
用户点击登录
初始化GoogleSignIn
调用signIn方法
用户是否授权?
获取GoogleAccount
显示错误信息
提取用户信息
创建User对象
保存登录状态
更新UI状态
跳转到主页
返回登录页面

3.4 状态管理逻辑

是
否
是
否
应用启动
AuthWrapper初始化
检查本地存储
有登录记录?
验证Token有效性
显示登录页面
Token有效?
恢复登录状态
显示主页面
等待用户登录
用户登录成功
保存登录状态

四、UI设计规范

4.1 配色方案

应用以经典蓝色为主色调，象征信任与专业：

颜色类型 色值 用途
主色 #2196F3 (Blue) 导航、主题元素
辅助色 #64B5F6 卡片背景
第三色 #90CAF9 进度条背景
强调色 #BBDEFB 分组页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片
成功色 #4CAF50 登录成功
错误色 #F44336 登录失败

4.2 状态配色

状态 色值 视觉效果
已登录 #4CAF50 绿色
未登录 #9E9E9E 灰色
加载中 #2196F3 蓝色
错误 #F44336 红色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
用户名称 24px Bold #FFFFFF
邮箱地址 14px Regular #FFFFFF70
卡片标题 18px Bold #000000
信息标签 12px Regular #666666
信息内容 16px Medium #000000

4.4 组件规范

4.4.1 登录按钮
复制代码 
┌─────────────────────────────────────┐
│     G   使用Google账号登录          │
│         (白色背景，灰色边框)         │
└─────────────────────────────────────┘
4.4.2 用户头像
复制代码 
┌─────────────────────────────────────┐
│              ⭕ GU                  │
│           (白色圆形背景)             │
│                                     │
│          Google User               │
│        user@gmail.com              │
└─────────────────────────────────────┘
4.4.3 登录状态卡片
复制代码 
┌─────────────────────────────────────┐
│  ✓ 已登录                           │
│    通过Google账号验证      [已验证]  │
└─────────────────────────────────────┘
4.4.4 安全选项卡片
复制代码 
┌─────────────────────────────────────┐
│  🔐 生物识别                    [开关]│
│     使用指纹或面容保护账号           │
└─────────────────────────────────────┘
4.4.5 最近账号卡片
复制代码 
┌─────────────────────────────────────┐
│  ⭕ Demo User               →      │
│     demo@gmail.com                  │
└─────────────────────────────────────┘

五、核心功能实现

5.1 Google登录管理器实现

dart 复制代码 
class GoogleAuthManager {
  final GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: ['email', 'profile', 'openid'],
  );

  Future<User?> signIn() async {
    try {
      final account = await _googleSignIn.signIn();
      if (account == null) return null;

      final auth = await account.authentication;
      
      return User(
        id: account.id,
        email: account.email,
        displayName: account.displayName ?? '',
        photoUrl: account.photoUrl,
        lastLoginAt: DateTime.now(),
        scopes: _googleSignIn.scopes,
      );
    } catch (e) {
      print('Google Sign-In Error: $e');
      return null;
    }
  }

  Future<void> signOut() async {
    await _googleSignIn.signOut();
  }

  Future<bool> isSignedIn() async {
    return await _googleSignIn.isSignedIn();
  }

  Future<User?> getCurrentUser() async {
    final account = await _googleSignIn.signInSilently();
    if (account == null) return null;

    return User(
      id: account.id,
      email: account.email,
      displayName: account.displayName ?? '',
      photoUrl: account.photoUrl,
    );
  }
}

5.2 状态存储管理器实现

dart 复制代码 
class AuthStorageManager {
  final SharedPreferences _prefs;
  static const String _userKey = 'current_user';
  static const String _tokenKey = 'access_token';
  static const String _expiresKey = 'token_expires';

  AuthStorageManager(this._prefs);

  Future<void> saveUser(User user) async {
    await _prefs.setString(_userKey, jsonEncode(user.toJson()));
  }

  Future<void> saveToken(String token, DateTime expiresAt) async {
    await _prefs.setString(_tokenKey, token);
    await _prefs.setString(_expiresKey, expiresAt.toIso8601String());
  }

  Future<User?> getUser() async {
    final jsonString = _prefs.getString(_userKey);
    if (jsonString == null) return null;
    return User.fromJson(jsonDecode(jsonString));
  }

  Future<String?> getToken() async {
    return _prefs.getString(_tokenKey);
  }

  Future<bool> isTokenValid() async {
    final expiresStr = _prefs.getString(_expiresKey);
    if (expiresStr == null) return false;
    
    final expiresAt = DateTime.parse(expiresStr);
    return DateTime.now().isBefore(expiresAt);
  }

  Future<void> clearAuth() async {
    await _prefs.remove(_userKey);
    await _prefs.remove(_tokenKey);
    await _prefs.remove(_expiresKey);
  }
}

5.3 生物认证管理器实现

dart 复制代码 
class BiometricAuthManager {
  final LocalAuthentication _localAuth = LocalAuthentication();

  Future<bool> isAvailable() async {
    return await _localAuth.canCheckBiometrics;
  }

  Future<List<BiometricType>> getAvailableBiometrics() async {
    return await _localAuth.getAvailableBiometrics();
  }

  Future<bool> authenticate() async {
    try {
      return await _localAuth.authenticate(
        localizedReason: '请验证您的身份以继续',
        options: const AuthenticationOptions(
          stickyAuth: true,
          biometricOnly: true,
        ),
      );
    } catch (e) {
      print('Biometric Auth Error: $e');
      return false;
    }
  }
}

5.4 认证状态管理器实现

dart 复制代码 
class AuthStateManager {
  final GoogleAuthManager _googleAuth;
  final AuthStorageManager _storage;
  final BiometricAuthManager _biometricAuth;

  StreamController<LoginState> _stateController = 
      StreamController<LoginState>.broadcast();

  Stream<LoginState> get stateStream => _stateController.stream;
  LoginState _currentState = const LoginState(isLoggedIn: false);

  AuthStateManager(this._googleAuth, this._storage, this._biometricAuth);

  Future<void> initialize() async {
    final user = await _storage.getUser();
    final tokenValid = await _storage.isTokenValid();

    if (user != null && tokenValid) {
      _updateState(LoginState(
        isLoggedIn: true,
        user: user,
        accessToken: await _storage.getToken(),
      ));
    }
  }

  Future<bool> signIn() async {
    final user = await _googleAuth.signIn();
    if (user == null) return false;

    await _storage.saveUser(user);
    _updateState(LoginState(
      isLoggedIn: true,
      user: user,
    ));

    return true;
  }

  Future<void> signOut() async {
    await _googleAuth.signOut();
    await _storage.clearAuth();
    _updateState(const LoginState(isLoggedIn: false));
  }

  void _updateState(LoginState state) {
    _currentState = state;
    _stateController.add(state);
  }

  LoginState get currentState => _currentState;

  void dispose() {
    _stateController.close();
  }
}

5.5 登录动画实现

dart 复制代码 
class LoginAnimationManager {
  late AnimationController controller;
  late Animation<double> fadeAnimation;
  late Animation<double> slideAnimation;
  late Animation<double> scaleAnimation;

  void initialize(TickerProvider vsync) {
    controller = AnimationController(
      vsync: vsync,
      duration: const Duration(milliseconds: 800),
    );

    fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: controller, curve: Curves.easeIn),
    );

    slideAnimation = Tween<double>(begin: 50.0, end: 0.0).animate(
      CurvedAnimation(parent: controller, curve: Curves.easeOut),
    );

    scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
      CurvedAnimation(parent: controller, curve: Curves.easeOutBack),
    );
  }

  void forward() {
    controller.forward();
  }

  void reverse() {
    controller.reverse();
  }

  void dispose() {
    controller.dispose();
  }
}

六、交互设计

6.1 登录流程

主页面 状态管理器 Google服务 登录页面 用户 主页面 状态管理器 Google服务 登录页面 用户 点击Google登录 显示加载状态 发起OAuth请求 显示授权页面 确认授权 返回用户信息 保存登录状态 状态保存成功 跳转到主页 显示用户信息

6.2 账号切换流程

选择已有账号
添加新账号
是
否
点击切换账号
显示账号列表
选择操作?
切换到该账号
发起登录流程
更新当前用户
Google登录
登录成功?
刷新页面显示

6.3 退出登录流程

确定
取消
点击退出
确认对话框
确认退出
取消
清除登录状态
清除本地数据
跳转登录页面

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 基础UI框架 Google登录集成 状态管理实现 生物认证功能 多账号管理 安全设置完善 其他登录方式 登录历史记录 数据同步功能 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 Google登录演示开发计划

7.2 功能扩展建议

7.2.1 多登录方式

登录功能：

  • Facebook登录
  • Apple登录
  • 微信登录
  • 手机号登录
7.2.2 安全增强

安全功能：

  • 两步验证
  • 登录设备管理
  • 异常登录检测
  • 安全评分系统
7.2.3 数据同步

同步功能：

  • 用户数据云同步
  • 多设备数据同步
  • 离线数据缓存
  • 冲突自动解决

八、注意事项

8.1 开发注意事项

  1. OAuth配置：正确配置Google OAuth客户端ID

  2. 签名证书：Android需要配置SHA-1签名证书

  3. 权限管理：正确申请必要的网络权限

  4. Token管理：妥善存储和管理访问令牌

  5. 错误处理：正确处理登录失败和取消情况

8.2 常见问题

问题 原因 解决方案
登录失败 OAuth配置错误 检查客户端ID配置
签名不匹配 SHA-1证书错误 重新配置签名证书
Token过期 令牌已失效 刷新或重新登录
权限不足 未申请权限 检查权限配置
网络错误 网络连接问题 检查网络状态

8.3 使用技巧

🔐 Google登录演示使用技巧 🔐

登录管理

  • 使用最近账号快速登录
  • 定期检查登录设备
  • 开启生物识别保护
  • 及时退出不常用设备

安全设置

  • 启用两步验证
  • 定期更换密码
  • 检查授权权限
  • 关注安全通知

账号切换

  • 添加多个Google账号
  • 使用账号切换功能
  • 注意当前登录账号
  • 避免账号混淆

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Android API 21+
iOS 12.0+
Web浏览器 Chrome 90+

9.2 依赖配置

在 pubspec.yaml 中添加以下依赖：

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^6.0.0
  shared_preferences: ^2.0.0
  animations: ^2.0.0
  local_auth: ^2.0.0

9.3 权限配置

Android (android/app/src/main/AndroidManifest.xml):

xml 复制代码 
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />

<!-- Google Sign-In -->
<meta-data
    android:name="com.google.android.gms.client_id"
    android:value="YOUR_CLIENT_ID.apps.googleusercontent.com" />

iOS (ios/Runner/Info.plist):

xml 复制代码 
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>NSFaceIDUsageDescription</key>
<string>需要使用面容识别以保护您的账号</string>

9.4 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_google_login.dart --web-port 8150

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 -t lib/main_google_login.dart

# 运行到Android设备
flutter run -d android -t lib/main_google_login.dart

# 代码分析
flutter analyze lib/main_google_login.dart

十、总结

Google登录演示应用通过完整的登录流程、用户信息展示、登录状态管理、账号切换功能，帮助开发者快速理解和集成Google登录服务。应用支持Google账号登录、生物识别保护、安全设置管理、登录历史查看等核心功能。

应用采用 Material Design 3 设计规范，以经典蓝色为主色调，象征信任与专业。通过本应用，希望能够帮助开发者快速实现Google登录功能，提升应用的用户体验和安全性。

Google登录演示------安全便捷的账号认证

相关推荐
SoraLuna2 小时前
「鸿蒙智能体实战记录 12」快捷指令配置与真机逐条验证实现
华为·harmonyos
2401_839633912 小时前
鸿蒙flutter第三方库适配 - 日历网格
flutter·华为·harmonyos
2401_839633912 小时前
鸿蒙flutter第三方库适配 - 数据网格
flutter·华为·harmonyos
弓.长.2 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库：rn-placeholder — 骨架屏占位组件
react native·react.js·harmonyos
想你依然心痛2 小时前
HarmonyOS 5.0医疗健康开发实战：构建分布式健康监测与AI预警系统
人工智能·分布式·harmonyos
见山是山-见水是水2 小时前
鸿蒙flutter第三方库适配 - 汇率换算器
redis·flutter·华为·harmonyos
麒麟ZHAO2 小时前
Flutter 框架跨平台鸿蒙开发 - 智能衣柜衣物换季
flutter·华为·harmonyos
盐真卿2 小时前
华为数通 | VRRP负载分担与网关冗余实验：主备切换+流量分流，企业高可用网络实战
网络·华为
不爱吃糖的程序媛3 小时前
鸿蒙三方库适配读懂 `thirdparty/AES/.gitignore`：哪些文件不该进 Git？
git·elasticsearch·harmonyos
热门推荐
01一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛02GitHub 镜像站点032026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07Oh My Codex 快速使用指南08免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手09OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南