Firebase signInWithPopup()函数，弹出Google登录窗口，但是弹出窗口没有显示任何Google账户。

Question

我将进行“Google Sign In Authentication”使用Firebase的操作...但是登陆弹窗不会显示任何可用的Google用户，该弹窗大约在5秒后会消失且不执行任何操作。

在firebase.js中的代码:

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

var firebaseConfig = {
  apiKey: "AIzaSyDSxAzARyErU6gr7ujsEfg2hB6DYz02OnA",
  authDomain: "crwn-db-3c771.firebaseapp.com",
  databaseURL: "https://crwn-db-3c771.firebaseio.com",
  projectId: "crwn-db-3c771",
  storageBucket: "",
  messagingSenderId: "395022734699",
  appId: "1:395022734699:web:39122ca48383548f"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });
export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

在sign-in.jsx中的代码：

import { signInWithGoogle } from "../../firebase/firebase.utils";


class SignIn extends React.Component {
  render() {
    return (
          <CustomButton onClick={signInWithGoogle}>
            Sign in with Google
          </CustomButton>
      </div>
    );
  }
}

export default SignIn;

signInWithGoogle弹出窗口应显示可用的谷歌账户，我选择其中一个并继续操作，然后在firebase身份验证用户中注册该用户。 但是，这个弹出窗口没有显示任何可用的谷歌账户（我的浏览器中有两个已登录的账户），并且大约5秒后自动消失。

在此输入图片描述

- Hasssan Munir

---

你能否检查浏览器控制台是否有任何错误？ - bojeil

我认为这不是 Firebase 的问题。请检查您传递 onClick 作为 props 的 CustomButton 组件。 - JongHunYun

Answer 1

如果你希望Firebase的signInWithGoogle在使用当前的身份验证令牌之前停下来并询问要登录哪个谷歌账户，你需要使用setCustomerParameters方法并手动调用提示框，方法如下...

var provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({
  prompt: "select_account"
});

//works for signInWithPopup and signInWithRedirect

const signInWithPopup = () => auth.signInWithPopup(provider);  
const signInWithRedirect = () => auth.signInWithRedirect(provider);

链接到setCustomerParameters文档

- Sam Davies

Answer 2

这听起来像是用户实际上使用已登录 Chrome 的 Google 帐户自动登录的情况下的正常行为。添加身份验证状态监听器并添加一些日志以检查此时用户是否实际上已登录。

- Doug Stevenson

---

它根本没有登录...弹出窗口不显示任何可用的帐户，并在一段时间后消失（5秒），在谷歌身份验证用户中也没有添加任何用户... - Hasssan Munir

你观察到了什么迹象表明用户没有登录？请编辑问题，清楚地说明你是如何知道这一点的。 - Doug Stevenson

我知道这是由两件事情造成的......首先，登录弹出窗口没有显示任何我可以选择的Google帐户（那么它怎么验证任何用户），然后弹出窗口就消失了。其次，在验证->用户中没有添加用户。 - Hasssan Munir

仅供参考，我是Firebase和ReactJS的初学者。 - Hasssan Munir

请在编辑您的原始问题时附上您的观察结果，不要在我的答案下评论。同时，请查看控制台日志以获取信息。 - Doug Stevenson

Answer 3

我是一位有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我曾经遇到过同样的问题，重启我的Mac后它就完美地解决了。如果该错误仍然存在，请尝试以下方法：

不要使用这个

export const signInWithGoogle = () => auth.signInWithPopup(provider); 

使用这个：

export const signInWithGoogle = () => auth.signInWithRedirect(provider);

- Yilmaz

Answer 4

我也遇到了同样的问题。但是我解决了它。

const data = await signInWithPopup(authService, provider);

- simon

Answer 5

你尝试启用提供者了吗？对于你的示例，你需要进入 Firebase 中的项目，转到身份验证选项卡，然后单击“登录方式”，检查是否已启用 Google。

- emcee22

Answer 6

我也遇到了同样的问题。我在我的Chrome浏览器上启用了第三方cookie，结果它起作用了。所以请您也尝试这个方法。

- Aman Bharti

---

Aman，很高兴看到你参与，你能提供更多关于如何完成这个任务的细节，并解释为什么需要第三方cookie吗？ - Rachel McGuigan

Answer 7

export const signinWithGooglePopup = () => signInWithPopup(auth, provider);

- Mohamed Elnafad

---

你能详细说明一下你的代码是如何回答这个问题的吗？ - Squazz

Answer 8

我遇到了一个问题，它一开始运行得很好，但后来停止工作了。如果您的Chrome浏览器需要更新，这种情况就会发生。

然而，您还应该做以下操作。

export const signInWithGooglePopup = () => 
                          signInWithPopup(auth, Provider)

- Jacob White