Flutter如何实现google_sign_in登录

在Flutter中如何使用google_sign_in插件实现Google登录功能？我已经按照官方文档配置了Firebase和Google Cloud项目，添加了必要的依赖和SHA-1证书指纹，但在调用signIn()方法时总是返回空用户对象。请问完整的实现步骤是什么？是否需要额外处理OAuth同意屏幕或Web客户端ID？能否提供一个可运行的代码示例？

2 回复

在Flutter中实现Google登录，主要使用google_sign_in包。步骤如下：

  1. 添加依赖：在pubspec.yaml中添加：

    dependencies:
  google_sign_in: ^5.4.0

  2. 配置Android：

    • 在Firebase控制台创建项目，添加Android应用并下载google-services.json文件。
    • 将文件放入android/app目录。
    • 在android/build.gradle中添加Google服务插件。

  3. 配置iOS（可选）：

    • 在Firebase中添加iOS应用，下载GoogleService-Info.plist并放入ios/Runner目录。

  4. 代码实现：

    import 'package:google_sign_in/google_sign_in.dart';

final GoogleSignIn _googleSignIn = GoogleSignIn();

Future<void> signIn() async {
  try {
    final GoogleSignInAccount? account = await _googleSignIn.signIn();
    // 获取用户信息：account?.displayName, account?.email, account?.photoUrl
  } catch (error) {
    print("登录失败: $error");
  }
}

  5. 登出：

    await _googleSignIn.signOut();

注意：确保SHA-1证书指纹在Firebase中正确配置（Android），并启用Google登录服务。

更多关于Flutter如何实现google_sign_in登录的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现Google登录，可以使用官方推荐的google_sign_in包。以下是完整的实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  google_sign_in: ^6.1.5
  http: ^1.1.0

2. Android配置

在 android/app/src/main/AndroidManifest.xml 中添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

3. 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>

4. 实现代码

import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;

class GoogleSignInDemo extends StatefulWidget {
  @override
  _GoogleSignInDemoState createState() => _GoogleSignInDemoState();
}

class _GoogleSignInDemoState extends State<GoogleSignInDemo> {
  GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: [
      'email',
      'profile',
    ],
  );

  GoogleSignInAccount? _currentUser;

  @override
  void initState() {
    super.initState();
    _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {
      setState(() {
        _currentUser = account;
      });
    });
    _googleSignIn.signInSilently();
  }

  Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      print('登录失败: $error');
    }
  }

  Future<void> _handleSignOut() async {
    _googleSignIn.disconnect();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google登录示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_currentUser != null) ...[
              CircleAvatar(
                backgroundImage: NetworkImage(_currentUser!.photoUrl ?? ''),
                radius: 40,
              ),
              SizedBox(height: 10),
              Text('姓名: ${_currentUser!.displayName}'),
              Text('邮箱: ${_currentUser!.email}'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _handleSignOut,
                child: Text('退出登录'),
              ),
            ] else
              ElevatedButton(
                onPressed: _handleSignIn,
                child: Text('Google登录'),
              ),
          ],
        ),
      ),
    );
  }
}

5. 获取用户信息

登录成功后，可以通过 _currentUser 对象获取用户信息：

  • displayName: 显示名称
  • email: 邮箱地址
  • photoUrl: 头像URL
  • id: 用户ID

6. 注意事项

  • 需要在 Google Cloud Console 创建项目并配置OAuth 2.0客户端
  • Android需要配置SHA-1指纹
  • iOS需要配置URL Scheme

这样就完成了Flutter中的Google登录功能实现。

回到顶部