Flutter登录功能之Google登录

原创

Luoyger

发布于 2024-07-03 10:51:13

2500

发布于 2024-07-03 10:51:13

文章被收录于专栏：移动应用开发移动应用开发

远端配置

注册账号

https://console.firebase.google.com

创建应用

注册成功后在主页按照提示创建一个应用。

选择配置平台

点击项目设置。

按照需求，选择需要配置的平台，每个平台的配置都需要单独配置，配置流程也有一定差异。

Flutter配置示例

第一步

下载Firebase cli工具，推荐使用npm方式进行安装。

https://firebase.google.com/docs/cli

npm install -g firebase-tools

执行登录命令，会提示使用自己的Google账号登录。

firebase login

若还未创建Flutter项目和下载FlutterSDK，则还需要按照提示去完成操作。

第二步

从任何目录运行以下命令：

dart pub global activate flutterfire_cli

然后，在Flutter 项目的根目录下，运行以下命令，需要修改--project参数中的ID，直接复制页面命令即可。

flutterfire configure --project=studied-point-xxx

这会自动向 Firebase 注册您的每个平台应用，并向您的 Flutter 项目添加 lib/firebase_options.dart 配置文件。

如果在Windows平台下报错找不到flutterfire，则需要完整的执行路径，类似如下，按情况修改个人用户名。

 C:\Users\admin\AppData\Local\Pub\Cache\bin\flutterfire.bat configure --project=studied-point-xxx

第三步

在Flutter的程序启动入口处添加初始化Firebase的代码，参考如下：

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
  logger.i("Starting app...");
}

Android配置示例

第一步

软件包名称一般就是应用级 build.gradle 文件中的 applicationId，也就是MainActivity的包名。

生成签名证书的SHA-1

https://developers.google.com/android/guides/client-auth?hl=zh-cn

如需获取调试证书指纹，请执行以下操作，USERPROFILE为用户目录，如果报错，则自行修改实际目录。

debug.keystore的默认密码是android。

keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

如需获取发布证书指纹，请执行以下操作，keystore需要先生成，将生成的字符串拷贝到页面中。

keytool -list -v -alias <your-key-name> -keystore <path-to-production-keystore>

如果没有证书，生成证书的命令如下，需要按实际情况填写信息，以及记住设置的密码。

keytool -genkey -v -keystore android.jks -keyalg RSA -keysize 2048 -validity 10000 -alias sign

第二步

将下载的 google-services.json 文件移到您的模块（应用级/app目录）根目录中。

第三步

如果是Flutter项目，则可以跳过此步骤。

iOS配置示例

第一步

软件包ID可以在常规标签中找到 Xcode 中应用主目标的软件包标识符，一般和Android包名类似，名字中的下划线会替换为驼峰格式。

第二步

下载的“GoogleService-Info.plist”文件移至 Xcode 项目的根目录（Runner目录）并将其添加至所有目标。

第三步

如果是Flutter项目，则可以跳过此步骤。

第四步

如果是Flutter项目，则可以跳过此步骤。

添加Google登录方式

选择左侧的Authentication菜单，点击“开始”。

选择Google提供方。

点击启用，添加项目的公开名称，用户可以看到，再选择项目支持邮箱，一般是当前登录的Google邮箱，最后保存即可。

Flutter项目开发配置

引用插件

插件的地址如下： https://pub.dev/packages/firebase_auth

https://pub.dev/packages/google_sign_in

pubspec.yaml中依赖配置如下：

firebase_auth: ^5.1.0
google_sign_in: ^6.2.1

添加登录按钮

添加Google登录按钮。

// 其他登录方式
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Padding(
      padding: EdgeInsets.only(right: 16.0),
      child: Text(
        '其它登录',
        style: TextStyle(
          fontSize: 16.0,
          // fontWeight: FontWeight.bold,
        ),
      ),
    ),
    
    const SizedBox(width: 16.0),
    CircleAvatar(
      backgroundColor: Colors.white,
      child: IconButton(
        icon: Image.asset('assets/images/google-logo.png'),
          onPressed: () async {
            if(await signInWithGoogle()) {
              Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(builder: (context) => const MyHomePage()),
                    (route) => false,
              );
            }
          }
      ),
    ),
  ],
),

执行登录操作

新建google_login.dart，添加如下登录代码。

import 'package:chat_ai/common/common.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

// 登录并返回
Future<bool> signInWithGoogle() async {
  // 确保用户已经登录，并获取当前用户的身份验证令牌
  final currentUser = FirebaseAuth.instance.currentUser;
  if (currentUser != null) {
    // 这里处理您需要使用这个JWT令牌的逻辑，例如将它存储到本地存储中作为凭据。
    // final tokenResult = await currentUser.getIdToken();
    return true;
  } else {
    UserCredential userCredential = await loginGoogle();
    logger.d("user login google: ${userCredential.user?.displayName}");
    return true;
  }
}


// Google登录
Future<UserCredential> loginGoogle() async {

  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;


  // Create a new credential,
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

// 退出Google登录
Future<void> signOutGoogle() async {
  await FirebaseAuth.instance.signOut();
  await GoogleSignIn().signOut();
}