Flutter Web集成Firebase谷歌登录时获取accessToken异常求助

Hey there! Let's dig into why you're not getting that eyJhbGci... style JWT access token you're expecting. I took a close look at your code, and here's the root of the issue plus fixes to get you back on track:

What's going wrong? #

You're mixing two different Google login flows here: the GoogleSignIn package and Firebase Auth's signInWithPopup(GoogleAuthProvider). On Flutter Web, the accessToken you get from userCredential.credential!.accessToken isn't the Google OAuth2 access token you're thinking of—it's a short-lived Firebase session token, which is why it doesn't match the JWT format you expect.

Fix 1: Get the actual Google OAuth2 Access Token (for Google APIs) #

If you need the token to call Google services like Gmail, Drive, or People API, use the GoogleSignIn package directly to fetch the official OAuth2 access token. Here's how to adjust your code:

final GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email', 'profile']);

Future<void> handleSignIn() async {
  try {
    // 触发谷歌登录弹窗
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    if (googleUser == null) {
      // 用户取消了登录流程
      return;
    }
    
    // 获取谷歌的认证信息，这里的accessToken就是你要的JWT格式
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final String? googleAccessToken = googleAuth.accessToken;
    
    print('谷歌OAuth2 Access Token: $googleAccessToken');

    // 如果还需要关联到Firebase Auth，用下面的代码
    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAccessToken,
      idToken: googleAuth.idToken,
    );
    final UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(credential);
    final User? user = userCredential.user;

    // 后续的存储和API调用逻辑
    if (user != null) {
      setSharedPref(
        name: user.displayName, 
        token: googleAccessToken, 
        imageUrl: user.photoURL
      );
      PostResponseModel model = await signInJWT(googleAccessToken ?? '');
      if (model.errors?.errorCode == null) {
        print(model.data.toString());
      } else {
        print(model.errors!.errorMessage);
      }
    }
  } catch (error) {
    print('登录过程出错: $error');
  }
}

Fix 2: Get Firebase ID Token (for your backend authentication) #

If you just need a JWT token to verify the user's identity on your own backend, you don't need the Google OAuth2 token—instead, fetch Firebase's own ID Token after logging in with Firebase Auth:

// 在获取到user之后调用这个方法
final String firebaseIdToken = await user!.getIdToken();
print('Firebase ID Token: $firebaseIdToken'); // 这个就是eyJhbGci开头的JWT

Firebase's ID Token is designed specifically for authenticating users with your backend, and it's a valid JWT you can verify using Firebase Admin SDKs.

备注：内容来源于stack exchange，提问作者Parama Artha