Question

我们在React中为我们的应用程序使用FireBase登录，并且流程似乎在localhost上正常工作。

但是当我们在Heroku上部署我们的应用程序时，带有谷歌窗口的登录会出现在屏幕上并几乎立即关闭。

这是我的auth.js

export function loginWithGoogle (email, pw) {
  const provider = googleAuthProvider;
  return firebaseAuth().signInWithPopup(provider)
  .then(saveUser)
  .catch(error => console.log(error));
}

这是login.js

handleGoogleLogin = e => {
    e.preventDefault();
    loginWithGoogle()
      .then(response => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        console.log("After auth...",response);
        //const TOKEN = response.credential.accessToken;
        console.log("result...", response);

        //TODO: Need to call ConsumeSafe API to store the user details
        console.log("invoking getUser");
        getUser(response.data.user.Email).
        then((res) =>{
          this.props.loginHandler(res);
        });

      })
      .catch(error => {
        console.log("Error in popup...",error);
        this.setState(setErrorMsg("Invalid username/password."));
      });
  };

但是没有任何文件捕获任何错误但窗口关闭。

在我的google开发控制台上，我访问了凭证＆gt; Oauth2 Web客户端并在授权的javascript源下添加了我的heroku应用程序URL。结果仍然相同

Answer 1

您需要将您的域添加到firebase控制台中的授权域。

步骤：

访问您的firebase console
转到您的火力棒项目
转到身份验证 - ＆gt;登录方法
向下滚动，您将看到授权域列表
将您的域名地址添加到列表中并保存

这可以解决您的问题。

Firebase登录弹出窗口自动关闭Heroku

1 个答案: