Firebase zu Ihrem Webdienst hinzufügen

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.

Fügen Sie Ihrem Google Cloud-Projekt Firebase hinzu, konfigurieren Sie Ihre Authentifizierungseinstellungen und fügen Sie dann Ihrem Webdienst Firebase hinzu.

Durch Hinzufügen von Firebase zu Ihrem Webdienst können Sie Nutzer authentifizieren und die Erfahrung für die Nutzer personalisieren.

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:
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-1
```

Firebase zu Ihrem Google Cloud-Projekt hinzufügen

Fügen Sie Ihrem Google Cloud-Projekt Firebase hinzu und konfigurieren Sie Ihre Authentifizierungseinstellungen, um die Firebase-Authentifizierung mit Ihrem Webdienst zu verwenden.

Fügen Sie Firebase mit dem Tool Projekt hinzufügen in der Firebase Console zu Ihrem vorhandenen Google Cloud-Projekt hinzu.

Sie können auch ein Firebase-Konto mit einem anderen Namen verwenden, das nicht mit Ihrem vorhandenen Google Cloud-Projekt verknüpft ist.
Aktivieren Sie in der Firebase Console die Anbieter für Authentifizierungsanmeldungen. Für diesen Webdienst aktivieren Sie die E-Mail-Adresse/Passwort- und Google-Anmeldeanbieter:
1. Klicken Sie auf Entwickeln > Authentifizieren > Anmeldemethode.
2. Setzen unter Sign-in providers (Anmeldeanbieter) den Cursor auf den "Provider" (Anbieter) Email/Password (E-Mail/Passwort) und klicken auf das Stiftsymbol.
3. Stellen Sie die Schaltfläche auf Aktivieren um, um die Authentifizierung mit E-Mail-Adresse/Passwort zu verwenden.
4. Klicken Sie nach dem Aktivieren des Anbieters auf Speichern.
5. Führen Sie die gleichen Schritte für den Anmeldeanbieter Google aus.
  
  Tipp: Weitere Informationen zum Aktivieren anderer Anbieter finden Sie auf Firebase in den Leitfäden zu Facebook, Twitter und GitHub jeweils im Abschnitt "Vorbereitung".
Für eine ordnungsgemäße Firebase-Authentifizierung muss Ihre Domain für OAuth-Weiterleitungen autorisiert sein. So autorisieren Sie Ihre Domain:
1. Wählen Sie Entwickeln > Authentifizierung > Einstellungen aus.
2. Klicken Sie auf der Seite Einstellungen unter Autorisierte Domains auf Domain hinzufügen.
3. Geben Sie die Domain Ihrer Anwendung in App Engine ohne das Präfix http:// ein:
  
  PROJECT_ID. REGION_ID.r.appspot.com, wobei PROJECT_ID die ID Ihres Google Cloud-Projekts ist.

Firebase zu Ihrem Webdienst hinzufügen

Zum Hinzufügen von Firebase zu Ihrem Webdienst kopieren Sie das benutzerdefinierte Code-Snippet sowie die JavaScript- und CSS-Dateien Ihres Firebase-Projekts in Ihren Webdienst:

Wählen Sie in der Firebase Console Ihr Projekt aus.
Wählen Sie auf der Projektübersichtsseite unter dem Text "Fügen Sie Firebase zu Ihrer App hinzu, um zu beginnen" die Option web aus. Wenn Sie dem Projekt bereits eine App hinzugefügt haben, wird dieser Text möglicherweise nicht angezeigt. Rufen Sie stattdessen die Seite Projektübersicht > Projekteinstellungen > Allgemein Ihrer Projektanwendung auf, scrollen Sie nach unten und wählen Sie App hinzufügen.
Nach der Registrierung der App erscheint ein benutzerdefiniertes Code-Snippet. Kopieren Sie den Inhalt des Snippets. Wenn Sie dieses Code-Snippet später wieder sehen möchten, rufen Sie die Seite Projekteinstellungen der Firebase-App auf.

Aktualisieren Sie Ihre templates/index.html-Datei. Führen Sie dafür folgende Schritte aus:

Fügen Sie dem <head>-Tag folgende Zeilen hinzu:

<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

Fügen Sie Ihr benutzerdefiniertes Code-Snippet zu dem Tag <body> hinzu.

In dieser Anleitung können Sie den Code am Anfang des Textes einfügen, da der einzige Inhalt in templates/index.html ein Beispiel für Firebase-Dienste ist. In der Produktionsumgebung empfehlen wir Ihnen, das Code-Snippet unten im Text hinzuzufügen, aber bevor Sie Firebase-Dienste nutzen.

Ihr benutzerdefinierter Code kann wie dieses fiktive Snippet aussehen:

<!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

Ersetzen Sie den TODO-Code im Snippet oben durch das folgende Skript-Tag, um die Authentifizierungskomponente von Firebase zu aktivieren:
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Diese Skriptadressen sind in der Firebase UI for Web-Dokumentation dokumentiert.

Ersetzen Sie den Rest des Texts durch folgenden Code, den Sie später in diesem Leitfaden zum Anzeigen authentifizierter Nutzerdaten verwenden werden:

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

Nächste Schritte

Nachdem Sie Firebase zu Ihrem Google Cloud-Projekt und Ihrem Webdienst hinzugefügt haben, können Sie Ihrem Webdienst Code hinzufügen, um Nutzer zu authentifizieren.

Zurück

Daten verarbeiten

Weiter

Nutzer authentifizieren