javascript - Google 登录身份验证功能不起作用(Google firebase)

Question

我正在使用 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;

顺便说一句，这个 CustomButton 是另一个 react 组件，它就像一个普通按钮。

Answer 1

不打算详细介绍，

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

显然，您最好将 provider 移动到您称为 google auth 的组件中。

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

然后将提供者作为参数传递给此函数

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

这样，您将能够获得合适的提供程序并运行它

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