如何在反应应用程序中集成谷歌登录身份验证

Question

我使用 React 还不到 2 个月，目前我在将 google 登录集成到我的应用程序时遇到了问题。 这是我迄今为止尝试过的，但它仍然无法正常工作，我不知道我做错了什么。 请任何帮助将不胜感激。

我已附上这两个文件供您查看，以防您可能想查看问题出在哪里。 非常感谢。

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;

Answer 1

您无需向用户索要 email 和密码。

将Google Signup按钮添加到 UI。

如下更改您的signInWithGoogle function 并在上面的按钮上单击，您可以在SignIn Component中使用此 function 来获取签名用户信息。 您可以将其保存到数据库并更新您的 state。

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

另请查看auth().onAuthStateChanged ，它就像一个rxjs Observable ，带有更新的用户信息。 在您的 App 文件或 ContextProvider 中使用它来将您的 UI 从未经身份验证的页面切换到经过身份验证的页面，反之亦然