web-dev-qa-db-de.com

Fügen Sie der Firebase Real Time Database die Google-Authentifizierung hinzu

Ich verwende die Firebase-Echtzeitdatenbank und muss die Benutzerauthentifizierung hinzufügen. Nutzer können sich nur bei Google als Anbieter anmelden.

Current Datenbankmodus:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Neuer Modus sollte folgendermaßen aussehen:

// These rules grant access to a node matching the authenticated
// user's ID from the Firebase auth token
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

Was sollte ich zur Authentifizierung in meinem Fall verwenden? userID, Google providerID oder ein token wie hier beschrieben ?

Dies ist die Funktion ohne Authentifizierung zum Speichern von Daten:

 createMeetup ({commit, getters}, payload) {
      console.log('index.js -> createMeetup')
      const meetup = {
        title: payload.title,
      }
      let imageUrl
      let key
      firebase.database().ref('meetups').Push(meetup)
        .then((data) => {
          key = data.key
          return key
        })
        .then(() => {
          commit('createMeetup', {
            ...meetup,
            imageUrl: imageUrl,
            id: key
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },
7
Tom

Sie können Benutzern die Anmeldung/Authentifizierung mit mehreren Methoden ermöglichen. Dann können Sie sie wie hier beschrieben zu einem einzigen Konto zusammenführen:

https://firebase.google.com/docs/auth/web/account-linking

Es läuft also wirklich auf zwei Optionen:

  1. Benutzern erlauben, sich mit mehreren Methoden wie Facebook, Google, Github, grundlegendem Benutzernamen/Passwort usw. anzumelden.
  2. Oder lassen Sie nur eine einzige Anmeldemethode wie nur Google zu.

Welche Optionen Sie wählen, hilft Ihnen bei der Auswahl der zu verwendenden ID.

2
Francisco Mateo

Für Ihren Anwendungsfall scheint es, als müssten Sie einige Schritte festlegen. Ich vermute, Ihre Anwendung kann Firebase bereits verbinden/verwenden, aber das sind im Wesentlichen die folgenden:

Schritt 1 - Anschließen

Stellen Sie wie üblich eine Verbindung zu Firebase mit Ihrem API-Schlüssel/config her. Sie sollte in etwa wie folgt aussehen.

firebase.initializeApp(config)

Siehe auch: https://firebase.google.com/docs/web/setup

Sie haben das wahrscheinlich schon irgendwo. Dies ändert sich nicht, aber wenn Sie die Regeln wie beschrieben anwenden, können Ihre Benutzer Firebase nach dem Herstellen der Verbindung nicht verwenden.

Schritt 2 - Authentifizierung

Im Grunde sagt Firebase, wer verbunden ist. Dies muss mit einem Token/einer Methode geschehen, die Firebase überprüfen kann. Die Verwendung einer Google-ID ist die häufigste Methode. 

Mit einer vorhandenen Google-ID/Benutzeranmeldung

// Initialize a generate OAuth provider with a `google.com` providerId.
var provider = new firebase.auth.OAuthProvider('google.com');
var credential = provider.credential(googleUser.getAuthResponse().id_token);
firebase.auth().signInWithCredential(credential)

Siehe auch: https://firebase.google.com/docs/reference/js/firebase.auth.OAuthProvider#credential

Oder lassen Sie das Firebase-SDK für den Anmeldungsfluss sorgen

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
})

Siehe auch: https://firebase.google.com/docs/auth/web/google-signin

Diese letzte Option wird von der Dokumentation, auf die Sie referenziert haben, bevorzugt.

Wenn sich Benutzer, wie Sie bereits beschrieben haben, bereits bei Google für andere Funktionen bei Ihrer App anmelden können, sollten Sie bereits über einen Anmeldeflug verfügen. Abhängig von Ihrer Situation kann es ratsam sein, das Firebase SDK/die Bibliothek diesen Prozess übernehmen zu lassen, um die Anwendung zu vereinfachen.

Schritt 3 - Verwenden der Datenbank

Nachdem Sie die Benutzer authentifiziert und die von Ihnen vorgeschlagenen Regeln angewendet haben, müssen Sie außerdem sicherstellen, dass sich die Pfade innerhalb der Pfade befinden, auf die der aktuelle Benutzer zugreifen kann. Sie können dies in einer einfachen Funktion eingeben, um es einfacher zu machen.

const getUserRef = (ref) => {
  const user = firebase.auth().currentUser;
  return firebase.database().ref(`/users/${user.uid}/${ref}/`);
}

Sie sollten den aktuellen Benutzer natürlich nicht jedes Mal abrufen, wenn Sie eine Datenbankreferenz abrufen möchten, aber ich denke, dies veranschaulicht deutlich die Schritte, die unternommen werden müssen.

1
sg3s

die Dokumentation hat Sie dort behandelt: Mit Google-Anmeldung mit JavaScript authentifizieren .

Sie können Ihren Benutzern die Authentifizierung bei Firebase über ihre Google-Konten ermöglichen, indem Sie Google Sign-In in Ihre App integrieren. Sie können Google Sign-In integrieren, indem Sie entweder den Firebase-SDK verwenden, um den Anmeldungsfluss auszuführen, oder indem Sie den Google-Anmeldungsfluss manuell ausführen und das resultierende ID-Token an Firebase übergeben.

Bevor Sie beginnen:

  • Fügen Sie Firebase zu Ihrem JavaScript-Projekt hinzu.
  • Aktivieren Sie die Google-Anmeldung in der Firebase-Konsole:
  • Öffnen Sie in der Firebase-Konsole den Auth-Abschnitt.
  • Aktivieren Sie auf der Registerkarte Anmeldemethode die Anmeldemethode von Google, und klicken Sie auf Speichern.
  • Behandeln Sie den Anmeldungsfluss mit dem Firebase SDK Wenn Sie eine Webanwendung erstellen, können Sie Ihre Benutzer am einfachsten mit Firebase über ihre Google-Konten authentifizieren, indem Sie den Anmeldungsfluss mit Behandeln. Firebase JavaScript SDK. (Wenn Sie einen Benutzer in Node.js oder einer anderen Nicht-Browser-Umgebung authentifizieren möchten, müssen Sie den Anmeldungsfluss manuell abwickeln.)

Gehen Sie folgendermaßen vor, um den Anmeldungsfluss mit dem Firebase JavaScript SDK zu handhaben:

Erstellen Sie eine Instanz des Google-Anbieterobjekts:

var provider = new firebase.auth.GoogleAuthProvider();

Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie vom Authentifizierungsanbieter anfordern möchten. Um einen Bereich hinzuzufügen, rufen Sie addScope() auf.

Zum Beispiel: 

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

Weitere Informationen finden Sie in der Dokumentation zum Authentifizierungsanbieter. Optional: Um den OAuth-Fluss des Providers auf die vom Benutzer bevorzugte Sprache zu lokalisieren, ohne die relevanten benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisieren Sie den Sprachcode in der Auth-Instanz, bevor Sie den OAuth-Fluss starten.

Zum Beispiel:

firebase.auth().languageCode = 'pt';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Anbieterparameter an, die Sie mit der OAuth-Anforderung senden möchten. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters für den initialisierten Provider mit einem Objekt auf, das den in der Dokumentation des OAuth-Providers angegebenen Schlüssel und den entsprechenden Wert enthält.

Zum Beispiel:

provider.setCustomParameters({
    'login_hint': '[email protected]'
});

Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Weitere Informationen finden Sie in der Referenz des Authentifizierungsanbieters . Authentifizierung bei Firebase mithilfe des Google-Provider-Objekts. Sie können Ihre Benutzer dazu auffordern, sich bei ihren Google-Konten anzumelden, indem Sie entweder ein Popup-Fenster öffnen oder auf die Anmeldeseite umleiten. Die Umleitungsmethode wird auf mobilen Geräten bevorzugt.

Um sich mit einem Popup-Fenster anzumelden, rufen Sie signInWithPopup auf:

firebase.auth().signInWithPopup(provider).then(function(result) {

    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // ...

}).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
});

Beachten Sie auch, dass Sie das OAuth-Token des Google-Providers abrufen können, mit dem mithilfe der Google-APIs zusätzliche Daten abgerufen werden können. Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes finden Sie in den Auth Reference Docs.

Um sich durch Weiterleitung auf die Anmeldeseite anzumelden, rufen Sie signInWithRedirect auf:

firebase.auth().signInWithRedirect(provider);

Anschließend können Sie auch das OAuth-Token des Google-Providers abrufen, indem Sie beim Laden Ihrer Seite getRedirectResult() aufrufen:

firebase.auth().getRedirectResult().then(function(result) {
    if (result.credential) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // ...
    }

    // The signed-in user info.
    var user = result.user;
}).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
});
0
Martin Zeitler

Die Auth-Regeln in Ihrer Frage besagen lediglich, dass die Benutzer ihre eigenen (vermutlich) Benutzerdaten lesen/schreiben können.

Ich gehe davon aus, dass Sie eher nach einer Lösung suchen, um den Benutzer zur Erstellung von Meetup-Daten zu autorisieren, und Sie sollten ähnliche Regeln erstellen:

Diese Regeln ermöglichen jedem angemeldeten Benutzer das Erstellen von Meetups

{
  "rules": {
    "meetups": {
      "$meetupId": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null"
      }
    }
  }
}

Ihr Code-Snippet, das neue Meetup-Daten in die Datenbank überträgt, wird automatisch erfolgreich ausgeführt oder schlägt fehl, je nachdem, ob der Benutzer angemeldet war oder nicht. Sie müssen Firebase nicht ausdrücklich mitteilen, auf welche Weise der Benutzer angemeldet war. Firebase SDK übernimmt die Authentifizierung für Sie.

Wenn Sie jedoch do unterschiedliche Mechanismen bereitstellen möchten, abhängig davon, mit welchem ​​Anmeldetyp der Benutzer authentifiziert wird, können Sie dies in den Regeln überprüfen. Zum Beispiel, wenn Sie sicherstellen möchten, dass der Benutzer nicht "anonym" angemeldet ist.

Weitere Informationen finden Sie in der Dokumentation: https://firebase.google.com/docs/database/security/user-security#section-variable

0
Dennis Alund