Jak sprawdzić, czy użytkownik jest już zalogowany w Firebase?

Używam interfejsu API węzła Firebase w moich plikach javascript do logowania się w Google.

firebase.initializeApp(config);
let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);

Działa to dobrze, a użytkownik może zalogować się przy użyciu swoich danych logowania Google. Gdy użytkownik ponownie odwiedza stronę, wyskakujące okienko otwiera się ponownie, ale ponieważ jest już zalogowany, wyskakujące okienko zamyka się bez konieczności jakiejkolwiek interakcji ze strony użytkownika. Czy istnieje sposób, aby sprawdzić, czy jest już zalogowany użytkownik przed wyświetleniem monitu o wyskakujące okienko?

https://firebase.google.com/docs/auth/web/manage-users

Musisz dodać obserwatora zmiany stanu autoryzacji.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

Możesz również sprawdzić, czy istnieje currentUser

var user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

Nie można stwierdzić, czy użytkownik zostanie podpisany, gdy strona zacznie się ładować, jednak istnieje obejście.

Możesz zapamiętać ostatni stan autoryzacji w localStorage, aby zachować go między sesjami i między kartami.

Następnie, gdy strona zacznie się ładować, możesz optymistycznie założyć, że użytkownik zostanie automatycznie ponownie zalogowany i odłóż okno dialogowe, aż będziesz mieć pewność (tj. Po onAuthStateChangedpożarach). W przeciwnym razie, jeśli localStorageklucz jest pusty, możesz od razu wyświetlić okno dialogowe.

onAuthStateChangedZdarzenie Firebase zostanie uruchomione po około 2 sekundach od załadowania strony.

// User signed out in previous session, show dialog immediately because there will be no auto-login
if (!localStorage.getItem('myPage.expectSignIn')) showDialog() // or redirect to sign-in page

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User just signed in, we should not display dialog next time because of firebase auto-login
    localStorage.setItem('myPage.expectSignIn', '1')
  } else {
    // User just signed-out or auto-login failed, we will show sign-in form immediately the next time he loads the page
    localStorage.removeItem('myPage.expectSignIn')

    // Here implement logic to trigger the login dialog or redirect to sign-in page, if necessary. Don't redirect if dialog is already visible.
    // e.g. showDialog()
  }
})

<Router>
  <Switch>
    <PrivateRoute
      exact path={routes.DASHBOARD}
      component={pages.Dashboard}
    />
...

I tak jest zaimplementowana moja PrivateRoute:

export default function PrivateRoute(props) {
  return firebase.auth().currentUser != null
    ? <Route {...props}/>
    : localStorage.getItem('myPage.expectSignIn')
      // if user is expected to sign in automatically, display Spinner, otherwise redirect to login page.
      ? <Spinner centered size={400}/>
      : (
        <>
          Redirecting to sign in page.
          { location.replace(`/login?from=${props.path}`) }
        </>
      )
}

    // Using router Redirect instead of location.replace
    // <Redirect
    //   from={props.path}
    //   to={{pathname: routes.SIGN_IN, state: {from: props.path}}}
    // />

W tym scenariuszu nie ma potrzeby używania funkcji onAuthStateChanged ().

Możesz łatwo wykryć, czy użytkownik jest zalogowany, czy nie, wykonując:

var user = firebase.auth().currentUser;

Dla tych, którzy borykają się z problemem „zwracającego null”, dzieje się tak tylko dlatego, że nie czekasz na zakończenie połączenia z bazą firebase.

Załóżmy, że wykonujesz akcję logowania na stronie A, a następnie wywołujesz stronę B, na stronie B możesz wywołać następujący kod JS, aby przetestować oczekiwane zachowanie:

  var config = {
    apiKey: "....",
    authDomain: "...",
    databaseURL: "...",
    projectId: "..",
    storageBucket: "..",
    messagingSenderId: ".."
  };
  firebase.initializeApp(config);

    $( document ).ready(function() {
        console.log( "testing.." );
        var user = firebase.auth().currentUser;
        console.log(user);
    });

Jeśli użytkownik jest zalogowany, „var user” będzie zawierał oczekiwany ładunek JSON, jeśli nie, to będzie po prostu „null”

I to wszystko, czego potrzebujesz.

pozdrowienia

Innym sposobem jest użycie tego samego, czego używa Firebase.

Na przykład, gdy użytkownik się loguje, Firebase przechowuje poniższe szczegóły w pamięci lokalnej. Gdy użytkownik wraca na stronę, Firebase używa tej samej metody, aby określić, czy użytkownik powinien zalogować się automatycznie.

UWAGA: ponieważ nie jest to wymienione ani zalecane przez firebase. Możesz nazwać tę metodę nieoficjalnym sposobem robienia tego. Co oznacza, że ​​później, jeśli firebase zmieni swoje wewnętrzne działanie, ta metoda może nie działać. Krótko mówiąc. Używaj na własne ryzyko! :)

To działa:

async function IsLoggedIn(): Promise<boolean> {
  try {
    await new Promise((resolve, reject) =>
      app.auth().onAuthStateChanged(
        user => {
          if (user) {
            // User is signed in.
            resolve(user)
          } else {
            // No user is signed in.
            reject('no user logged in')
          }
        },
        // Prevent console error
        error => reject(error)
      )
    )
    return true
  } catch (error) {
    return false
  }
}

Jeśli pozwalasz anonimowych, jak i tych, zalogować się za pomocą poczty elektronicznej można użyć firebase.auth().currentUser.isAnonymous, który powróci albo truealbo false.

używać Firebase.getAuth(). Zwraca aktualny stan klienta Firebase. W przeciwnym razie zwracana wartość to nullOto dokumenty: https://www.firebase.com/docs/web/api/firebase/getauth.html

Najpierw zaimportuj następujące elementy

import Firebase
import FirebaseAuth

Następnie

    // Check if logged in
    if (Auth.auth().currentUser != null) {
      // User is logged in   
    }else{
      // User is not logged in
    }