如何在具有功能组件的 React 应用程序中使用 Google（通过 Firebase）登录用户？

Question

我正在尝试在我的 React/Firebase 应用程序中使用 Google 登录用户。我已经按照 youtube 上的教程（https://www.youtube.com/watch?v=umr9eNbx3ag）进行操作，但结果有所不同。当我单击“登录”按钮时，我会被重定向到 Google，选择一个帐户，然后被重定向到我的网站。

看来我的“if”语句从未运行，auth.currentUser也从未评估为 true。

这是我的 Firebase 文件

firebase.initializeApp(firebaseConfig)
export const firestore = firebase.firestore()
export const auth = firebase.auth()
export const provider = new firebase.auth.GoogleAuthProvider()
export const signInWithGoogle = () => auth.signInWithRedirect(provider)
export const signOut = () => auth.signOut()
export default firebase

这是我的登录组件

import { auth, signInWithGoogle, signOut } from '../../Firebase/Firebase'

const LoginOrRegister = () => {

  const { username, setUsername, idToken, setIdToken } = useContext(Context)

  useEffect(() => {
    auth.onAuthStateChanged(async nextUser => {
      if (auth.currentUser) {
        setIdToken(await auth.currentUser.getIdToken())
        setUsername(auth.currentUser.displayName)
      } else {
        setIdToken(null)
      }
    })
  }, [])

return (
  <div>
    <LogInForm>
    <button onClick={signInWithGoogle}> Log in with Google </button>
  </div>
)

Answer 1

因为您正在使用，所以signInWithRedirect您需要使用auth.getRedirectResult()而不是auth.onAuthStateChanged因为您实际上正在离开应用程序并返回

下面的代码将工作或者你。

useEffect(() => {
    auth
      .getRedirectResult()
      .then(function(result) {
        console.log(result);
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          setToken(token);
          // ...
        }
        // The signed-in user info.
        var user = result.user;
        console.log(user);
        setData(user);
      })
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        console.log(errorCode, errorMessage);
        // ...
      });
  }, []);

您可以在此处找到参考文档