如何让JavaScript按钮调用Firebase v9.0.0+的signInWithPopup方法

错误原因 #

• 两个写法都存在未传入必填参数的问题：signInWithPopup 必须传入2个必填参数：已经完成初始化的auth实例、GoogleAuthProvider实例，缺少参数会直接触发静默报错，自然没有弹窗。
• 第一种原生HTML写法的额外问题：原生HTML的点击事件属性是全小写的onclick而非驼峰onClick，且如果你的signInWithPopup相关逻辑是写在模块作用域内，全局作用域无法直接访问该方法，调用会直接失败。
• 第二种JSX写法的额外问题：onClick={signInWithPopup()} 写了括号代表页面渲染时会立即执行该方法，而非点击时触发，执行时因为缺少参数直接报错，点击时自然没有任何响应。

正确写法 #

原生HTML场景

1. 先封装全局可访问的登录处理函数

// 请确保此处的auth、provider已经提前完成初始化和导入
function handleGoogleSignIn() {
  signInWithPopup(auth, provider)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const user = result.user;
    // 补充登录成功后的逻辑
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = GoogleAuthProvider.credentialFromError(error);
    // 补充错误处理逻辑
  });
}

2. 绑定按钮事件

<button onclick="handleGoogleSignIn()">Sign In With Google</button>

React等支持JSX的框架场景

推荐先封装处理函数再绑定：

// 请确保auth、provider已经提前完成初始化和导入
const handleGoogleSignIn = () => {
  signInWithPopup(auth, provider)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const user = result.user;
    // 补充登录成功后的逻辑
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = GoogleAuthProvider.credentialFromError(error);
    // 补充错误处理逻辑
  });
}

// 按钮绑定，注意不要加括号
<button onClick={handleGoogleSignIn}>Sign In With Google</button>

也可以用行内箭头函数简化写法：

<button onClick={() => signInWithPopup(auth, provider)}>Sign In With Google</button>

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