javascript - tag - Wie erkenne ich, ob ein Benutzer bereits in Firebase angemeldet ist?




title tag (5)

Ich verwende die Firebase-Node-API in meinen Javascript-Dateien für die Google-Anmeldung.

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

Dies funktioniert problemlos und der Nutzer kann sich mit seinen Google-Anmeldeinformationen anmelden. Wenn der Benutzer die Seite erneut besucht, wird das Popup erneut geöffnet. Da er sich jedoch bereits angemeldet hat, wird das Popup geschlossen, ohne dass der Benutzer eingreifen muss. Gibt es eine Möglichkeit zu überprüfen, ob bereits ein Benutzer angemeldet ist, bevor das Popup aufgerufen wird?


Eine andere Möglichkeit besteht darin, dasselbe zu verwenden, was Firebase verwendet.

Wenn sich beispielsweise ein Benutzer anmeldet, speichert firebase die folgenden Details im lokalen Speicher. Wenn der Benutzer zur Seite zurückkehrt, verwendet firebase dieselbe Methode, um festzustellen, ob der Benutzer automatisch angemeldet werden soll.

ATTN: Da dies von firebase weder aufgelistet noch empfohlen wird. Sie können diese Methode als inoffizielle Methode bezeichnen. Dies bedeutet, dass diese Methode möglicherweise nicht funktioniert, wenn die Firebase später ihre innere Funktionsweise ändert. Oder kurz gesagt. Benutzung auf eigene Gefahr! :)


Es ist nicht möglich zu sagen, ob ein Benutzer signiert wird, wenn eine Seite geladen wird. Es gibt jedoch eine Problemumgehung.

Sie können den letzten Authentifizierungsstatus in localStorage speichern, um ihn zwischen Sitzungen und zwischen Registerkarten beizubehalten.

Wenn die Seite dann geladen wird, können Sie optimistisch davon ausgehen, dass der Benutzer automatisch erneut angemeldet wird, und den Dialog verschieben, bis Sie sicher sind (dh nach einem onAuthStateChanged Brand). Andernfalls können Sie den Dialog sofort localStorage , wenn der Schlüssel localStorage leer ist.

Das Ereignis onAuthStateChanged wird ungefähr 2 Sekunden nach dem Laden einer Seite onAuthStateChanged .

// optimistically assume user will be logged in automatically
// e.g. if (!!localStorage.getItem('myPage.expectSignIn')) showDialog()

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    localStorage.setItem('myPage.expectSignIn', '1')
  } else {
    localStorage.removeItem('myPage.expectSignIn')
    // Implement logic to trigger the login dialog here or redirect to sign-in page.
    // e.g. showDialog()
  }
})


Ich benutze dies mit React und React -Router . Ich habe den obigen Code in componentDidMount meiner App-Stammkomponente eingefügt. Dort habe ich im Render einige PrivateRoutes

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

Und so wird meine PrivateRoute implementiert:

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}}}
    // />

In diesem Szenario muss die Funktion onAuthStateChanged () nicht verwendet werden.

Sie können leicht erkennen, ob der Benutzer angemeldet ist oder nicht, indem Sie Folgendes ausführen:

var user = firebase.auth().currentUser;

Für diejenigen, die mit dem Problem "Returning Null" konfrontiert sind, liegt es nur daran, dass Sie nicht auf den Abschluss des Firebase-Aufrufs warten.

Angenommen, Sie führen die Anmeldeaktion auf Seite A aus und rufen dann Seite B auf. Auf Seite B können Sie den folgenden JS-Code aufrufen, um das erwartete Verhalten zu testen:

  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);
    });

Wenn der Benutzer angemeldet ist, enthält "var user" die erwartete JSON-Nutzlast. Wenn nicht, ist sie nur "null".

Und das ist alles was Sie brauchen.

Grüße


Sie können auch prüfen, ob ein aktueller Benutzer vorhanden ist

var user = firebase.auth().currentUser;

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







firebase-authentication