Funktionen der erweiterten Authentifizierung

1. Einrichten

Quellcode abrufen

In diesem Codelab beginnen Sie mit einer fast vollständigen Version der Friendly Chat-Beispiel-App. Als Erstes müssen Sie also den Quellcode klonen:

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

Wechseln Sie dann in das Verzeichnis security-start, in dem Sie für den Rest dieses Codelabs arbeiten werden:

$ cd codelab-friendlychat-web/security-start

Installieren Sie nun die Abhängigkeiten, damit Sie den Code ausführen können. Wenn Sie eine langsamere Internetverbindung haben, kann dies ein bis zwei Minuten dauern:

$ npm install && (cd functions && npm install)

Dieses Repository kennenlernen

Das Verzeichnis security-solution/ enthält den vollständigen Code für die Beispiel-App. Im Verzeichnis security-start arbeiten Sie das Codelab durch. Dort fehlen einige wichtige Teile der Authentifizierungsimplementierung. Die wichtigsten Dateien und Funktionen in security-start/ und security-solution/ sind:

• functions/index.js enthält Cloud Functions-Code und ist der Ort, an dem Sie Funktionen zum Blockieren der Authentifizierung schreiben.
• public/: Enthält die statischen Dateien für Ihre Chat-App.
• public/scripts/main.js: Hier wird der JS-Code (src/index.js) Ihrer Chat-App kompiliert.
• src/firebase-config.js – enthält das Firebase-Konfigurationsobjekt, das zum Initialisieren Ihrer Chat-App verwendet wird.
• src/index.js: Ihr JS-Code für die Chat-App

Firebase CLI herunterladen

Die Emulator Suite ist Teil der Firebase CLI (Befehlszeile), die mit dem folgenden Befehl auf Ihrem Computer installiert werden kann:

$ npm install -g firebase-tools@latest

Erstellen Sie das JavaScript mit Webpack. Dadurch wird die Datei „main.js“ im Verzeichnis „public/scripts/“ erstellt.

webpack build

Prüfen Sie als Nächstes, ob Sie die aktuelle Version der CLI haben. Dieses Codelab funktioniert mit Version 11.14 oder höher.

$ firebase --version
11.14.2

Mit Ihrem Firebase-Projekt verbinden

Neues Firebase-Projekt erstellen

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. Authentication MFA Codelab).
   

   Dieser Projektname wird als Anzeigename in Firebase-Oberflächen verwendet. Firebase erstellt automatisch eine eindeutige Projekt-ID auf Grundlage dieses Projektnamens. Sie können jetzt optional auf das Symbol Bearbeiten klicken, um die gewünschte Projekt-ID festzulegen. Diese ID kann nach dem Erstellen des Projekts jedoch nicht mehr geändert werden.

   Notieren Sie sich Ihre Projekt-ID, da Sie diese später benötigen, um Ihr Firebase-Projekt in der Firebase CLI zu identifizieren. Wenn Sie Ihre ID vergessen, können Sie sie später jederzeit in den Projekteinstellungen nachsehen.

3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Code mit Ihrem Firebase-Projekt verbinden

Jetzt müssen Sie diesen Code mit Ihrem Firebase-Projekt verknüpfen. Führen Sie zuerst den folgenden Befehl aus, um sich in der Firebase CLI anzumelden:

$ firebase login

Führen Sie als Nächstes den folgenden Befehl aus, um einen Projektalias zu erstellen. Ersetzen Sie $YOUR_PROJECT_ID durch die ID Ihres Firebase-Projekts.

$ firebase use $YOUR_PROJECT_ID

Jetzt können Sie die App ausführen.

2. Emulatoren ausführen

In diesem Abschnitt führen Sie die App lokal aus. Das bedeutet, dass es an der Zeit ist, die Emulator Suite zu starten.

Emulatoren starten

Führen Sie im Quellverzeichnis des Codelabs den folgenden Befehl aus, um die Emulatoren zu starten:

$ firebase emulators:start

Ihre App wird dann unter http://127.0.0.1:5170 bereitgestellt und der Quellcode wird bei jeder Änderung neu erstellt. Sie müssen nur Ihren Browser lokal vollständig aktualisieren (Strg+Umschalt+R), um die Änderungen zu sehen.

Die Ausgabe sollte in etwa so aussehen:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Wenn die Meldung Alle Emulatoren bereit angezeigt wird, ist die App einsatzbereit.

3. MFA implementieren

Die MFA wurde in diesem Repository teilweise implementiert. Sie fügen den Code hinzu, um einen Nutzer zuerst für die MFA zu registrieren und dann Nutzer, die für die MFA registriert sind, nach einem zweiten Faktor zu fragen.

HINWEIS: Dies sind die primären Methoden, die Sie zum Implementieren der MFA verwenden:

• getMultiFactorResolver(): Ruft ein MultiFactorResolver-Objekt ab, das die Nutzeranmeldung erleichtert, wenn ein zweiter Faktor angegeben werden muss.
• verifyPhoneNumber(): Sendet eine Bestätigungsnachricht an das Mobiltelefon des Nutzers, sowohl für die MFA-Registrierung als auch für die Anmeldung.
• resolveSignIn(): Wird verwendet, um die Anmeldung abzuschließen, nachdem der Nutzer den ihm gesendeten Bestätigungscode eingegeben hat.
• enroll(): Wird verwendet, um die MFA-Registrierung abzuschließen, nachdem der Nutzer den ihm gesendeten Bestätigungscode angegeben hat.

Öffnen Sie die Datei src/index.js in Ihrem Editor und suchen Sie die Methode startEnrollMultiFactor(). Fügen Sie den folgenden Code hinzu, um die reCAPTCHA-Verifizierung einzurichten, die Telefonmissbrauch verhindert. Die reCAPTCHA-Verifizierung ist unsichtbar und wird Nutzern nicht angezeigt:

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Suchen Sie dann die Methode finishEnrollMultiFactor() und fügen Sie Folgendes hinzu, um den zweiten Faktor zu registrieren:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Suchen Sie als Nächstes die Funktion signIn und fügen Sie den folgenden Kontrollfluss hinzu, der Nutzer, die für die MFA registriert sind, auffordert, ihren zweiten Faktor einzugeben:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Der Rest der Implementierung, einschließlich der hier aufgerufenen Funktionen, ist bereits abgeschlossen. Sehen Sie sich den Rest der Datei an, um zu sehen, wie sie funktionieren.

4. Anmeldung mit MFA in den Emulatoren testen

Probieren Sie jetzt die MFA-Implementierung aus. Prüfen Sie, ob Ihre Emulatoren noch ausgeführt werden, und rufen Sie die lokal gehostete App unter localhost:5170 auf. Versuchen Sie, sich anzumelden. Wenn Sie aufgefordert werden, den MFA-Code anzugeben, wird er im Terminalfenster angezeigt.

Da die Emulatoren die Multi-Faktor-Authentifizierung vollständig unterstützen, kann Ihre Entwicklungsumgebung vollständig in sich geschlossen sein.

Weitere Informationen zur Implementierung der MFA finden Sie in unserer Referenzdokumentation.

5. Blockierfunktion erstellen

Einige Anwendungen sind nur für eine bestimmte Nutzergruppe vorgesehen. In solchen Fällen möchten Sie möglicherweise benutzerdefinierte Anforderungen für die Registrierung oder Anmeldung eines Nutzers in Ihrer App erstellen.

Genau das bieten Blockierfunktionen: eine Möglichkeit, benutzerdefinierte Authentifizierungsanforderungen zu erstellen. Es handelt sich um Cloud Functions, die im Gegensatz zu den meisten Funktionen synchron ausgeführt werden, wenn ein Nutzer versucht, sich zu registrieren oder anzumelden.

HINWEIS: Eine Blockierfunktion kann einen Nutzer ohne Änderungen akzeptieren, einen Nutzer akzeptieren und ändern – was zum Anwenden benutzerdefinierter Ansprüche nützlich ist – oder den Nutzer ablehnen.

Es gibt zwei Ereignisse, die eine Blockierfunktion auslösen können:

• beforeUserCreated-Ereignisse: werden ausgelöst, bevor ein Nutzerkonto erstellt wird. Sie können verwendet werden, um Anforderungen für Nutzer festzulegen, die ein Konto erstellen möchten.
• beforeUserSignedIn-Ereignisse: werden ausgelöst, bevor sich ein Nutzer anmeldet. Sie können verwendet werden, um Anforderungen für die Anmeldung von Nutzern festzulegen.

Wenn Sie eine blockierende Funktion erstellen möchten, öffnen Sie functions/index.js in Ihrem Editor und suchen Sie nach der auskommentierten Funktion beforecreated.

Ersetzen Sie ihn durch diesen Code, der nur Nutzern mit der Domain „beispiel.de“ das Erstellen eines Kontos erlaubt:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Blockierfunktion in den Emulatoren ausprobieren

Wenn Sie die Blockierungsfunktion ausprobieren möchten, müssen Ihre Emulatoren ausgeführt werden. Melden Sie sich in der Web-App unter localhost:5170 ab.

Versuchen Sie dann, ein Konto mit einer E‑Mail-Adresse zu erstellen, die nicht auf example.com endet. Die Blockierfunktion verhindert, dass der Vorgang erfolgreich ausgeführt wird.

Versuchen Sie es jetzt noch einmal mit einer E-Mail-Adresse, die mit example.com endet. Das Konto wird erstellt.

Mit Blockierfunktionen können Sie beliebige Einschränkungen für die Authentifizierung erstellen. Weitere Informationen finden Sie in der Referenzdokumentation.

Zusammenfassung

Gut gemacht! Sie haben einer Web-App die Multi-Faktor-Authentifizierung hinzugefügt, um Nutzern zu helfen, ihr Konto zu schützen. Anschließend haben Sie benutzerdefinierte Anforderungen für die Registrierung von Nutzern mithilfe von blockierenden Funktionen erstellt. Du hast dir ein GIF verdient!