Javascript 谷歌登录认证功能不工作（谷歌firebase）

我正在使用google firebase在我的网站上获取google身份验证系统，但每当我单击按钮时，该按钮具有调用我的google身份验证组件的onClick函数，它就不起作用

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const config = {
  apiKey: 'AIzaSyCdHT-AYHXjF7wOrfAchX4PIm3cSj5tn14',
  authDomain: 'crwn-db.firebaseapp.com',
  databaseURL: 'https://crwn-db.firebaseio.com',
  projectId: 'crwn-db',
  storageBucket: 'crwn-db.appspot.com',
  messagingSenderId: '850995411664',
  appId: '1:850995411664:web:7ddc01d597846f65'
};

firebase.initializeApp(config);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

下面给出了我使用组件的位置代码

import React, { Component } from "react";
import FormInput from "../form-input/form-input.component";
import CustomButton from "../custom-button/custom-button.component";
import "./sign-in.styles.scss";
import { signInWithGoogle } from "../firebase/firebase.utils";
class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "example@domain.com",
      password: "password"
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.setState({ email: "", password: "" });
    console.log("handle submit logs", this.state.email, this.state.password);
  };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
    console.log("handleChange logs", this.state.email, this.state.password);
  };

  render() {
    return (
      <div className="sign-in">
        <h2>I already have an account</h2>
        <span>Sign in with your email and password</span>
        <form onSubmit={this.handleSubmit}>
          <FormInput
            name="email"
            type="email"
            value={this.state.email}
            // required
            label="email"
            handleChange={this.handleChange}
          />
          <FormInput
            type="password"
            name="password"
            // required
            label="Password"
            handleChange={this.handleChange}
            value={this.state.password}
          />
          <CustomButton type="submit">Log in</CustomButton>
          <CustomButton onClick={signInWithGoogle}>
            {" "}
            Sign In with Google{" "}
          </CustomButton>
        </form>
      </div>
    );
  }
}
export default SignIn;

import React，{Component}来自“React”；
从“./form input/form input.component”导入FormInput；
从“./自定义按钮/自定义按钮.组件”导入自定义按钮；
导入“/sign-in.style.scss”；
从“./firebase/firebase.utils”导入{signiWithGoogle}；
类签名扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“example@domain.com",
密码：“密码”
};
}
handleSubmit=（事件）=>{
event.preventDefault（）；
this.setState（{email:，密码：}）；
log（“处理提交日志”，this.state.email，this.state.password）；
};
handleChange=（事件）=>{
常量{name，value}=event.target；
this.setState（{[name]：value}）；
log（“handleChange日志”，this.state.email，this.state.password）；
};
render（）{
返回(
我已经有账户了
使用您的电子邮件和密码登录
登录
{" "}
使用Google{“}登录
);
}
}
导出默认签名；

---

顺便说一句，这个CustomButton是另一个react组件，它的作用与普通按钮类似。

不详细介绍

首先，您需要在Firebase控制台上为google启用登录方法。

显然，您最好将提供者移动到您称为GoogleAuth的组件中

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });

然后将提供程序作为参数传递到此函数

export const signInWithGoogle = (provider) => auth.signInWithPopup(provider);

这样，您将能够获得一个合适的提供者并运行它

---

我对代码的另一个建议是在firebase util中使用firebase保持初始化，并在需要时始终使用它

很抱歉，这不起作用。早些时候，每当我试图点击“用谷歌登录”按钮时，它就会像应该的那样打开另一个窗口，然后它会自动关闭，而不要求用户使用他们的谷歌帐户登录。但现在，当我单击我的按钮时，它甚至没有打开新窗口。我是否应该添加我的github存储库链接，以便您更容易查看我的代码？这可能会有所帮助，@maybenext1me但我想知道您可能需要为Google启用登录方法。看来你没那么做。是 啊我注意到我没有从Google的firebase网站启用登录方法。：）