Nutzer mit Firebase authentifizieren

Regions-ID

REGION_ID ist ein abgekürzter Code, den Google anhand der Region zuweist, die Sie beim Erstellen Ihrer Anwendung ausgewählt haben. Der Code bezieht sich nicht auf ein Land oder eine Provinz, auch wenn einige Regions-IDs häufig verwendeten Länder- und Provinzcodes ähneln können. Bei Anwendungen, die nach Februar 2020 erstellt wurden, ist REGION_ID.r in den App Engine-URLs enthalten. Bei Anwendungen, die vor diesem Datum erstellt wurden, ist die Regions-ID in der URL optional.

Hier finden Sie weitere Informationen zu Regions-IDs.

OK

Fügen Sie Ihrem Webdienst einen Anmeldeablauf für Nutzer hinzu, der Firebase Authentication nutzt.

In diesem Schritt des Leitfadens aktualisieren Sie Ihren Webdienst, um Nutzer zu authentifizieren und die eigenen Informationen eines Nutzers nach der Authentifizierung abzurufen und anzeigen zu lassen. Beachten Sie, dass für diesen Schritt die Website-Anforderungszeiten weiterhin global und nicht nutzerspezifisch sind.

Hinweis

Wenn Sie alle vorherigen Schritte in diesem Leitfaden abgeschlossen haben, überspringen Sie diesen Abschnitt. Wenn nicht, führen Sie einen der folgenden Schritte aus:

• Erstellen Sie zuerst eine Python 3-Anwendung und führen Sie alle Schritte bis zu diesem Schritt aus.

• Wenn Sie bereits ein Google Cloud-Projekt haben, laden Sie eine Kopie des Webdienstes herunter und fügen Sie diesem Firebase hinzu:

  1. Laden Sie das Repository der Beispielanwendung mit Git herunter:

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

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

  2. Gehen Sie zu dem Verzeichnis, das eine Kopie der Dateien aus dem vorherigen Schritt enthält:

     cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-2
     

  3. Fügen Sie Ihrem Google Cloud-Projekt und Ihrem Webdienst Firebase hinzu.

Firebase-Authentifizierungsmethoden hinzufügen

Firebase stellt JavaScript-Methoden und Variablen bereit, mit denen Sie das Anmeldeverhalten für Ihren Webdienst konfigurieren können. Fügen Sie für diesen Webdienst eine Abmeldefunktion hinzu, eine Variable, mit der die Anmelde-UI konfiguriert wird, und eine Funktion, die steuert, was sich ändert, wenn ein Nutzer sich an- oder abmeldet.

Ersetzen Sie die aktuelle Event-Listener-Methode der Datei static/script.js durch den folgenden Code, um die Verhaltenshinweisen hinzuzufügen, die für einen Authentifizierungsablauf erforderlich sind:

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

Beachten Sie, dass die Methode onAuthStateChanged() das ID-Token des Nutzers als Cookie speichert. Diese Methode bestimmt, was sich ändert, wenn sich ein Nutzer an- oder abmeldet. Dieses ID-Token ist ein eindeutiges Token, das Firebase automatisch generiert, wenn ein Nutzer sich erfolgreich anmeldet. Es wird vom Server zur Authentifizierung des Nutzers verwendet.

Tipp: Die Angabe einer URL für die Nutzungsbedingungen ist optional.

Webdienst für die Nutzung von Tokens aktualisieren

Überprüfen Sie als Nächstes die Nutzer auf dem Server mit ihrem eindeutigen Firebase-ID-Token und entschlüsseln Sie dann deren Token, damit Sie ihre Daten an sie zurückgeben können.

So verwenden Sie das Firebase-ID-Token:

1. Das Token in der Methode root der Datei main.py abrufen, verifizieren und entschlüsseln:

   from flask import Flask, render_template, request
   from google.auth.transport import requests
   from google.cloud import datastore
   import google.oauth2.id_token
   
   firebase_request_adapter = requests.Request()
   @app.route("/")
   def root():
       # Verify Firebase auth.
       id_token = request.cookies.get("token")
       error_message = None
       claims = None
       times = None
   
       if id_token:
           try:
               # Verify the token against the Firebase Auth API. This example
               # verifies the token on each page load. For improved performance,
               # some applications may wish to cache results in an encrypted
               # session store (see for instance
               # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
               claims = google.oauth2.id_token.verify_firebase_token(
                   id_token, firebase_request_adapter
               )
           except ValueError as exc:
               # This will be raised if the token is expired or any other
               # verification checks fail.
               error_message = str(exc)
   
           # Record and fetch the recent times a logged-in user has accessed
           # the site. This is currently shared amongst all users, but will be
           # individualized in a following step.
           store_time(datetime.datetime.now(tz=datetime.timezone.utc))
           times = fetch_times(10)
   
       return render_template(
           "index.html", user_data=claims, error_message=error_message, times=times
       )
   
   

   Tipp: Sie darauf, dass request von Flask importiert wird, damit Sie das Cookie mit dem ID-Token des Nutzers abrufen können.

2. Achten Sie darauf, dass die Datei requirements.txt alle erforderlichen Abhängigkeiten enthält:

   Flask==3.0.0
   google-cloud-datastore==2.15.1
   google-auth==2.17.3
   requests==2.28.2
   

Webdienst testen

Testen Sie jetzt Ihren Webdienst. Führen Sie ihn dazu lokal aus und verwenden Sie eine virtuelle Umgebung:

1. Führen Sie die folgenden Befehle im Hauptverzeichnis Ihres Projekts aus, um neue Abhängigkeiten zu installieren und Ihren Webdienst auszuführen. Wenn keine virtuelle Umgebung für lokale Tests eingerichtet ist, lesen Sie die Informationen unter Webdienst testen.

   pip install -r requirements.txt
   python main.py
   

2. Geben Sie die folgende Adresse in Ihren Webbrowser ein, um den Webdienst aufzurufen:

   http://localhost:8080
   

Hinweis: Da dieser Webdienst Firebase nutzt, müssen Sie anstelle der vollständigen IP-Adresse des lokalen Hosts die localhost-URL verwenden. Andernfalls erhalten Sie einen Authentifizierungsfehler. Das liegt daran, dass die IP-Adresse des lokalen Hosts in Ihrem Firebase-Projekt nicht als autorisierte Domain aufgeführt ist.

Webdienst bereitstellen

Nun, da die Authentifizierung lokal ausgeführt wird, können Sie Ihren Webdienst wieder für App Engine bereitstellen.

Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, in dem sich die Datei app.yaml befindet:

gcloud app deploy

Der gesamte Traffic wird automatisch an die neue Version geleitet, die Sie bereitgestellt haben.

Weitere Informationen zum Verwalten von Versionen finden Sie unter Dienste und Versionen verwalten.

Ihren Dienst aufrufen:

Mit dem folgenden Befehl können Sie den Browser schnell starten und unter https://PROJECT_ID.REGION_ID.r.appspot.com auf Ihren Webdienst zugreifen:

gcloud app browse

Nächste Schritte

Nachdem Sie die Nutzerauthentifizierung eingerichtet haben, können Sie sich darüber informieren, wie Sie Ihren Webdienst aktualisieren, um Daten für authentifizierte Nutzer zu personalisieren.