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

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

向用户界面添加 Google Signup 按钮。

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

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

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

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

1 个答案: