Как сделать так, чтобы кнопка JavaScript вызывала новую базу данных Firebase (v9.0.0 ) для входа с помощью Popup

# #javascript #firebase #firebase-authentication

Вопрос:

Я не знаком с Javascript, и мне интересно, как кнопка может вызывать функцию, в частности, новый синтаксис Firebase signInWithPopup, представленный в версии 9.0.0 . Я хочу открыть окно аутентификации для входа в Google, когда пользователь нажимает кнопку. Если только я не ошибаюсь https://firebase.google.com/docs/auth/web/google-signin#web-version-9_4 и код, который они предоставили, является неполным? (У меня есть весь необходимый код: импорт, концы и т. Д.).

 signInWithPopup(auth, provider)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const user = result.user;
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = GoogleAuthProvider.credentialFromError(error);
  });
 

Я пытался

 <button onClick='signInWithPopup()'>Sign In With Google</button>
 

и

 <button onClick={signInWithPopup()}>Sign In With Google</button>
 

Все мои попытки просто привели к кнопке, которая просто нажимает и ничего не делает.

Правка: Ах, мне пришлось добавить параметры аутентификации и поставщика.

Комментарии:

1. onClick={signInWithPopup()} вы не предоставляете здесь никаких параметров.

2. <кнопка onClick={Войти с помощью Popup}>Войдите В Систему С Помощью Google<кнопка onClick={Войти с помощью Popup}></кнопка> попробуйте это

Ответ №1:

Попробуйте обернуть Firebase signInWithPopUp в свою собственную функцию, как показано ниже:

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

const auth = getAuth(app) // import auth instance 

const googleSignIn = async () => {
  try {
    const provider = new GoogleAuthProvider();
    const result = await signInWithPopup(auth, provider)
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    console.log(credential)
  } catch (e) {
    console.log(e.code, e.message)
  }
}
 
 <button onClick={googleSignIn}>Sign In With Google</button>
// use that function ^