Flutter Web: Safari Google 登錄第一次嘗試被阻止

Question

我正在開發一個 Flutter Web 應用程序，它使用 Google 登錄和 Firebase 身份驗證。 目前，谷歌登錄在大多數瀏覽器上運行正常。 不過，我注意到，在 iPhone 上使用 Safari 並阻止彈出窗口時，第一次身份驗證失敗，它不起作用（沒有任何反應）。 看起來，彈出窗口被阻止了。 但是，通過立即點擊按鈕，身份驗證成功。

Safari 中的第一次交互根本不起作用，即使它會在 Firefox 或 Chrome 中起作用。 我還注意到 Google 登錄方法在私人（隱身）瀏覽器中不起作用。

這是我當前的 googleSignIn() 方法：

static Future<void> signInWithGoogle() async {
try {
  final GoogleSignIn googleSignIn = GoogleSignIn();

  final GoogleSignInAccount? googleSignInAccount =
      await googleSignIn.signIn();

  if (googleSignInAccount != null) {
    final GoogleSignInAuthentication googleSignInAuthentication =
        await googleSignInAccount.authentication;

    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleSignInAuthentication.accessToken,
      idToken: googleSignInAuthentication.idToken,
    );

    await FirebaseAuth.instance.signInWithCredential(credential);
  }
} catch (error) {
  throw error;
}

}

如前所述，它在我測試過的所有其他瀏覽器中都能正常工作。 當彈出窗口未被阻止時，它也適用於 Safari，盡管在第一次調用時它會詢問用戶是否要允許彈出窗口。

我想指出，其他使用 Google 登錄的網站不會遇到同樣的問題，它似乎是 Flutter 的 Google 登錄 package 特有的。

Answer 1

在搜索了 GitHub 和 StackOverflow 之后，我找到了解決方案。 在應用程序初始屏幕的initState中，調用GoogleSignIn().signInSilently() 。 這不是 Google 的有意功能，而是一個令人愉快的 bug 解決方法。

有關更多上下文，請參閱 Google 自己的google_sign_in 示例。 請務必關注initState 。

最后，如果您將 Firebase 身份驗證與 Google 登錄一起使用，這里是捕獲靜默silentSignIn()產生的用戶 object 的方法，這樣您就可以獲得好處。

static Future<void> signInWithGoogleSilently() async {
  try {
    final GoogleSignIn googleSignIn = GoogleSignIn();

    final GoogleSignInAccount? googleSignInAccount =
        await googleSignIn.signInSilently();

    if (googleSignInAccount != null) {
      final GoogleSignInAuthentication googleSignInAuthentication =
          await googleSignInAccount.authentication;

      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleSignInAuthentication.accessToken,
        idToken: googleSignInAuthentication.idToken,
      );

      await FirebaseAuth.instance.signInWithCredential(credential);
    }
  } catch (error) {
    throw error;
  }
}