Firebase getRedirectResult() 无法解决

Question

我正在尝试实现 signInWithRedirect() 函数，但是 - 奇怪的是，它不起作用。在下面的代码中，Check 2永远Check 3不会被记录 - 并且不会引发错误：

const signInWithGoogle = async () => {
        try {
            console.log("Check 1")
            await signInWithRedirect(auth, googleAuthprovider);

            console.log("Check 2")
            const result = await getRedirectResult(auth);

            console.log("Check 3");
            if (result) {
                console.log(result.user);
            }

        } catch (e) {
            console.log(e.message.slice(10));
        }
    };

另外，如果我使用完全相同的 Google 帐户通过 signInWithPopup() 方法登录，一切都会按预期进行：

const signInWithGoogle = async () => {
        const result = await signInWithPopup(auth, googleAuthprovider)

            const user = result.user;
            console.log(user)
    };

我真的很感激一些帮助。谢谢！

Answer 1

SignInWithRedirect 实际上会离开页面并重定向回您的应用程序，因此您需要在应用程序首次加载时触发的单独函数中处理响应。

import {
  signInWithRedirect,
  getRedirectResult,
  GoogleAuthProvider,
} from "firebase/auth"
const googleAuthProvider = new GoogleAuthProvider()

// On Button Click
const signUpGoogle = async () => {
  try {
    await signInWithRedirect(auth, googleAuthProvider)
  } catch (error: any) {
    console.log(error)
  }
}
  
  
// When the page loads
const debugRedirectResult = async () => {
  try {
    const result = await getRedirectResult(auth)
    if (result) {
      const details = getAdditionalUserInfo(result)
      console.log(details) // details.isNewUser to determine if a new or returning user
    } else {
      // Everything is fine
    }
  } catch (error) {
    console.log(error) // Debug errors from redirect response
  }
}

例如，在 React 中你会这样做：

// Something like an Auth context provider or App.js
React.useEffect(() => {
  const debugRedirectResult = async () => {
    try {
      const result = await getRedirectResult(auth)
      if (result) {
        const details = getAdditionalUserInfo(result)
        console.log(details) // details.isNewUser to determine if a new or returning user
      } else {
        // Everything is fine
      }
    } catch (error) {
      console.log(error) // Debug errors from redirect response
    }
  }
  signInWithRedirect()
}, [])

需要注意的一些事项：

• 在某些情况下， getRedirectResult() 不会抛出错误，指出帐户已存在并使用另一种登录方法：https://github.com/firebase/firebase-js-sdk/issues/6051。
• 这些错误问题可以通过电子邮件验证流程解决，如下所述： https: //firebase.google.com/docs/auth/users#verified_email_addresses