如何连接Firebase Auth与Google One Tap登录

Question

我用Firebase和React.js创建了一个web应用程序，并实现了与谷歌的登录。然后，我尝试实现GoogleOneTapSignin，而一键登录用户界面正在成功地工作，因为我使用了react google-一键登录npm包。如果可能响应应用程序，我有一个监听AuthStateChange的函数，如果用户是新用户，可以注册他们，如果他们已经是成员，也可以在其中注册，如果他们登录，也会更新状态。出去吧。现在我已经实现了google一键登录，如果用户在使用google一键登录时签名，我就会期待onAuthSTaetChanged功能被触发，但事实并非如此。下面是我的App.js代码中处理用户auth的部分。

​

const classes = useStyles();
const dispatch = useDispatch();
const alert = useSelector(state => state.notification.alert);

// Handling Google-one-tap-signin
useGoogleOneTapLogin({
  onError: error => console.log(error),
  onSuccess: response => {
    console.log(response);
    const credential = provider.credential(response);
    auth.signInWithCredential(credential).then(result => {
      const {
        user
      } = result;
      console.log(user);
    });
  },
  googleAccountConfigs: {
    client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  }
});



//Handling firebase authentification

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(async user => {
    // If there is a user create the user profile and update useState
    if (user) {
      // createUserProfile function creates the user profile in firestore if they are new
      const userRef = await createUserProfileDocument(user);
      userRef.onSnapshot(snapshot => {
        const doc = snapshot.data();
        dispatch(
          setUser({
            id: snapshot.id,
            ...doc
          })
        );
      });
    } else {
      dispatch(setUser(null));
    }
  });
  return () => {
    unsubscribe();
  };
}, [dispatch]);

​

我试图在这个StackOverflow question中实现第二个答案所建议的解决方案，但是我在控制台上得到了下面的错误。当我使用谷歌一体机登录的时候。记住，我不是在使用FirebaseUi库。到目前为止，我的应用程序只使用Google的登录。

​

t {
  code: "auth/argument-error",
  message: "credential failed: must provide the ID token and/or the access token.",
  a: null
}
a: null
code: "auth/argument-error"
message: "credential failed: must provide the ID token and/or the access token."

​

Answer 1

Firebase的signInWithCredential函数所需的ID令牌存在于response对象的credential属性中。下面是一个使用Firebase V8的示例函数。

// firebase V8
function handleCredentialResponse(response) {
  if (response) {
    const cred = auth.GoogleAuthProvider.credential(response.credential);

    // Sign in with credential from the Google user.
    return auth().signInWithCredential(cred);
  }
}

火源v9

// firebase V9
import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth";

const auth = getAuth();

function handleCredentialResponse(response) {
  if (response) {
    const cred = GoogleAuthProvider.credential(response.credential)

    // Sign in with credential from the Google user.
    return signInWithCredential(auth, cred);
  }
}

response参数是从Google抽头函数回调返回的凭据响应。

 google?.accounts.id.initialize({
    client_id: your-google-app-client-id.apps.googleusercontent.com,
    callback: handleCredentialResponse,
 });
 google?.accounts.id.prompt((notification) => {
    console.log(notification);
 });