Python 2 wird von der Community nicht mehr unterstützt. Wir empfehlen die Migration von Python 2-Anwendungen zu Python 3.

Nutzer in App Engine mit Firebase authentifizieren

In dieser Anleitung wird gezeigt, wie Sie Nutzeranmeldedaten mit Firebase Authentication, der App Engine-Standardumgebung und Datastore abrufen, prüfen und speichern.

Dazu werden Sie Schritt für Schritt durch eine einfache Anwendung für Notizen namens Firenotes geführt, die die Notizen von Nutzern in deren eigenen privaten Notizbüchern speichert. Die Notizbücher werden pro Nutzer gespeichert und durch die eindeutige Firebase-Authentifizierungs-ID jedes Nutzers identifiziert. Die Anwendung beinhaltet diese Komponenten:

  • Das Front-End konfiguriert die Benutzeroberfläche für die Anmeldung und ruft die Firebase-Authentifizierungs-ID ab. Außerdem verarbeitet es Änderungen am Authentifizierungsstatus und ermöglicht Nutzern, ihre Notizen anzusehen.

  • FirebaseUI ist eine Open-Source-Drop-In-Lösung, die Authentifizierungs- und UI-Aufgaben vereinfacht. Das SDK verarbeitet die Nutzeranmeldung, verknüpft mehrere Anbieter mit einem Konto und stellt Passwörter wieder her. Die Lösung implementiert Best Practices für die Authentifizierung, um für eine reibungslose und sichere Anmeldung zu sorgen.

    FirebaseUI
  • Das Back-End überprüft den Authentifizierungsstatus des Nutzers und gibt Nutzerprofilinformationen sowie die Notizen des Nutzers zurück.

Die Anwendung speichert die Nutzeranmeldedaten mit der NDB-Clientbibliothek in Datastore. Sie können die Anmeldedaten aber auch in einer Datenbank Ihrer Wahl speichern.

Im folgenden Diagramm wird gezeigt, wie das Front-End und Back-End miteinander kommunizieren und Nutzeranmeldedaten von Firebase an die Datenbank übertragen werden.
Anfragepfad mit Nutzeranmeldedaten

Firenotes basiert auf dem Framework für Flask-Webanwendungen. Die Beispielanwendung verwendet Flask der Einfachheit und Benutzerfreundlichkeit wegen, die untersuchten Konzepte und Technologien gelten aber unabhängig von dem verwendeten Framework.

Ziele

In dieser Anleitung lernen Sie Folgendes:

  • Firebase-Benutzeroberfläche für die Authentifizierung konfigurieren
  • Firebase-ID-Token abrufen und mit der serverseitigen Authentifizierung überprüfen
  • Anmeldedaten und verknüpfte Daten in Cloud Datastore speichern
  • Datenbank mit der NDB-Clientbibliothek abfragen
  • Anwendung in App Engine bereitstellen

Kosten

In dieser Anleitung werden kostenpflichtige Komponenten von Google Cloud verwendet, darunter:

  • Datastore

Sie können mithilfe des Preisrechners eine Kostenschätzung für Ihre voraussichtliche Nutzung erstellen. Neuen Google Cloud-Nutzern steht möglicherweise eine kostenlose Testversion zur Verfügung.

Hinweise

  1. Installieren Sie Git, Python 2.7 und virtualenv. Weitere Informationen zum Einrichten Ihrer Python-Entwicklungsumgebung für Google Cloud, beispielsweise zum Installieren der neuesten Version von Python, finden Sie unter Python-Entwicklungsumgebung einrichten.
  2. Melden Sie sich bei Ihrem Google-Konto an.

    Wenn Sie noch kein Konto haben, melden Sie sich hier für ein neues Konto an.

  3. Wählen Sie in der Cloud Console auf der Seite für die Projektauswahl ein Cloud-Projekt aus oder erstellen Sie eines.

    Zur Projektauswahl

  4. Installieren und initialisieren Sie das Cloud SDK.

Wenn Sie das SDK bereits in einem anderen Projekt installiert und initialisiert haben, legen Sie das gcloud-Projekt auf die App Engine-Projekt-ID fest, die Sie für Firenotes verwenden. Weitere Informationen zu bestimmten Befehlen für die Aktualisierung eines Projekts mit dem gcloud-Tool finden Sie unter Cloud SDK-Konfigurationen verwalten.

Beispiel-App klonen

So laden Sie das Beispiel auf Ihren lokalen Computer herunter:

  1. Klonen Sie das Beispielanwendungs-Repository auf Ihren lokalen Rechner:

    git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

    Sie können auch das Beispiel als ZIP-Datei herunterladen und extrahieren.

  2. Wechseln Sie in das Verzeichnis mit dem Beispielcode:

    cd python-docs-samples/appengine/standard/firebase/firenotes
    
    So konfigurieren Sie FirebaseUI und wählen Identitätsanbieter aus:

  3. So binden Sie Firebase in Ihre Anwendung ein:

    1. Erstellen Sie ein Firebase-Projekt in der Firebase Console.
      • Wenn Sie noch kein Firebase-Projekt haben, klicken Sie auf Projekt hinzufügen und geben Sie entweder einen vorhandenen Google Cloud-Projektnamen oder einen neuen Projektnamen ein.
      • Wenn Sie ein vorhandenes Firebase-Projekt verwenden möchten, wählen Sie dieses Projekt in der Console aus.
    2. Klicken Sie auf der Übersichtsseite zum Projekt auf Firebase zu meiner Web-App hinzufügen. Wenn das Projekt bereits eine Anwendung enthält, wählen Sie auf der Übersichtsseite zum Projekt die Option App hinzufügen aus.
    3. Verwenden Sie den Abschnitt Initialize Firebase aus dem benutzerdefinierten Code-Snippet Ihres Projekts, um den folgenden Abschnitt der Datei frontend/main.js auszufüllen:

      // Obtain the following from the "Add Firebase to your web app" dialogue
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        projectId: "<PROJECT_ID>",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<MESSAGING_SENDER_ID>"
      };
  4. Bearbeiten Sie die Datei backend/app.yaml und geben Sie Ihre Firebase-Projekt-ID in die Umgebungsvariablen ein:

    runtime: python27
    api_version: 1
    threadsafe: true
    service: backend
    
    handlers:
    - url: /.*
      script: main.app
    
    env_variables:
      GAE_USE_SOCKETS_HTTPLIB : 'true'
    
  5. Konfigurieren Sie in der Datei frontend/main.js das FirebaseUI-Anmelde-Widget. Wählen Sie dazu die Anbieter aus, die Sie Ihren Nutzern zur Verfügung stellen möchten.

      // Firebase log-in widget
      function configureFirebaseLoginWidget() {
        var uiConfig = {
          'signInSuccessUrl': '/',
          'signInOptions': [
            // Leave the lines as is for the providers you want to offer your users.
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            firebase.auth.TwitterAuthProvider.PROVIDER_ID,
            firebase.auth.GithubAuthProvider.PROVIDER_ID,
            firebase.auth.EmailAuthProvider.PROVIDER_ID
          ],
          // Terms of service url
          'tosUrl': '<your-tos-url>',
        };
    
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    
      // Fetch notes from the backend.
      function fetchNotes() {
        $.ajax(backendHostUrl + '/notes', {
          /* Set header for the XMLHttpRequest to get data from the web server
          associated with userIdToken */
          headers: {
            'Authorization': 'Bearer ' + userIdToken
          }
        }).then(function(data){
          $('#notes-container').empty();
          // Iterate over user data to display user's notes from database.
          data.forEach(function(note){
            $('#notes-container').append($('<p>').text(note.message));
          });
        });
      }
    
      // Sign out a user
      var signOutBtn =$('#sign-out');
      signOutBtn.click(function(event) {
        event.preventDefault();
    
        firebase.auth().signOut().then(function() {
          console.log("Sign out successful");
        }, function(error) {
          console.log(error);
        });
      });
    
      // Save a note to the backend
      var saveNoteBtn = $('#add-note');
      saveNoteBtn.click(function(event) {
        event.preventDefault();
    
        var noteField = $('#note-content');
        var note = noteField.val();
        noteField.val("");
    
        /* Send note data to backend, storing in database with existing data
        associated with userIdToken */
        $.ajax(backendHostUrl + '/notes', {
          headers: {
            'Authorization': 'Bearer ' + userIdToken
          },
          method: 'POST',
          data: JSON.stringify({'message': note}),
          contentType : 'application/json'
        }).then(function(){
          // Refresh notebook display.
          fetchNotes();
        });
    
      });
    
      configureFirebaseLogin();
      configureFirebaseLoginWidget();
    
    });
    
  6. Aktivieren Sie die ausgewählten Anbieter, die in der Firebase Console erhalten bleiben sollen. Klicken Sie dazu auf Authentifizierung > Anmeldemethode. Bewegen Sie dann unter Anbieter für Anmeldungen den Mauszeiger auf einen Anbieter und klicken Sie auf das Stiftsymbol.

    Anbieter für Anmeldungen

    1. Schalten Sie auf Aktivieren um und geben Sie für andere Identitätsanbieter die Anbieter-ID und das Secret von der Entwicklerwebsite des Anbieters ein. Die Firebase-Dokumentation enthält spezifische Anleitungen in den "Vorbereitung"-Abschnitten der Leitfäden für Facebook, Twitter und GitHub. Nachdem Sie einen Anbieter aktiviert haben, klicken Sie auf Speichern.

      Auf

    2. Klicken Sie in der Firebase Console unter Authorized Domains (Autorisierte Domains) auf Add Domain (Domain hinzufügen) und geben Sie die Domain Ihrer Anwendung in App Engine in diesem Format ein:

      [PROJECT_ID].appspot.com
      

      Fügen Sie nicht http:// vor dem Domainnamen ein.

Abhängigkeiten installieren

  1. Wechseln Sie in das Verzeichnis backend und schließen Sie die Anwendungseinrichtung ab:

    cd backend/
    
  2. Installieren Sie die Abhängigkeiten in einem lib-Verzeichnis im Projekt:

    pip install -t lib -r requirements.txt
    
  3. In appengine_config.py registriert die Methode vendor.add() die Bibliotheken im Verzeichnis lib.

Anwendung lokal ausführen

Wenn Sie die Anwendung lokal ausführen möchten, verwenden Sie den lokalen App Engine-Entwicklungsserver:

  1. Fügen Sie der Datei die folgende URL als backendHostURL in main.js hinzu:

    http://localhost:8081

  2. Rufen Sie das Stammverzeichnis der Anwendung auf und starten Sie dann den Entwicklungsserver:

    dev_appserver.py frontend/app.yaml backend/app.yaml
    
  3. Rufen Sie in einem Webbrowser http://localhost:8080/ auf.

Nutzer auf dem Server authentifizieren

Nachdem Sie ein Projekt eingerichtet und eine Anwendung für die Entwicklung initialisiert haben, können Sie den Code durchgehen, um zu erfahren, wie Firebase-ID-Tokens auf dem Server abgerufen und überprüft werden.

ID-Token von Firebase abrufen

Der erste Schritt der serverseitigen Authentifizierung besteht im Abrufen eines Zugriffstokens für die Überprüfung. Authentifizierungsanfragen werden mit dem Listener onAuthStateChanged() von Firebase verarbeitet:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    var name = user.displayName;

    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    var welcomeName = name ? name : user.email;

    user.getIdToken().then(function(idToken) {
      userIdToken = idToken;

      /* Now that the user is authenicated, fetch the notes. */
      fetchNotes();

      $('#user').text(welcomeName);
      $('#logged-in').show();

    });

  } else {
    $('#logged-in').hide();
    $('#logged-out').show();

  }
});

Wenn ein Nutzer angemeldet ist, gibt die Firebase-Methode getToken() im Callback ein Firebase-ID-Token in Form eines JWT (JSON Web Tokens) zurück.

Tokens auf dem Server prüfen

Nachdem sich ein Nutzer angemeldet hat, ruft der Front-End-Dienst alle vorhandenen Notizen im Notizbuch des Nutzers durch eine AJAX-GET-Anfrage ab. Dafür ist eine Autorisierung für den Zugriff auf die Daten des Nutzers erforderlich. Daher wird mit dem Bearer-Schema das JWT an den Authorization-Header der Anfrage mithilfe des Schemas Bearer gesendet:

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  })

Bevor der Client auf Serverdaten zugreifen kann, muss von Ihrem Server geprüft werden, ob das Token von Firebase signiert ist. Sie können das Token mit der Google-Authentifizierungsbibliothek für Python überprüfen. Verwenden Sie die Funktion verify_firebase_token der Authentifizierungsbibliothek, um das Inhabertoken zu überprüfen und die Anforderungen zu extrahieren:

id_token = request.headers['Authorization'].split(' ').pop()
claims = google.oauth2.id_token.verify_firebase_token(
    id_token, HTTP_REQUEST, audience=os.environ.get('GOOGLE_CLOUD_PROJECT'))
if not claims:
    return 'Unauthorized', 401

Jeder Identitätsanbieter sendet einen anderen Satz von Anforderungen. Doch jeder hat zumindest eine sub-Anforderung mit einer eindeutigen Nutzer-ID und eine Anforderung, über die einige Profilinformationen bereitgestellt werden, beispielsweise name oder email. Damit können Sie die Nutzerfreundlichkeit in der Anwendung personalisieren.

Nutzerdaten in Datastore verwalten

Nach der Authentifizierung eines Nutzers müssen Sie seine Daten speichern, damit sie nach dem Ende einer angemeldeten Sitzung erhalten werden. In den folgenden Abschnitten wird erläutert, wie Sie eine Notiz als Cloud Datastore-Entität speichern und Entitäten nach Nutzer-ID trennen.

Entitäten zum Speichern von Nutzerdaten erstellen

Sie können in Cloud Datastore eine Entität erstellen. Dazu deklarieren Sie eine NDB-Modellklasse mit bestimmten Attributen wie Ganzzahlen oder Strings. Cloud Datastore indexiert Entitäten nach Art. In Firenotes ist die Art jeder Entität Note. Zum Zweck der Abfrage wird jede Note mit einem Schlüsselnamen gespeichert. Dies ist die Nutzer-ID, die im vorherigen Abschnitt aus der sub-Anforderung abgerufen wurde.

Der folgende Code zeigt, wie Attribute einer Entität festgelegt werden – sowohl mit der Konstruktormethode für die Modellklasse, wenn die Entität erstellt wird, als auch durch die Zuweisung einzelner Attribute nach der Erstellung:

data = request.get_json()

# Populates note properties according to the model,
# with the user ID as the key name.
note = Note(
    parent=ndb.Key(Note, claims['sub']),
    message=data['message'])

# Some providers do not provide one of these so either can be used.
note.friendly_id = claims.get('name', claims.get('email', 'Unknown'))

Damit Sie die neu erstellte Note in Datastore schreiben können, rufen Sie die Methode put() für das Objekt note auf.

Nutzerdaten abrufen

Wenn Sie Nutzerdaten abrufen möchten, die mit einer bestimmten Nutzer-ID verknüpft sind, verwenden Sie die NDB-Methode query(), um die Datenbank nach Notizen in derselben Entitätengruppe zu durchsuchen. Entitäten in derselben Gruppe oder im selben Ancestor-Pfad verwenden einen gemeinsamen Schlüsselnamen. In diesem Fall ist dies die Nutzer-ID.

def query_database(user_id):
    """Fetches all notes associated with user_id.

    Notes are ordered them by date created, with most recent note added
    first.
    """
    ancestor_key = ndb.Key(Note, user_id)
    query = Note.query(ancestor=ancestor_key).order(-Note.created)
    notes = query.fetch()

    note_messages = []

    for note in notes:
        note_messages.append({
            'friendly_id': note.friendly_id,
            'message': note.message,
            'created': note.created
        })

    return note_messages

Anschließend können Sie die Abfragedaten abrufen und die Notizen im Client ansehen:

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  }).then(function(data){
    $('#notes-container').empty();
    // Iterate over user data to display user's notes from database.
    data.forEach(function(note){
      $('#notes-container').append($('<p>').text(note.message));
    });
  });
}

Anwendung bereitstellen

Sie haben Firebase Authentication erfolgreich in Ihre App Engine-Anwendung eingebunden. So sehen Sie, wie Ihre Anwendung in einer Live-Produktionsumgebung ausgeführt wird:

  1. Ändern Sie die Back-End-Host-URL in main.js zu https://backend-dot-[PROJECT_ID].appspot.com. Ersetzen Sie [PROJECT_ID] durch Ihre Projekt-ID.
  2. Stellen Sie die Anwendung mit der Cloud SDK-Befehlszeile bereit:

    gcloud app deploy backend/index.yaml frontend/app.yaml backend/app.yaml
    
  3. Sehen Sie sich die Anwendung live unter https://[PROJECT_ID].appspot.com an.

Bereinigen

Löschen Sie Ihr App Engine-Projekt, damit Ihrem Google Cloud-Konto die in dieser Kurzanleitung verwendeten Ressourcen nicht in Rechnung gestellt werden.

Projekt löschen

Am einfachsten vermeiden Sie weitere Kosten, wenn Sie das zum Ausführen der Anleitung erstellte Projekt löschen.

So löschen Sie das Projekt:

  1. Wechseln Sie in der Cloud Console zur Seite Ressourcen verwalten.

    Zur Seite "Ressourcen verwalten"

  2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen .
  3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.

Weitere Informationen