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

Firebase Login Popup closes automatically on Heroku

我们在 React 中为我们的应用程序使用 FireBase 登录,流程似乎在本地主机上运行良好。

但是当我们在 Heroku 上部署我们的应用程序时,使用 google window 的登录名出现在屏幕上并几乎立即关闭。

这是我的 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."));
      });
  };

但是 none 的文件捕获任何错误,但 window 关闭。

在我的 google 开发控制台上,我转到 Credentials > Oauth2 Web 客户端并在授权的 javascript 来源下添加了我的 heroku 应用程序 url。还是一样的结果

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

步骤:

  1. 访问您的 firebase console
  2. 转到您的 firebase 项目

  3. 转到身份验证 -> 登录方法

  4. 向下滚动,您将看到授权域列表

  5. 将您的域地址添加到列表并保存

这应该可以解决您的问题。