Javascript 如何在react应用程序中集成google signin身份验证

我与React仅相处了2个月，目前我在将google signin集成到我的应用程序时遇到了问题。这是我迄今为止尝试过的，但仍然不起作用，我不知道我做得不对。如果您有任何帮助，我们将不胜感激

我已经附上了这两个文件供您审阅，以防您可能想了解问题的来源。多谢各位

firebase文件

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

const config = {
    apiKey: "*** API KEY ***",
    authDomain: "*** PROJECT ID ***.firebaseapp.com",
    projectId: "*** PROJECT ID *** ",
    storageBucket: "*** PROJECT ID ***.appspot.com",
    messagingSenderId: "*** SENDER ID ***",
    appId: "*** APP ID ***",
    measurementId: "*** MEASUREMENT ID ***"
  };

  firebase.initializeApp(config); // this creates and initializes a Firebase instance.

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

  //google auth utility

  const provider = new firebase.auth.GoogleAuthProvider();
  provider.setCustomParameters({prompt: 'select_account'}); //this always triggers the google pop-up for signin

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

    export default firebase;

登录文件

import React, { Component } from 'react'
import FormInput from '../formInput/FormInput'
import '../signIn/SignIn.css';
import CustomButton from '../customButton/CustomButton';
import signInWithGoogle from '../../firebase/firebase';

class SignIn extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
        }
    }
    // onsubmit handler for the form 
    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ email: '', password: '' });
    }
    //onchange handler for the input
    handleChange = (event) => {
        const { value, name, } = event.target;
        this.setState({ [name]: value })
    }

    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
                        type="email"
                        name="email"
                        value={this.state.email}
                        handleChange={this.handleChange}
                        label="email"
                        required
                    />

                    <FormInput
                        type="password"
                        name="password"
                        value={this.state.password}
                        handleChange={this.handleChange}
                        label="password"
                        required
                    />

                    <CustomButton type="submit">Sign In</CustomButton><br />
                    <CustomButton onclick={signInWithGoogle}>{''}Sign in with Google{''}</CustomButton>
                </form>
            </div>

        )
    }
}
export default SignIn;

import React，{Component}来自“React”
从“../FormInput/FormInput”导入FormInput
导入“../signIn/signIn.css”；
从“../CustomButton/CustomButton”导入CustomButton；
使用Google从“../../firebase/firebase”导入符号；
类签名扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
}
}
//表单的onsubmit处理程序
handleSubmit=（事件）=>{
event.preventDefault（）；
this.setState（{电子邮件：''，密码：'}）；
}
//输入的onchange处理程序
handleChange=（事件）=>{
常量{value，name，}=event.target；
this.setState（{[name]：value}）
}
render（）{
返回(
我已经有账户了
使用您的电子邮件和密码登录
登录

{'}使用Google登录{'}
)
}
}
导出默认签名；

您不需要向用户索要电子邮件和密码

将

谷歌注册

按钮添加到用户界面

使用Google功能更改您的

登录，如下所示，在上面的按钮上单击，您可以在
登录组件
中使用此功能来获取签名用户信息。您可以将其保存到数据库并更新您的状态

export const signInWithGoogle = async () => {
  return auth.signInWithPopup(googleProvider).then((res) => {
    console.log(res.user);
    return res.user;
  });
}

还可以看看
auth（）.onAuthStateChanged
它就像一个带有更新用户信息的
rxjs Observable
。在应用程序文件或ContextProvider中使用此选项可将UI从未经验证的页面切换到已验证的页面，反之亦然
此外，您还可以查看或撰写文章以了解更多信息。我是否需要从firebase导入任何模块，因为它表明未定义“googleProvider”？
const googleProvider=new firebase.auth.GoogleAuthProvider（）
谢谢你……这对我很有用。你帮了大忙，每个人都帮了忙。非常感谢。@jns Firebase配置数据不是凭证。非常感谢，虽然这不是一个生产项目。这是一个投资组合项目。