AngularFire-Webcodelab

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit AngularFire Webanwendungen erstellen, indem Sie einen Chat-Client mithilfe von Firebase-Produkten und -Diensten implementieren und bereitstellen.

angularfire-2.png

Was Sie lernen werden

  • Erstellen Sie eine Web-App mit Angular und Firebase.
  • Synchronisieren Sie Daten mit Cloud Firestore und Cloud Storage für Firebase.
  • Authentifizieren Sie Ihre Benutzer mithilfe der Firebase-Authentifizierung.
  • Stellen Sie Ihre Web-App auf Firebase Hosting bereit.
  • Senden Sie Benachrichtigungen mit Firebase Cloud Messaging.
  • Erfassen Sie die Leistungsdaten Ihrer Web-App.

Was du brauchen wirst

  • Der IDE/Texteditor Ihrer Wahl, z. B. WebStorm , Atom , Sublime oder VS Code
  • Der Paketmanager npm , der normalerweise mit Node.js geliefert wird
  • Ein Terminal/eine Konsole
  • Ein Browser Ihrer Wahl, z. B. Chrome
  • Der Beispielcode des Codelabs (Informationen zum Erhalten des Codes finden Sie im nächsten Schritt des Codelabs.)

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository des Codelab über die Befehlszeile:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativ können Sie, wenn Sie Git nicht installiert haben, das Repository als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE das Verzeichnis 📁 angularfire-start aus dem geklonten Repository. Dieses 📁 angularfire-start Verzeichnis enthält den Startcode für das Codelab, das eine voll funktionsfähige Chat-Web-App sein wird.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. Melden Sie sich bei Firebase an.
  2. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie dann Ihr Firebase-Projekt FriendlyChat . Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.
  3. Deaktivieren Sie „Google Analytics für dieses Projekt aktivieren“.
  4. Klicken Sie auf Projekt erstellen .

Die Anwendung, die Sie erstellen möchten, verwendet Firebase-Produkte, die für Web-Apps verfügbar sind:

  • Firebase-Authentifizierung , um Ihren Benutzern die einfache Anmeldung bei Ihrer App zu ermöglichen.
  • Cloud Firestore , um strukturierte Daten in der Cloud zu speichern und sofortige Benachrichtigungen zu erhalten, wenn sich Daten ändern.
  • Cloud Storage für Firebase zum Speichern von Dateien in der Cloud.
  • Firebase Hosting zum Hosten und Bereitstellen Ihrer Assets.
  • Firebase Cloud Messaging zum Senden von Push-Benachrichtigungen und zum Anzeigen von Browser-Popup-Benachrichtigungen.
  • Firebase-Leistungsüberwachung zum Sammeln von Benutzerleistungsdaten für Ihre App.

Einige dieser Produkte erfordern eine spezielle Konfiguration oder müssen über die Firebase-Konsole aktiviert werden.

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Spitznamen Friendly Chat und aktivieren Sie dann das Kontrollkästchen neben Auch Firebase Hosting für diese App einrichten . Klicken Sie auf App registrieren .
  3. Im nächsten Schritt sehen Sie ein Konfigurationsobjekt. Kopieren Sie nur das JS-Objekt (nicht das umgebende HTML) in firebase-config.js

Screenshot der Web-App registrieren

Aktivieren Sie die Google- Anmeldung für die Firebase-Authentifizierung

Damit sich Benutzer mit ihren Google-Konten bei der Web-App anmelden können, verwenden Sie die Google- Anmeldemethode.

Sie müssen die Google- Anmeldung aktivieren:

  1. Suchen Sie in der Firebase-Konsole im linken Bereich den Abschnitt „Build“ .
  2. Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode (oder klicken Sie hier , um direkt dorthin zu gelangen).
  3. Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie dann auf Speichern .
  4. Legen Sie den öffentlich zugänglichen Namen Ihrer App auf Friendly Chat fest und wählen Sie im Dropdown-Menü eine Projekt-Support-E-Mail aus.
  5. Konfigurieren Sie Ihren OAuth-Zustimmungsbildschirm in der Google Cloud Console und fügen Sie ein Logo hinzu:

d89fb3873b5d36ae.png

Aktivieren Sie Cloud Firestore

Die Web-App verwendet Cloud Firestore, um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

Sie müssen Cloud Firestore aktivieren:

  1. Klicken Sie im Abschnitt „Erstellen“ der Firebase-Konsole auf „Firestore-Datenbank“ .
  2. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .

729991a081e7cd5.png

  1. Wählen Sie die Option „Im Testmodus starten“ und klicken Sie dann auf „Weiter“ , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Der Testmodus stellt sicher, dass Sie während der Entwicklung frei in die Datenbank schreiben können. Später in diesem Codelab machen Sie unsere Datenbank sicherer.

77e4986cbeaf9dee.png

  1. Legen Sie den Speicherort fest, an dem Ihre Cloud Firestore-Daten gespeichert werden. Sie können dies als Standard belassen oder eine Region in Ihrer Nähe auswählen. Klicken Sie auf „Fertig“ , um Firestore bereitzustellen.

9f2bb0d4e7ca49c7.png

Aktivieren Sie Cloud-Speicher

Die Web-App nutzt Cloud Storage für Firebase zum Speichern, Hochladen und Teilen von Bildern.

Sie müssen Cloud Storage aktivieren:

  1. Klicken Sie im Build- Bereich der Firebase-Konsole auf Storage .
  2. Wenn die Schaltfläche „Erste Schritte“ nicht angezeigt wird, bedeutet dies, dass der Cloud-Speicher bereits aktiviert ist und Sie die folgenden Schritte nicht ausführen müssen.
  3. Klicken Sie auf „Erste Schritte“ .
  4. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Weiter .

Mit den Standardsicherheitsregeln kann jeder authentifizierte Benutzer alles in Cloud Storage schreiben. Später in diesem Codelab machen Sie unseren Speicher sicherer.

62f1afdcd1260127.png

  1. Der Cloud-Speicherort ist mit derselben Region vorausgewählt, die Sie für Ihre Cloud Firestore-Datenbank ausgewählt haben. Klicken Sie auf Fertig, um die Einrichtung abzuschließen.

1d7f49ebaddb32fc.png

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

  1. Installieren Sie die CLI, indem Sie den folgenden npm-Befehl ausführen:
npm -g install firebase-tools
  1. Überprüfen Sie, ob die CLI korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:
firebase --version

Stellen Sie sicher, dass die Version der Firebase-CLI v4.1.0 oder höher ist.

  1. Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:
firebase login

Sie haben die Web-App-Vorlage so eingerichtet, dass die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abgerufen wird. Um die Konfiguration abzurufen, müssen Sie Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale angularfire-start Ihrer App zugreift.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias.

Ein Alias ​​ist nützlich, wenn Sie über mehrere Umgebungen verfügen (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default .

  1. Befolgen Sie die restlichen Anweisungen auf Ihrer Befehlszeile.

5. Installieren Sie AngularFire

Stellen Sie vor der Ausführung des Projekts sicher, dass Sie Angular CLI und AngularFire eingerichtet haben.

  1. Führen Sie in einer Konsole den folgenden Befehl aus:
npm install -g @angular/cli
  1. Führen Sie dann in einer Konsole aus dem Verzeichnis angularfire-start den folgenden Angular-CLI-Befehl aus:
ng add @angular/fire

Dadurch werden alle notwendigen Abhängigkeiten für Ihr Projekt installiert.

  1. Wenn Sie dazu aufgefordert werden, wählen Sie die Funktionen aus, die in der Firebase-Konsole eingerichtet wurden ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) und folgen Sie den Anweisungen auf der Konsole.

6. Führen Sie die Starter-App lokal aus

Nachdem Sie Ihr Projekt importiert und konfiguriert haben, können Sie die Web-App zum ersten Mal ausführen.

  1. Führen Sie in einer Konsole aus dem Verzeichnis angularfire-start den folgenden Firebase-CLI-Befehl aus:
firebase emulators:start
  1. Ihre Befehlszeile sollte die folgende Antwort anzeigen:
✔  hosting: Local server: http://localhost:5000

Sie verwenden den Firebase Hosting -Emulator, um unsere App lokal bereitzustellen. Die Web-App sollte jetzt unter http://localhost:5000 verfügbar sein. Alle Dateien, die sich im Unterverzeichnis src befinden, werden bereitgestellt.

  1. Öffnen Sie Ihre App in Ihrem Browser unter http://localhost:5000 .

Sie sollten die Benutzeroberfläche Ihrer FriendlyChat-App sehen, die (noch!) nicht funktioniert:

anglefire-2.png

Die App kann im Moment nichts tun, aber mit Ihrer Hilfe wird sie es bald tun! Bisher haben Sie nur die Benutzeroberfläche für Sie entworfen.

Lassen Sie uns jetzt einen Echtzeit-Chat erstellen!

7. Importieren und konfigurieren Sie Firebase

Konfigurieren Sie Firebase

Sie müssen das Firebase SDK konfigurieren, um ihm mitzuteilen, welches Firebase-Projekt Sie verwenden.

  1. Gehen Sie in der Firebase-Konsole zu Ihren Projekteinstellungen
  2. Wählen Sie in der Karte „Ihre Apps“ den Spitznamen der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie im Firebase SDK-Snippet-Bereich „Config“ aus.

Sie werden feststellen, dass eine Umgebungsdatei /angularfire-start/src/environments/environment.ts für Sie generiert wurde.

  1. Kopieren Sie das Konfigurationsobjekt-Snippet und fügen Sie es dann zu angularfire-start/src/firebase-config.js hinzu.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  },
};

AngularFire importieren

Sie werden feststellen, dass die von Ihnen in der Konsole ausgewählten Funktionen automatisch in die Datei /angularfire-start/src/app/app.module.ts weitergeleitet wurden. Dadurch kann Ihre App Firebase-Features und -Funktionen nutzen. Um jedoch in einer lokalen Umgebung zu entwickeln, müssen Sie sie verbinden, um die Emulator-Suite nutzen zu können.

  1. Suchen Sie in /angularfire-start/src/app/app.module.ts den Abschnitt imports und ändern Sie die bereitgestellten Funktionen, um in Nicht-Produktionsumgebungen eine Verbindung zur Emulator-Suite herzustellen.
// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

Während dieses Codelabs verwenden Sie Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging und Performance Monitoring und importieren daher alle zugehörigen Bibliotheken. Stellen Sie bei Ihren zukünftigen Apps sicher, dass Sie nur die Teile von Firebase importieren, die Sie benötigen, um die Ladezeit Ihrer App zu verkürzen.

8. Richten Sie die Benutzeranmeldung ein

AngularFire sollte nun einsatzbereit sein, da es in app.module.ts importiert und initialisiert wurde. Sie implementieren nun die Benutzeranmeldung mithilfe der Firebase-Authentifizierung .

Authentifizieren Sie Ihre Benutzer mit Google Sign-In

Wenn ein Benutzer in der App auf die Schaltfläche „Mit Google anmelden“ klickt, wird die login ausgelöst. (Das haben Sie bereits für Sie eingerichtet!) Für dieses Codelab möchten Sie Firebase autorisieren, Google als Identitätsanbieter zu verwenden. Sie verwenden ein Popup, es sind jedoch auch mehrere andere Methoden von Firebase verfügbar.

  1. Öffnen Sie im angularfire-start Verzeichnis im Unterverzeichnis /src/app/services/ chat.service.ts .
  2. Suchen Sie die Funktion login .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

Die logout wird ausgelöst, wenn der Benutzer auf die Schaltfläche Abmelden klickt.

  1. Gehen Sie zurück zur Datei src/app/services/chat.service.ts .
  2. Suchen Sie die Funktion logout .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Verfolgen Sie den Authentifizierungsstatus

Um unsere Benutzeroberfläche entsprechend zu aktualisieren, benötigen Sie eine Möglichkeit zu überprüfen, ob der Benutzer angemeldet oder abgemeldet ist. Mit der Firebase-Authentifizierung können Sie beobachtbare Daten zum Benutzerstatus abrufen, die jedes Mal ausgelöst werden, wenn sich der Authentifizierungsstatus ändert.

  1. Gehen Sie zurück zur Datei src/app/services/chat.service.ts .
  2. Suchen Sie die Variablenzuweisung user$ .
  3. Ersetzen Sie die gesamte Aufgabe durch den folgenden Code.

chat.service.ts

// Observable user
user$ = user(this.auth);

Der obige Code ruft die AngularFire-Funktion user auf, die einen beobachtbaren Benutzer zurückgibt. Es wird jedes Mal ausgelöst, wenn sich der Authentifizierungsstatus ändert (wenn sich der Benutzer an- oder abmeldet). An diesem Punkt aktualisieren Sie die Benutzeroberfläche, um umzuleiten, den Benutzer in der Kopfzeilennavigation anzuzeigen usw. Alle diese UI-Teile wurden bereits implementiert.

Testen Sie die Anmeldung in der App

  1. Wenn Ihre App weiterhin bereitgestellt wird, aktualisieren Sie sie im Browser. Andernfalls führen Sie firebase emulators:start in der Befehlszeile aus, um die Bereitstellung der App über http://localhost:5000 zu starten, und öffnen Sie sie dann in Ihrem Browser.
  2. Melden Sie sich mit der Anmeldeschaltfläche und Ihrem Google-Konto bei der App an. Wenn eine Fehlermeldung mit der Meldung auth/operation-not-allowed angezeigt wird, stellen Sie sicher, dass Sie Google Sign-in als Authentifizierungsanbieter in der Firebase-Konsole aktiviert haben.
  3. Nach der Anmeldung sollten Ihr Profilbild und Ihr Benutzername angezeigt werden: anglefire-3.png

9. Schreiben Sie Nachrichten an Cloud Firestore

In diesem Abschnitt schreiben Sie einige Daten in Cloud Firestore, damit Sie die Benutzeroberfläche der App füllen können. Dies kann manuell mit der Firebase-Konsole erfolgen, Sie tun dies jedoch in der App selbst, um einen einfachen Cloud Firestore-Schreibvorgang zu demonstrieren.

Datenmodell

Cloud Firestore-Daten sind in Sammlungen, Dokumente, Felder und Untersammlungen unterteilt. Sie speichern jede Nachricht des Chats als Dokument in einer Sammlung auf oberster Ebene namens messages .

688d7bc5fb662b57.png

Fügen Sie Nachrichten zum Cloud Firestore hinzu

Zum Speichern der von Benutzern geschriebenen Chatnachrichten verwenden Sie Cloud Firestore .

In diesem Abschnitt fügen Sie die Funktionalität hinzu, mit der Benutzer neue Nachrichten in Ihre Datenbank schreiben können. Wenn ein Benutzer auf die Schaltfläche SENDEN klickt, wird das folgende Code-Snippet ausgelöst. Es fügt Ihrer Cloud Firestore-Instanz in der messages ein Nachrichtenobjekt mit den Inhalten der Nachrichtenfelder hinzu. Die Methode add() fügt der Sammlung ein neues Dokument mit einer automatisch generierten ID hinzu.

  1. Gehen Sie zurück zur Datei src/app/services/chat.service.ts .
  2. Suchen Sie die Funktion addMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

Testen Sie das Versenden von Nachrichten

  1. Wenn Ihre App weiterhin bereitgestellt wird, aktualisieren Sie sie im Browser. Andernfalls führen Sie firebase emulators:start in der Befehlszeile aus, um die Bereitstellung der App über http://localhost:5000 zu starten, und öffnen Sie sie dann in Ihrem Browser.
  2. Geben Sie nach der Anmeldung eine Nachricht wie „Hey there!“ ein und klicken Sie dann auf SENDEN . Dadurch wird die Nachricht in Cloud Firestore geschrieben. Sie sehen die Daten jedoch noch nicht in Ihrer eigentlichen Web-App, da Sie den Abruf der Daten noch implementieren müssen (nächster Abschnitt des Codelabs).
  3. Sie können die neu hinzugefügte Nachricht in Ihrer Firebase-Konsole sehen. Öffnen Sie die Benutzeroberfläche Ihrer Emulator-Suite. Klicken Sie im Abschnitt „Erstellen“ auf „Firestore-Datenbank “ (oder klicken Sie hier und Sie sollten die Nachrichtensammlung mit Ihrer neu hinzugefügten Nachricht sehen:

6812efe7da395692.png

10. Nachrichten lesen

Nachrichten synchronisieren

Um Nachrichten in der App zu lesen, müssen Sie ein Observable hinzufügen, das bei Datenänderungen ausgelöst wird, und dann ein UI-Element erstellen, das neue Nachrichten anzeigt.

Sie fügen Code hinzu, der auf neu hinzugefügte Nachrichten von der App wartet. In diesem Code rufen Sie den Snapshot der messages ab. Es werden nur die letzten 12 Nachrichten des Chats angezeigt, um zu vermeiden, dass beim Laden ein sehr langer Verlauf angezeigt wird.

  1. Gehen Sie zurück zur Datei src/app/services/chat.service.ts .
  2. Suchen Sie die Funktion loadMessages .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Um Nachrichten in der Datenbank abzuhören, erstellen Sie eine Abfrage für eine Sammlung, indem Sie mithilfe der collection angeben, in welcher Sammlung sich die Daten befinden, die Sie abhören möchten. Im obigen Code hören Sie die Änderungen innerhalb der messages Sammlung, in der die Chatnachrichten gespeichert werden. Sie wenden auch ein Limit an, indem Sie mit limit(12) nur die letzten 12 Nachrichten abhören und die Nachrichten mit orderBy('timestamp', 'desc') nach Datum sortieren, um die 12 neuesten Nachrichten zu erhalten.

Die Funktion collectionData verwendet Snapshots unter der Haube. Die Rückruffunktion wird ausgelöst, wenn Änderungen an Dokumenten vorgenommen werden, die der Abfrage entsprechen. Dies kann der Fall sein, wenn eine Nachricht gelöscht, geändert oder hinzugefügt wird. Weitere Informationen hierzu finden Sie in der Cloud Firestore-Dokumentation .

Testen Sie die Synchronisierung von Nachrichten

  1. Wenn Ihre App weiterhin bereitgestellt wird, aktualisieren Sie sie im Browser. Andernfalls führen Sie firebase emulators:start in der Befehlszeile aus, um die Bereitstellung der App über http://localhost:5000 zu starten, und öffnen Sie sie dann in Ihrem Browser.
  2. Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der FriendlyChat-Benutzeroberfläche angezeigt werden (siehe unten). Fühlen Sie sich frei, neue Nachrichten zu schreiben; Sie sollten sofort erscheinen.
  3. (Optional) Sie können versuchen, Nachrichten direkt im Firestore -Bereich der Emulator-Suite manuell zu löschen, zu ändern oder neue Nachrichten hinzuzufügen. Alle Änderungen sollten sich in der Benutzeroberfläche widerspiegeln.

Glückwunsch! Sie lesen Cloud Firestore-Dokumente in Ihrer App!

anglefire-2.png

11. Bilder senden

Sie fügen nun eine Funktion hinzu, die Bilder teilt.

Während sich Cloud Firestore gut zum Speichern strukturierter Daten eignet, eignet sich Cloud Storage besser zum Speichern von Dateien. Cloud Storage für Firebase ist ein Datei-/Blob-Speicherdienst, den Sie zum Speichern aller Bilder verwenden, die ein Benutzer über unsere App teilt.

Speichern Sie Bilder im Cloud-Speicher

Für dieses Codelab haben Sie bereits eine Schaltfläche hinzugefügt, die einen Dateiauswahldialog auslöst. Nach Auswahl einer Datei wird die Funktion saveImageMessage aufgerufen und Sie können einen Verweis auf die ausgewählte Datei abrufen. Die Funktion saveImageMessage führt Folgendes aus:

  1. Erstellt eine „Platzhalter“-Chat-Nachricht im Chat-Feed, sodass Benutzer eine „Lade“-Animation sehen, während Sie das Bild hochladen.
  2. Lädt die Bilddatei in Cloud Storage unter diesem Pfad hoch: /<uid>/<file_name>
  3. Erzeugt eine öffentlich lesbare URL für die Bilddatei.
  4. Aktualisiert die Chat-Nachricht mit der URL der neu hochgeladenen Bilddatei anstelle des vorübergehend geladenen Bildes.

Jetzt fügen Sie die Funktionalität zum Senden eines Bildes hinzu:

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion saveImageMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Testen Sie das Versenden von Bildern

  1. Wenn Ihre App weiterhin bereitgestellt wird, aktualisieren Sie sie im Browser. Andernfalls führen Sie firebase emulators:start in der Befehlszeile aus, um die Bereitstellung der App über http://localhost:5000 zu starten, und öffnen Sie sie dann in Ihrem Browser.
  2. Klicken Sie nach dem Anmelden unten links auf die Schaltfläche zum Hochladen von Bildern anglefire-4.png und wählen Sie mit der Dateiauswahl eine Bilddatei aus. Wenn Sie auf der Suche nach einem Bild sind, können Sie gerne dieses schöne Bild einer Kaffeetasse verwenden.
  3. In der Benutzeroberfläche der App sollte eine neue Nachricht mit Ihrem ausgewählten Bild erscheinen: anglefire-2.png

Wenn Sie versuchen, ein Bild hinzuzufügen, während Sie nicht angemeldet sind, sollte eine Fehlermeldung angezeigt werden, die Sie darauf hinweist, dass Sie sich anmelden müssen, um Bilder hinzuzufügen.

12. Benachrichtigungen anzeigen

Sie fügen jetzt Unterstützung für Browserbenachrichtigungen hinzu. Die App benachrichtigt Benutzer, wenn neue Nachrichten im Chat gepostet werden. Firebase Cloud Messaging (FCM) ist eine plattformübergreifende Messaging-Lösung, mit der Sie Nachrichten und Benachrichtigungen zuverlässig und kostenlos übermitteln können.

Fügen Sie den FCM-Servicemitarbeiter hinzu

Die Web-App benötigt einen Servicemitarbeiter , der Webbenachrichtigungen empfängt und anzeigt.

Der Messaging-Anbieter sollte bereits eingerichtet sein, als AngularFire hinzugefügt wurde. Stellen Sie sicher, dass der folgende Code im Importabschnitt von /angularfire-start/src/app/app.module.ts vorhanden ist

provideMessaging(() => {
    return getMessaging();
}),

app/app.module.ts

Der Servicemitarbeiter muss lediglich das Firebase Cloud Messaging SDK laden und initialisieren, das sich um die Anzeige von Benachrichtigungen kümmert.

Holen Sie sich FCM-Gerätetoken

Wenn Benachrichtigungen auf einem Gerät oder Browser aktiviert wurden, erhalten Sie ein Geräte-Token . Mit diesem Geräte-Token können Sie eine Benachrichtigung an ein bestimmtes Gerät oder einen bestimmten Browser senden.

Wenn sich der Benutzer anmeldet, rufen Sie die Funktion saveMessagingDeviceToken auf. Dort erhalten Sie das FCM-Gerätetoken vom Browser und speichern es im Cloud Firestore.

chat.service.ts

  1. Suchen Sie die Funktion saveMessagingDeviceToken .
  2. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Dieser Code funktioniert jedoch zunächst nicht. Damit Ihre App das Geräte-Token abrufen kann, muss der Benutzer Ihrer App die Berechtigung erteilen, Benachrichtigungen anzuzeigen (der nächste Schritt des Codelabs).

Fordern Sie Berechtigungen zum Anzeigen von Benachrichtigungen an

Wenn der Benutzer Ihrer App noch nicht die Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat, erhalten Sie kein Geräte-Token. In diesem Fall rufen Sie die Methode requestPermission() auf, die einen Browserdialog anzeigt, in dem Sie nach dieser Berechtigung gefragt werden ( in unterstützten Browsern ).

8b9d0c66dc36153d.png

  1. Gehen Sie zurück zur Datei src/app/services/chat.service.ts .
  2. Suchen Sie die Funktion requestNotificationsPermissions .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

Holen Sie sich Ihr Geräte-Token

  1. Wenn Ihre App weiterhin bereitgestellt wird, aktualisieren Sie sie im Browser. Andernfalls führen Sie firebase emulators:start in der Befehlszeile aus, um die Bereitstellung der App über http://localhost:5000 zu starten, und öffnen Sie sie dann in Ihrem Browser.
  2. Nach dem Anmelden sollte der Benachrichtigungsberechtigungsdialog erscheinen: bd3454e6dbfb6723.png
  3. Klicken Sie auf Zulassen .
  4. Öffnen Sie die JavaScript-Konsole Ihres Browsers. Sie sollten die folgende Meldung sehen: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Kopieren Sie Ihr Geräte-Token. Sie benötigen es für die nächste Stufe des Codelabs.

Senden Sie eine Benachrichtigung an Ihr Gerät

Da Sie nun über Ihr Geräte-Token verfügen, können Sie eine Benachrichtigung senden.

  1. Öffnen Sie die Registerkarte „Cloud Messaging“ der Firebase-Konsole .
  2. Klicken Sie auf „Neue Benachrichtigung“
  3. Geben Sie einen Benachrichtigungstitel und einen Benachrichtigungstext ein.
  4. Klicken Sie auf der rechten Seite des Bildschirms auf „Testnachricht senden“.
  5. Geben Sie das Geräte-Token ein, das Sie aus der JavaScript-Konsole Ihres Browsers kopiert haben, und klicken Sie dann auf das Pluszeichen („+“)
  6. Klicken Sie auf „Testen“

Wenn sich Ihre App im Vordergrund befindet, wird die Benachrichtigung in der JavaScript-Konsole angezeigt.

Wenn Ihre App im Hintergrund läuft, sollte eine Benachrichtigung in Ihrem Browser erscheinen, wie in diesem Beispiel:

de79e8638a45864c.png

13. Cloud Firestore-Sicherheitsregeln

Datenbanksicherheitsregeln anzeigen

Cloud Firestore verwendet eine bestimmte Regelsprache, um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben Sie sich für die Verwendung der Standardsicherheitsregeln „Testmodus“ entschieden, um den Zugriff auf den Datenspeicher nicht einzuschränken. In der Firebase-Konsole können Sie diese Regeln auf der Registerkarte „Regeln“ im Abschnitt „Datenbank“ anzeigen und ändern.

Jetzt sollten Sie die Standardregeln sehen, die den Zugriff auf den Datenspeicher nicht einschränken. Das bedeutet, dass jeder Benutzer alle Sammlungen in Ihrem Datenspeicher lesen und schreiben kann.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Sie aktualisieren die Regeln, um Dinge einzuschränken, indem Sie die folgenden Regeln verwenden:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Die Sicherheitsregeln sollten automatisch auf Ihre Emulator-Suite aktualisiert werden.

Sehen Sie sich die Sicherheitsregeln für Cloud Storage an

Cloud Storage für Firebase verwendet eine bestimmte Regelsprache, um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben Sie sich für die Verwendung der Standard-Cloud-Storage-Sicherheitsregel entschieden, die nur authentifizierten Benutzern die Nutzung von Cloud-Storage erlaubt. In der Firebase-Konsole können Sie im Abschnitt „Speicher “ auf der Registerkarte „ Regeln “ Regeln anzeigen und ändern. Sie sollten die Standardregel sehen, die es jedem angemeldeten Benutzer ermöglicht, alle Dateien in Ihrem Speicher-Bucket zu lesen und zu schreiben.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Sie aktualisieren die Regeln, um Folgendes zu tun:

  • Erlauben Sie jedem Benutzer, nur in seine eigenen spezifischen Ordner zu schreiben
  • Erlauben Sie jedem, aus dem Cloud-Speicher zu lesen
  • Stellen Sie sicher, dass es sich bei den hochgeladenen Dateien um Bilder handelt
  • Beschränken Sie die Größe der Bilder, die hochgeladen werden können, auf maximal 5 MB

Dies lässt sich mit folgenden Regeln umsetzen:

Speicherregeln

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

14. Stellen Sie Ihre App mit Firebase Hosting bereit

Firebase bietet einen Hosting-Service zur Bereitstellung Ihrer Assets und Web-Apps. Sie können Ihre Dateien mithilfe der Firebase-CLI für Firebase Hosting bereitstellen. Vor der Bereitstellung müssen Sie in Ihrer Datei firebase.json angeben, welche lokalen Dateien bereitgestellt werden sollen. Für dieses Codelab haben Sie dies bereits für Sie erledigt, da dieser Schritt erforderlich war, um unsere Dateien während dieses Codelabs bereitzustellen. Die Hosting-Einstellungen werden unter dem hosting Attribut angegeben:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Diese Einstellungen teilen der CLI mit, dass Sie alle Dateien im Verzeichnis ./public bereitstellen möchten ( "public": "./public" ).

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale angularfire-start Ihrer App zugreift.
  2. Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:
ng deploy

Wählen Sie dann die Option „Firebase“ und befolgen Sie die Anweisungen in der Befehlszeile.

  1. Die Konsole sollte Folgendes anzeigen:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Besuchen Sie Ihre Web-App, die jetzt vollständig auf einem globalen CDN gehostet wird, mit Firebase Hosting auf zwei Ihrer eigenen Firebase-Subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternativ können Sie firebase open hosting:site in der Befehlszeile ausführen.

Besuchen Sie die Dokumentation, um mehr über die Funktionsweise von Firebase Hosting zu erfahren.

Gehen Sie zum Abschnitt „Hosting“ der Firebase-Konsole Ihres Projekts, um nützliche Hosting-Informationen und -Tools anzuzeigen, einschließlich des Verlaufs Ihrer Bereitstellungen, der Funktionalität zum Zurücksetzen auf frühere Versionen Ihrer App und des Workflows zum Einrichten einer benutzerdefinierten Domäne.

15. Herzlichen Glückwunsch!

Sie haben Firebase verwendet, um eine Echtzeit-Chat-Webanwendung zu erstellen!

Was Sie abgedeckt haben

  • Firebase-Authentifizierung
  • Cloud Firestore
  • Firebase SDK für Cloud Storage
  • Firebase Cloud-Messaging
  • Firebase-Leistungsüberwachung
  • Firebase-Hosting

Nächste Schritte

Erfahren Sie mehr

16. [Optional] Mit App Check erzwingen

Firebase App Check trägt dazu bei, Ihre Dienste vor unerwünschtem Datenverkehr zu schützen und Ihr Backend vor Missbrauch zu schützen. In diesem Schritt fügen Sie die Validierung von Anmeldeinformationen hinzu und blockieren nicht autorisierte Clients mit App Check und reCAPTCHA Enterprise .

Zuerst müssen Sie App Check und reCaptcha aktivieren.

Aktivieren von reCaptcha Enterprise

  1. Suchen Sie in der Cloud-Konsole unter Sicherheit nach reCaptcha Enterprise und wählen Sie es aus.
  2. Aktivieren Sie den Dienst nach Aufforderung und klicken Sie auf Schlüssel erstellen .
  3. Geben Sie nach Aufforderung einen Anzeigenamen ein und wählen Sie Website als Plattformtyp aus.
  4. Fügen Sie Ihre bereitgestellten URLs zur Domänenliste hinzu und stellen Sie sicher, dass die Option „Kontrollkästchen-Herausforderung verwenden“ deaktiviert ist.
  5. Klicken Sie auf Schlüssel erstellen und speichern Sie den generierten Schlüssel an einem sicheren Ort. Sie werden es später in diesem Schritt benötigen.

App Check aktivieren

  1. Suchen Sie in der Firebase-Konsole im linken Bereich den Abschnitt „Build“ .
  2. Klicken Sie auf App Check und dann auf die Registerkarte Anmeldemethode , um zu App Check zu navigieren.
  3. Klicken Sie auf Registrieren und geben Sie Ihren reCaptcha Enterprise-Schlüssel ein, wenn Sie dazu aufgefordert werden. Klicken Sie dann auf Speichern .
  4. Wählen Sie in der API-Ansicht „Speicher“ aus und klicken Sie auf „Erzwingen“ . Machen Sie dasselbe für Cloud Firestore .

App Check sollte jetzt erzwungen werden! Aktualisieren Sie Ihre App und versuchen Sie, Chatnachrichten anzuzeigen oder zu senden. Sie sollten die Fehlermeldung erhalten:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Das bedeutet, dass App Check standardmäßig nicht validierte Anfragen blockiert. Jetzt fügen wir Ihrer App eine Validierung hinzu.

Navigieren Sie zu Ihrer Datei environment.ts und fügen Sie reCAPTCHAEnterpriseKey zum environment hinzu.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Ersetzen Sie den Wert des key durch Ihr reCaptcha Enterprise-Token.

Navigieren Sie dann zur Datei app.module.ts und fügen Sie die folgenden Importe hinzu:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Fügen Sie in derselben app.module.ts Datei die folgende globale Variablendeklaration hinzu:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Fügen Sie bei Importen die Initialisierung von App Check mit ReCaptchaEnterpriseProvider hinzu und legen Sie isTokenAutoRefreshEnabled auf true fest, damit Token automatisch aktualisiert werden können.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Um lokale Tests zu ermöglichen, setzen Sie self.FIREBASE_APPCHECK_DEBUG_TOKEN auf true . Wenn Sie Ihre App in localhost aktualisieren, wird ein Debug-Token in der Konsole protokolliert, ähnlich wie:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Gehen Sie nun zur Apps-Ansicht von App Check in der Firebase-Konsole.

Klicken Sie auf das Überlaufmenü und wählen Sie Debug-Tokens verwalten aus .

Klicken Sie dann auf Debug-Token hinzufügen und fügen Sie das Debug-Token nach Aufforderung aus Ihrer Konsole ein.

Navigieren Sie zur Datei chat.service.ts und fügen Sie den folgenden Import hinzu:

import { AppCheck } from '@angular/fire/app-check';

Fügen Sie in derselben chat.service.ts Datei App Check zusammen mit den anderen Firebase-Diensten ein.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

Glückwunsch! App Check sollte jetzt in Ihrer App funktionieren.