纯HTML页面集成Firebase谷歌弹窗登录报错(app/no-options)求助

这个错误的核心原因是Firebase App未完成初始化，或者初始化时没有传入正确的项目配置参数。以下是分步解决方案：

1. 获取你的Firebase项目配置 #

登录Firebase控制台，进入目标项目的「设置」→「应用」页面，添加Web应用后复制自动生成的配置对象，格式如下：

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

2. 完整修正代码 #

修正后的HTML按钮 #

原按钮的onclick直接调用signInWithPopup会缺少参数，需改为调用自定义处理函数：

<button class="w-100 btn btn-lg btn-success" id="g_sign" onclick="handleGoogleSignIn()">Sign in With Google</button>

完整JavaScript逻辑 #

必须先初始化Firebase App，再调用登录方法：

<script type="module">
  // 引入Firebase模块化SDK
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  import { getAuth, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js";

  // 替换为你的项目配置
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  };

  // 初始化Firebase App
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const provider = new GoogleAuthProvider();

  // 谷歌登录处理函数
  window.handleGoogleSignIn = function() {
    signInWithPopup(auth, provider)
      .then((result) => {
        // 登录成功逻辑
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        const user = result.user;
        console.log("登录成功：", user);
      }).catch((error) => {
        // 错误处理逻辑
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.customData?.email;
        const credential = GoogleAuthProvider.credentialFromError(error);
        console.error("登录失败：", errorCode, errorMessage);
      });
  }
</script>

关键注意事项 #

• 必须确保firebaseConfig中的参数完全匹配你的Firebase项目配置，这是解决app/no-options错误的核心。
• 使用模块化SDK时，script标签必须添加type="module"属性。
• 不要直接在按钮onclick中调用signInWithPopup，该方法需要传入auth和provider两个参数，必须封装到自定义函数中调用。

内容的提问来源于stack exchange，提问作者Sriram Ramesh