FLUTTER 注册/使用 Google 登录弹出窗口未出现

Question

我想让用户使用谷歌登录应用程序，但屏幕上没有弹出窗口。我该怎么做才能出现弹出窗口？当我按下“继续使用 Google”按钮时，它什么也没做。

当我调试代码时，调试器直接转到最后一个打印语句 -

 print("GOOGLE SIGN IN: ${googleSignIn.clientId}");

这是我的代码-

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

part 'google_sign_in_event.dart';
part 'google_sign_in_state.dart';

class GoogleSignInBloc extends Bloc<GoogleSignInEvent, GoogleSignInState> {
  GoogleSignInBloc() : super(GoogleSignInInitial()) {
    on<GoogleLogInEvent>((event, emit) {
      GoogleSignIn googleSignIn = GoogleSignIn();
      GoogleSignInAccount? _user;
      // GoogleSignInAccount get user => _user!;
      //final googlelogin = MeditationGoogleSignIn().googleLogIn();

      Future googleLogIn() async {
        try {
          final googleUser = await googleSignIn.signIn();

          if (googleUser == null) {
            print("NO GOOGLE USER");
            return null;
          }
          _user = googleUser;

          final googleAuth = await googleUser.authentication;
          final credential = GoogleAuthProvider.credential(
            accessToken: googleAuth.accessToken,
            idToken: googleAuth.idToken,
          );
          await FirebaseAuth.instance.signInWithCredential(credential);
        } catch (e) {
          print("THERE IS AN ERROR IN LOGIN: ${e.toString()}");
        }
      }

      print("GOOGLE SIGN IN: ${googleSignIn.clientId}");
    });

    on<GoogleLogOutEvent>((event, emit) {
      Future googleLogOut() async {
        final googleSignIn = GoogleSignIn();
        await googleSignIn.disconnect();
        FirebaseAuth.instance.signOut();
      }
    });
  }
}

Answer 1

尝试添加范围：

GoogleSignIn(scopes: ['email', 'profile'])

Answer 2

有两种方法可以使 Google 登录弹出窗口出现在网络上：

1. 使用 Firebase 方法：这将确保提示用户 从 Google 帐户列表中选择一个帐户。为此，请添加 将以下代码添加到您的signInWithPopup()方法中：

if (kIsWeb) {
  final GoogleAuthProvider provider = GoogleAuthProvider()
      .setCustomParameters({'prompt': 'select_account'});
  await _firebaseAuth.signInWithPopup(provider);
}

2. 使用原生Google登录按钮：需要您修改 您的 UI 使用本机按钮。为此，您需要添加 将 Google Sign-In Web 登录到您的项目并按照说明进行操作 在文档中实现该按钮。

class loginGoogleButton extends StatefulWidget {
  const loginGoogleButton({
    Key? key,
  }) : super(key: key);

  @override
  State<loginGoogleButton> createState() => _loginGoogleButtonState();
}

class _loginGoogleButtonState extends State<loginGoogleButton> {
  GoogleSignInAccount? user;

  GoogleSignIn googleSignIn = GoogleSignIn(
    clientId: const String.fromEnvironment('GOOGLE_CLIENT_ID'),
  );

  @override
  void initState() {
    googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {
      setState(() {
        user = account;
        
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final body = ElevatedButtonLab.normal(
      brightness: Brightness.light,
      child: Padding(
        padding:
            const EdgeInsets.only(right: 10, top: 12, bottom: 12, left: 12),
        child: (GoogleSignInPlatform.instance as web.GoogleSignInPlugin)
            .renderButton(),
      ),
    );

    return body;
  }
}

注意：第二个选项更复杂，需要您修改 UI 并检查导入是否也是移动设备。不过，它确实有效。