Firebase Web应用Google登录弹窗闪退/提示请求操作无效如何解决

可行解决方案如下 #

• 优先检查Firebase控制台配置
  1. 进入Firebase控制台 → Authentication → 登录方法 → 找到Google登录选项，确认你当前访问应用的域名（本地开发需加localhost:对应端口，线上需加部署域名）已加入授权域名列表
  2. 检查Google Cloud控制台对应的OAuth同意屏配置：如果应用处于测试状态，必须把测试用的Google账号加入测试用户列表；如果是公开应用，确认同意屏已通过谷歌审核，不存在权限限制
• 排查开发/运行环境问题
  1. 确认浏览器没有拦截登录弹窗，首次触发弹窗时要选择允许
  2. 不要在浏览器无痕模式/隐私模式下测试该功能，部分隐私策略会阻止第三方登录弹窗的会话存储
• 检查SDK导入与初始化逻辑
  确认你已经正确完成Firebase初始化、auth实例创建和相关方法导入，模块化导入（v9+版本）参考示例：

  import { initializeApp } from "firebase/app";
  import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  // 替换为你自己的Firebase配置
  const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx"
  };
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  

• 调整代码逻辑补充配置
  你可以给Google登录提供者补充账号权限 scope，避免权限缺失导致请求失败，修改后的代码参考：

  //sign in with google
  const googleProvider = new GoogleAuthProvider();
  // 补充请求用户邮箱和基本信息权限
  googleProvider.addScope('https://www.googleapis.com/auth/userinfo.email');
  googleProvider.addScope('https://www.googleapis.com/auth/userinfo.profile');
  const signInWithGoogle = document.querySelector('#google-icon');
  signInWithGoogle.addEventListener('click', (e) => {
    e.preventDefault();
    // 确保signInWithPopup是在用户点击回调里直接同步调用，不要在异步请求之后才调用，否则会被浏览器拦截
    signInWithPopup(auth, googleProvider).then((result) => {
      const user = result.user;
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    })
    .catch((error) => {
      // 这里可以打印errorCode排查具体问题，比如域名未授权会返回auth/unauthorized-domain错误码
      console.log(error.code, error.message);
      const errorCode = error.code;
      const errorMessage = error.message;
      const email = error.email;
      const credential = GoogleAuthProvider.credentialFromError(error);
    });
  });
  

• 排查其他冲突
  确认绑定点击事件的#google-icon元素不是动态生成的，页面加载完成后才执行事件绑定逻辑；也不存在其他父元素的点击事件冒泡/阻止默认行为的逻辑冲突。

内容的提问来源于stack exchange，提问作者Raouf gaouer