鸿蒙flutter第三方库适配 - Google登录演示
运行效果图Google登录演示是一款专注于展示Google账号登录功能的演示应用，旨在帮助开发者快速理解和集成Google登录服务。应用支持完整的登录流程、用户信息展示、登录状态管理、账号切换等功能，提供清晰直观的用户体验。应用以经典蓝色为主色调，象征信任与专业。涵盖登录页面、个人资料、安全设置、应用设置四大核心模块。用户可以体验完整的Google登录流程，查看用户信息，管理登录状态，切换不同账号
·
Google登录演示应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
适配的第三方库地址：
- google_sign_in: https://pub.dev/packages/google_sign_in
- shared_preferences: https://pub.dev/packages/shared_preferences
- animations: https://pub.dev/packages/animations
- local_auth: https://pub.dev/packages/local_auth
一、项目概述
运行效果图
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 | 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 | 获取用户邮箱 | 账号识别 | |
| 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 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 登录认证流程
三、核心模块设计
3.1 数据模型设计
3.1.1 用户模型 (User)
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)
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 用户登录状态分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 登录页面结构
3.2.3 个人资料页结构
3.2.4 安全设置页结构
3.3 认证流程逻辑
3.4 状态管理逻辑
四、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登录管理器实现
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 状态存储管理器实现
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 生物认证管理器实现
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 认证状态管理器实现
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 登录动画实现
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 登录流程
6.2 账号切换流程
6.3 退出登录流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 多登录方式
登录功能：
- Facebook登录
- Apple登录
- 微信登录
- 手机号登录
7.2.2 安全增强
安全功能：
- 两步验证
- 登录设备管理
- 异常登录检测
- 安全评分系统
7.2.3 数据同步
同步功能：
- 用户数据云同步
- 多设备数据同步
- 离线数据缓存
- 冲突自动解决
八、注意事项
8.1 开发注意事项
-
OAuth配置：正确配置Google OAuth客户端ID
-
签名证书：Android需要配置SHA-1签名证书
-
权限管理：正确申请必要的网络权限
-
Token管理：妥善存储和管理访问令牌
-
错误处理：正确处理登录失败和取消情况
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 中添加以下依赖：
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):
<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):
<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 运行命令
# 查看可用设备
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登录演示——安全便捷的账号认证
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
10
0- 0
已为社区贡献22条内容
所有评论(0)